Skip to main content

Embed in a page

Step 1: Disable the default implementation#

SuperTokens.init({    appInfo: {...},    recipeList: [        EmailPassword.init({            emailVerificationFeature: {                mode: "REQUIRED",                disableDefaultImplementation: true            },        }),    ]});

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

Step 2: Render the component yourself#

Add the EmailVerification component in your app:

import {EmailVerification} from 'supertokens-auth-react/recipe/emailpassword';
class EmailVerificationPage extends React.Component {    render() {        return (            <div>                <EmailVerification/>             </div>        )    }}

Step 3: Changing the website path for the email verification UI (optional)#

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

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

Step A: On the backend#

let SuperTokens = require("supertokens-node");let EmailPassword = require("supertokens-node/recipe/emailpassword);
SuperTokens.init({    SuperTokens: {...},    appInfo: {...},    recipeList: [        EmailPassword.init({            emailVerificationFeature: {
                // This function is used to generate the email verification link                getEmailVerificationURL: async (user) => {                    let { email, id } = user;                    return ""                }            }        })    ]});

Step B: On the frontend#

SuperTokens.init({    recipeList: [        EmailPassword.init({
            // The user will be taken to the custom path when they need to get their email verified.            getRedirectionURL: async (context) => {                if (context.action === "VERIFY_EMAIL") {                    return "/custom-email-verification-path";                };            }        })    ]})