I would like to show Login/register link if user is not authenticated, and Logout link if they are. Trying to do this with demo application for react

npx create-supertokens-app@latest --recipe=emailpassword

. How do I do this pls?

Hey @reevolver

Hiya

See this https://supertokens.com/docs/emailpassword/common-customizations/sessions/protecting-frontend-routes

I was trying to use that. Its for a sidebar menu on all pages, so I dont want it to redirect if they are not logged in, just show a login link/button. The example is for 'If they are not logged in, the user will be redirected to the login page.'

See the optional session part

I've adapted the Optional session example thus:

function MyDashboardComponent(props: any) {
  let sessionContext = Session.useSessionContext();
  
  if (sessionContext.loading) {
    return <span>Loading...</span>;
  }
  if (sessionContext.doesSessionExist) {
    return <button>Logout</button>;
  } else {
    return <button>Login</button>;
  }
}

You need to call the init function yea

Thx. Im still struggling with this. I have the feeling it should be easier to achieve this. Its a very common use case right?

It is fairly easy indeed. Just have to read from the session context provided by the supertokensWrapper

Yes, so then I can detect not logged in, and show login button. But then that button needs to allow the user to login, and protect certain routes for logged in state only?

Yea. So when the button is clicked, you redirect to the auth screen

Thx, sorted now

nice!