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 EmailPassword from "supertokens-auth-react/recipe/emailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "..."    },    recipeList: [        EmailPassword.init({            signInAndUpFeature: {                disableDefaultImplementation: 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 add the Sign-up / Sign-in widget at the very end of a landing page, before the footer, simply import the SignInAndUp component and render it:


import React from "react";import { SignInAndUp } from 'supertokens-auth-react/recipe/emailpassword';import Header from "./header";import FirstSection from "./firstSection";import AnotherSection from "./anotherSection";import Footer from "./footer";
class MyLandingPage extends React.Component {    render() {        return (            <div>                <Header />                <FirstSection />                <AnotherSection />
                (...)
                <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 EmailPassword from "supertokens-auth-react/recipe/emailpassword";
SuperTokens.init({    appInfo: {        apiDomain: "...",        appName: "...",        websiteDomain: "...",    },    recipeList: [        EmailPassword.init({
            // The user will be taken to the custom path when then need to login.            getRedirectionURL: async (context) => {                if (context.action === "SIGN_IN_AND_UP") {                    return "/custom-login-path";                };            }        })    ]})