Skip to main content
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 { MultiFactorAuthPreBuiltUI } from "supertokens-auth-react/recipe/multifactorauth/prebuiltui"
import { PasswordlessPreBuiltUI } from "supertokens-auth-react/recipe/passwordless/prebuiltui";
import { ThirdPartyPreBuiltUI } from "supertokens-auth-react/recipe/thirdparty/prebuiltui";
import { EmailPasswordPreBuiltUI } from "supertokens-auth-react/recipe/emailpassword/prebuiltui";
import SecondFactor from "./SecondFactor";
import Home from "./Home"

function App() {
return (
<SuperTokensWrapper>
<div className="App">
<div className="fill">
<Routes>
{getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI])}
<Route
path="/"
element={
<SessionAuth key="/">
<Home />
</SessionAuth>
}
/>
<Route
path="/second-factor"
element={
<SessionAuth key="/second-factor">
<SecondFactor />
</SessionAuth>
}
/>
</Routes>
</div>
</div>
</SuperTokensWrapper>
);
}
Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI