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 ThirdPartyEmailPassword and the Passwordless recipes as mentioned in their quick setup section:

Your app's name:*
Information about the question
This is the name of your application
API Domain:*
Information about the question
This is the URL of your app's API server.
API Base Path:
Information about the question
SuperTokens will expose it's APIs scoped by this base API path.
Website Domain:*
Information about the question
This is the URL of your website.
Website Base Path:
Information about the question
The path where the login UI will be rendered
Submit form
import React from 'react';

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword, {Github, Google, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
appInfo: {
appName: "<YOUR_APP_NAME>",
apiDomain: "<YOUR_API_DOMAIN>",
websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
apiBasePath: "/auth",
websiteBasePath: "/auth"
},
recipeList: [
// first factor method
ThirdPartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init(),
Google.init(),
Facebook.init(),
Apple.init(),
]
}
}),
// second factor method
Passwordless.init({
contactMethod: "PHONE"
}),
Session.init()
]
});

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.

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI