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.

SuperTokens.init({    appInfo: {...},    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 {SignInAndUp} from 'supertokens-auth-react/recipe/emailpassword'; 
class MyLandingPage extends React.Component {    render() {        return (            <div>                <Header/>                <FirstSection/>                <AnotherSection/>
                (...)                                <SignInAndUp/>                <Footer/>            </div>        )    }}

Step 3: Chaning the website path for the login UI (optional)#

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:

SuperTokens.init({    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;                };            }        })    ]})