Skip to main content
Caution

This is the legacy method of implementing MFA. It has several disadvantages compared to using our MFA recipe.

1. Recipe init

To start, we want to initialise the ThirdParty + EmailPassword, the Passwordless and the MFA recipes:

App Info

Adjust these values based on the application that you are trying to configure. To learn more about what each field means check the references page.
This is the URL of your app's API server.
This is the URL of your app's API server.
SuperTokens will expose it's APIs scoped by this base API path.
This is the URL of your website.
The path where the login UI will be rendered
import React from 'react';

import SuperTokens from "supertokens-auth-react";
import EmailPassword from 'supertokens-auth-react/recipe/emailpassword';
import ThirdParty from 'supertokens-auth-react/recipe/thirdparty';
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";
import MultiFactorAuth from "supertokens-auth-react/recipe/multifactorauth";

SuperTokens.init({
    appInfo: {
        appName: "<YOUR_APP_NAME>",
        apiDomain: "<YOUR_API_DOMAIN>",
        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
        apiBasePath: "/auth",
        websiteBasePath: "/auth"
    },
    recipeList: [
        // first factor method
        EmailPassword.init(),
        ThirdParty.init({
            // ...
        }),
        // second factor method
        Passwordless.init({
            contactMethod: "PHONE"
        }),
        Session.init(),
        MultiFactorAuth.init({
            firstFactors: ["emailpassword", "thirdparty"],
        }),
    ]
});

Notice that in the MultiFactorAuth init, we pass in the list of firstFactors. This will tell SuperTokens to only show email password + third party login in the pre built UI for the first factor, even though we have also added Passwordless.init in the recipe list.

In the subsequent sections, we will be seeing how to modify theses init calls so that we can achieve the flow we want. On a high level, we will be:

  • Rendering the Passwordless login UI on a custom path.
  • Auto skipping the screen which asks the user to input their phone number if we already have it - post sign in.
  • Implementing a logout button on the second factor pre built UI screen.
Important

In the guide, we will assume that the first factor path is /auth, and the second factor path is /second-factor.