Which UI do you use?

Custom UI

Pre built UI

caution

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

3) Protecting routes

Now we can wrap your application routes with the SessionAuth component, which should check for MFA completion by default:

import React from "react";
import {
    Routes,
    Route,
} from "react-router-dom";
import * as reactRouterDom from "react-router-dom";
import { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import { SessionAuth } from "supertokens-auth-react/recipe/session";
import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
import { ThirdPartyEmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/thirdpartyemailpassword/prebuiltui";
import SecondFactor from "./SecondFactor";
import Home from "./Home"

function App() {
    return (
        <SuperTokensWrapper>
            <div className="App">
                <div className="fill">
                    <Routes> 
                        {getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyEmailPasswordPreBuiltUI, PasswordlessPreBuiltUI])}
                        <Route
                            path="/"
                            element={
                                <SessionAuth>
                                    <Home />
                                </SessionAuth>
                            }
                        />
                        <Route
                            path="/second-factor"
                            element={
                                <SessionAuth>
                                    <SecondFactor />
                                </SessionAuth>
                            }
                        />
                    </Routes>
                </div>
            </div>
        </SuperTokensWrapper>
    );
}