Skip to main content

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        ThirdParty.init({
            signInAndUpFeature: {
                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 of the user is logged in, then we can:

import React from "react";
import { SignInAndUp } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
import Session from "supertokens-auth-react/recipe/session";
import Header from "./header";
import Footer from "./footer";

function MyLandingPage() {
    let sessionContext = Session.useSessionContext();
    if (sessionContext.loading) {
        return null;
    }
    if (sessionContext.doesSessionExist) {
        // We wrap this with <SessionAuth /> so that
        // all claims are validated before showing the logged in UI.
        // For example, if email verification is switched on, and
        // the user's email is not verified, then <SessionAuth />
        // will redirect to the email verification page.
        return (
            <Session.SessionAuth>
                <Header />
                    You are logged in!
                <Footer />
            </Session.SessionAuth>
        )
    } else {
        return (
            <div>
                <Header />
                <SignInAndUp />
                <Footer />
            </div>
        )
    }
}

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        ThirdParty.init({}),
    ],
    // 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";
        };
    }
})
Which UI do you use?
Custom UI
Pre built UI