3. Protecting routes

Wrap application routes with `SessionAuth` to ensure multi-factor authentication completion.

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>
  );
}