Embed in a page 📑

Two steps to achieving this:

• First we disable the full page default implementation
• Then we render the Sign-up / Sign-in UI wherever we like

Step 1: Disable default implementation 🔐

ReactJS

SuperTokens.init({
    appInfo: {...},
    recipeList: [
        EmailPassword.init({
            signInAndUpFeature: {
                disableDefaultImplementation: true,
                (...)
            },
            (...)
        }),
        (...)
    ]
});

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

Step 2: Add component 📃

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:

ReactJS

import {SignInAndUp} from 'supertokens-auth-react/recipe/emailpassword';

class MyLandingPage extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <FirstSection/>
                <AnotherSection/>

                (...)

                <SignInAndUp/>
                <Footer/>
            </div>
        )
    }
}