Skip to main content
Which UI do you use?
Custom UI
Pre built UI

Embed in a page

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

Step 2: 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>
)
}
}

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#

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

Step B: 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";
};
}
})
]
})