Skip to main content
Which UI do you use?
Custom UI
Pre built UI

Embed Sign In / Up form in a page

Step 1: Disable default implementation #

This will prevent SuperTokens from displaying the default login UI in the /auth page.

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Passwordless.init({
            contactMethod: "EMAIL", // This example will work with any contactMethod
            signInUpFeature: {
                disableDefaultUI: true,
                // ...
            },
            // ...
        }),
        // ...
    ]
});

If you navigate to /auth, you should not see the widget anymore.

Step 2: Render the component yourself #

For example if you would like to show the login form in our own component which renders custom UI around it, and is shown only if the user is logged in, then we can:

Do you use react-router-dom?
YesNo

Step 3: Changing the website path for the login UI #

The default path for this is component is /{websiteBasePath}/.

If you are displaying this at some custom path, then you need add additional config on frontend:

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Passwordless.init({
            contactMethod: "EMAIL", // This example will work with any contactMethod
        })
    ],
    // The user will be taken to the custom path when then need to login.
    getRedirectionURL: async (context) => {
        if (context.action === "TO_AUTH") {
            return "/custom-login-path";
        };
    }
})

Optional: Prevent redirection after SignIn / Up #

Upon successful login, SuperTokens redirects the user to the return value of getRedirectionURL provided in the recipe config. By default or when returning undefined from getRedirectionURL, the user is redirected to the / route. If you wish to completely prevent redirection, return null instead. Typically, this is used if you want to embed the sign in / up component in a popup and want to just dismiss the popup post login.

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Passwordless.init({
            contactMethod: "EMAIL_OR_PHONE", // This example will work with any contactMethod.
            getRedirectionURL: async (context) => {
                // Prevent redirection after successful sign in/up by returning null.
                if (context.action === "SUCCESS") {
                    return null;
                };
            },
        })
    ],
})
note

To avoid redirection for failed claims, such as Email Verification, reach out to us on Discord for assistance.

Optional: Rendering Auth components together in a popup and page #

You may choose to display the Auth UI in a full page and in a popup in the same app. For the full-page Auth UI, redirection after a successful login is preferred, whereas in the popup, it is not. In this scenario, you have the option to check either the current URL or the userContext object in getRedirectionURL to decide whether to return null or not.

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI