Embed in a page

What type of UI are you using?

1. Step: Disable the default implementation

import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailVerification.init({
            mode: "REQUIRED",
            disableDefaultUI: true
        }),
    ]
});

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

2. Step: Render the component yourself

Add the EmailVerification component in your app:

import React from "react";
import { EmailVerification } from 'supertokens-auth-react/recipe/emailverification/prebuiltui';

class EmailVerificationPage extends React.Component {
    render() {
        return (
            <div>
                <EmailVerification />
            </div>
        )
    }
}

3. Step: 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:

A. Step: On the backend

import SuperTokens from "supertokens-node";
import EmailVerification from "supertokens-node/recipe/emailverification";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        EmailVerification.init({
            mode: "OPTIONAL",
            emailDelivery: {
                override: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        sendEmail(input) {
                            return originalImplementation.sendEmail({
                                ...input,
                                emailVerifyLink: input.emailVerifyLink.replace(
                                    // This is: `${websiteDomain}${websiteBasePath}/verify-email`
                                    "http://localhost:3000/auth/verify-email",
                                    "http://localhost:3000/your/path"
                                    )
                                }
                            )
                        },
                    }
                }
            }
        })
    ]
});

B. Step: On the frontend

import SuperTokens from "supertokens-auth-react";
import EmailVerification from "supertokens-auth-react/recipe/emailverification";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "...",
    },
    recipeList: [
        EmailVerification.init({
            mode: "REQUIRED",

            // 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";
                };
            }
        })
    ]
})