Post Login Redirect

Change post-login redirection paths and configure login screen behavior using SuperTokens.

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:

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";

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 */
  ],
});

// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  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 first redirect them to a specific path using the function above, which further redirects them to the final domain.

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.

Redirect the user to the /auth (this is the default path for the pre-built UI)

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>
  );
}

import { Component } from "@angular/core";

@Component({
  selector: "nav-bar",
  template: `
    <ul>
      <li>Home</li>
      <li (click)="onLogin()">Login</li>
    </ul>
  `,
})
export class NavBarComponent {
  async onLogin() {
    window.location.href = "/auth?show=signin&redirectToPath=" + encodeURIComponent(window.location.pathname);
  }
}

<template>
  <ul>
    <li>Home</li>
    <li @click="onLogin">Login</li>
  </ul>
</template>

<script>
  export default {
    name: "NavBarComponent",
    methods: {
      async onLogin() {
        window.location.href = "/auth?show=signin&redirectToPath=" + encodeURIComponent(window.location.pathname);
      },
    },
  };
</script>

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})

Set show=signin to take them to the sign in screen
Set show=signup to take them to the sign up screen
Set redirectToPath to redirect the user to a specific page after they have signed in, or you can skip it to take them to the / route (which is the default one).

Set show=signin to take them to the sign in screen
Set show=signup to take them to the sign up screen
Set redirectToPath to redirect the user to a specific page after they have signed in, or you can skip it to take them to the / route (which is the default one).

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: [
    /* ... */
  ],
});

// this goes in the auth route config of your frontend app (once the pre-built UI script has been loaded)

supertokensUIInit({
  appInfo: {
    apiDomain: "...",
    appName: "...",
    websiteDomain: "...",
  },
  defaultToSignUp: true,
  recipeList: [
    /* ... */
  ],
});

Post Login Redirect

See also

API schema and response details

Post Login Redirect

Change redirection path post login

Redirect user to the login page

Showing sign up by default

See also