Enhance SessionAuth to take in a prop to render a component in case a session does not exist

[rishabhpoddar]

If a user wants to optionally render the <SignInUp /> component, they would do something like this:

function () {
   let sessionContext = useSesionContext();
   if (sessionContext.doesSessionExist) {
      // session extist!
   } else {
      return <SignInUp />
   }
}

The problem with the above is:

• If a session does exist, they do not end up checking for other claim validators (it's not obvious)
• Post login, the SignInUp component is unmounted too early and functions like geetRedirectUrl do not get called. This causes other issues like the user not being navigated to the email verification screen (for example).

Instead, what users would need to do is:

function () {
   let sessionContext = useSesionContext();
   if (sessionContext.doesSessionExist) {
      <SessionAuth>
         // session extist!
      </SessionAuth?
   } else {
      return <SignInUp />
   }
}

This way, all problems are solved. However, it's not obvious. So maybe, we can add a prop to the SessionAuth wrapper like this:

<SessionAuth onNoSessionRender={<SignInUp />}/>
	<Home />
</…>

And then in the Home component, users would just need to handle the case of when a session exists.

[komarovalexander]

Hi @rishabhpoddar SessionAuth has requireAuth & redirectToLogin is it not something you need?

<SessionAuth
			requireAuth={true}
			redirectToLogin={() => {
				navigate('/login');
			}}
		>

[rishabhpoddar]

Hey @komarovalexander the redirectToLogin is no more a prop in the latest versions of the SDK. Instead, it defaults to redirecting to websiteBasePath, and can be changed by providing the redirectToAuth function when doing supertokens.init:

SuperTokens.init({
    appInfo: {
        ...
    },
    recipeList: [...],
    getRedirectionURL: async function (context) {
        if (context.showSignIn) {
            return "/signin"
        } else {
            return "/signup"
        }
    }
})

If you add the code above, and when SessionAuth detects no session, it will redirect to /signin.

[neongreen]

What is the solution if you need to render one button in case of "logged out" and another button in case of "log in", but don't want to do any redirects? I think that's what the issue title is about.

[rishabhpoddar]

In this case, you don't need to use SessionAuth. Just read the sessionContext and check if a session exists using that.

Also, this issue is not related to the question you asked.