Skip to main content

Enable email verification

important

Email verification is turned off by default. It is strongly encouraged to enable it to ensure the authenticity of your users.

There are two modes of email verification:

  • REQUIRED
  • OPTIONAL

When you enable this, you will need to provide the mode.

The REQUIRED vs OPTIONAL modes#

Mode set to REQUIRED#

  • On the backend:
    • It adds info about if the email is verified or not in the session claims during session creation.
    • Calls to verifySession() or getSession will return an error if email verification is not completed.
  • On the frontend:
    • If using React and using <SessionAuth /> wrapper: It will redirect the user to the email verification page if the email verification check fails.
    • If not using React, or not using <SessionAuth />: You can check if the email verification claim is true or not and take action based on that.

Mode set to OPTIONAL#

  • On the backend: It adds info about if the email is verified or not in the session claims during session creation.
  • On the frontend:
    • If using React and using <SessionAuth /> wrapper: It adds information about if email verification claim is true or not in the session context object. It's up to you to decide what to do in your routes based on this information.
    • If not using React, or not using <SessionAuth />: You can check if the email verification claim is true or not and take action based on that.

Backend setup#

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

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

Frontend setup#

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

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

The default UI (Pre built UI only)#

When a new user signs up with an unverified email, they will receive an email to verify their address and be redirected to the following screen:

Email verification UI when the link in email is not clicked

After they have clicked on the email, they will see this screen:

Email verification UI once the link in email is clicked
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react