Skip to main content

Auth redirection

Change redirection path post login#

By default, the user is redirected 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";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            getRedirectionURL: async (context) => {
                if (context.action === "SUCCESS") {
                    if (context.redirectToPath !== undefined) {
                        // we are navigating back to where the user was before they authenticated
                        return context.redirectToPath;
                    }
                    return "/dashboard";
                }
                return undefined;
            }
        }),
    ]
});

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.

info

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 folowing config:

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword from 'supertokens-auth-react/recipe/thirdpartyemailpassword';
import Session from 'supertokens-auth-react/recipe/session';

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdPartyEmailPassword.init({
            signInAndUpFeature: {
                defaultToSignUp: true
            }
        }),
        Session.init({ /* ... */ })
    ]
});
Which UI do you use?
Custom UI
Pre built UI