Which UI do you use?

Custom UI

Pre built UI

Auth redirection

Change redirection path post login

ReactJS

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:

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

(window as any).supertokensUIInit("supertokensui", {
    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 */]
});

Angular

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

Vue

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:

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

(window as any).supertokensUIInit("supertokensui", {
    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.

info

Please refer to this page to learn more about the getRedirectionURL hook.

Redirect user to the login page

ReactJS

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

Angular

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

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&redirecToPath=" + encodeURIComponent(window.location.pathname);
    }
}

• Set show=signin to take them to the sign in screen
• Set show=signup to take them to the sign up screen
• Set redirecToPath 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).

Vue

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

<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&redirecToPath=" + encodeURIComponent(window.location.pathname);
    }
  }
};
</script>

• Set show=signin to take them to the sign in screen
• Set show=signup to take them to the sign up screen
• Set redirecToPath 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).

Showing sign up by default

The login screen shows the sign in UI by default, to change that, you can set the folowing config:

ReactJS

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

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

Angular

import SuperTokens from "supertokens-auth-react";

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

Vue

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

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