Post login redirection
Change redirection path post login
By default, the user is redirected to the the /
route on your website post login. To change this, you can use the getRedirectionURL
function on the frontend as shown below:
import SuperTokens from "supertokens-auth-react";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "...",
},
getRedirectionURL: async (context) => {
if (context.action === "SUCCESS" && context.newSessionCreated) {
if (context.redirectToPath !== undefined) {
// we are navigating back to where the user was before they authenticated
return context.redirectToPath;
}
if (context.createdNewUser) {
// user signed up
} else {
// user signed in
}
return "/dashboard";
}
return undefined;
},
recipeList: [ /* Recipe list */]
});
The user will be redirected to the provided URL on:
- Successful sign up.
- Successful sign in.
- Successful email verification post sign up.
- If the user is already logged in.
If you want to redirect the user to a different domain, then you can do so by first redirecting them to a specific path using the function above, which further redirects them to the final domain.
Please refer to this page to learn more about the getRedirectionURL
hook.
Redirect user to the login page
Use the redirectToAuth({show?: "signin" | "signup", redirectBack?: boolean}?)
function to redirect the user to the login screen. For example, you may want to call this function when the user clicks on the login button.
import React from "react";
import { redirectToAuth } from "supertokens-auth-react";
function NavBar () {
async function onLogin () {
redirectToAuth();
}
return (
<ul>
<li>Home</li>
<li onClick={onLogin}>Login</li>
</ul>
)
}
- Call
redirectToAuth({show: "signin"})
to take them to the sign in screen - Call
redirectToAuth({show: "signup"})
to take them to the sign up screen - If you do not want the user to be redirected to the current page post sign in, use
redirectToAuth({redirectBack: false})
Showing sign up by default
The login screen shows the sign in UI by default, to change that, you can set the following config:
import SuperTokens from "supertokens-auth-react";
SuperTokens.init({
appInfo: {
apiDomain: "...",
appName: "...",
websiteDomain: "..."
},
defaultToSignUp: true,
recipeList: [ /* ... */]
});