Which UI do you use?

Custom UI

Pre built UI

1) Recipe init

caution

• SuperTokens is not yet optimised for 2FA implementation, so you have to add a lot of customisations for it to work. We are working on improving the development experience for 2FA as well as adding more factors like TOTP. Stay tuned.
• A demo app that uses the pre built UI can be found on our GitHub.

To start, we want to initialise the ThirdPartyEmailPassword and the Passwordless recipes as mentioned in their quick setup section:

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.