Which UI do you use?

Custom UI

Pre built UI

Auth redirection

Change redirection path post login

ReactJS

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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 Passwordless from "supertokens-auth-react/recipe/passwordless";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        Passwordless.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;
                    }
                    if (context.isNewPrimaryUser) {
                        // user signed up
                    } else {
                        // user signed in
                    }
                    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.

Angular

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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 Passwordless from "supertokens-auth-react/recipe/passwordless";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        Passwordless.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;
                    }
                    if (context.isNewPrimaryUser) {
                        // user signed up
                    } else {
                        // user signed in
                    }
                    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.

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:

import SuperTokens from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        Passwordless.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;
                    }
                    if (context.isNewPrimaryUser) {
                        // user signed up
                    } else {
                        // user signed in
                    }
                    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

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

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 { Component } from "@angular/core";
import { redirectToAuth } from "supertokens-auth-react";

@Component({
    selector: 'nav-bar',
    template: `
        <ul>
            <li>Home</li>
            <li (click)="onLogin()">Login</li> 
        </ul>
    `,
})
export class NavBarComponent {
    async onLogin () {
        redirectToAuth(); 
    }
}

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

Vue

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.

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

<script>
import { redirectToAuth } from "supertokens-auth-react";

export default {
  name: "NavBarComponent",
  methods: {
    async onLogin() {
      redirectToAuth();
    }
  }
};
</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})