File length: 6714
# Additional Verification - Multi Factor Authentication - Legacy method - Using prebuilt UI -  2. Showing the first and second factor UI
Source: https://supertokens.com/docs/additional-verification/mfa/legacy-mfa/prebuilt-ui/showing-login-ui

:::info Caution
This is the legacy method of implementing MFA. It has multiple [disadvantages](../legacy-vs-new) compared to using our MFA recipe.
:::




## First factor UI

You should see the third party + email password login UI when you visit `<WEBSITE_DOMAIN><WEBSITE_BASE_PATH>`. 

No further step is required for the first factor.

## Create and add the `SecondFactor` claim validator

We will create a [custom claim](https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-legacy-2fa/src/secondFactorClaim.tsx) called `SecondFactorClaim` which will be responsible to check if the second factor has been completed or not. Then we can use the result in various places to protect frontend routes (in the subsequent steps).

Create a file called `SecondFactorClaim.tsx` in which you can add the following code:
```tsx

const SecondFactorClaim = new BooleanClaim({
    id: "2fa-completed",
    refresh: async () => {
        // This is something we have no way of refreshing, so this is a no-op
    },
    onFailureRedirection: () => "/second-factor",
});

export default SecondFactorClaim
```

Then in the main `session.init` in the `supertokens.init` block, add this claim's validator to run the check on each route.

```tsx

// @ts-ignore

SuperTokens.init({
    appInfo: {
        appName: "<YOUR_APP_NAME>",
        apiDomain: "<YOUR_API_DOMAIN>",
        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
        apiBasePath: "/auth",
        websiteBasePath: "/auth"
    },
    recipeList: [
        // other recipes..
        Session.init({
            override: {
                functions: (oI) => ({
                    ...oI,
                    // highlight-start
                    getGlobalClaimValidators: ({ claimValidatorsAddedByOtherRecipes }) => {
                        return [
                            SecondFactorClaim.validators.isTrue(),
                            ...claimValidatorsAddedByOtherRecipes.filter(
                                (v) => v.id !== MultiFactorAuth.MultiFactorAuthClaim.id
                            ),
                        ];
                    },
                    // highlight-end
                }),
            },
        })
    ]
});
```

In the above, we add the `SecondFactorClaim.validators.isTrue()` validator ensuring that whenever you use `SessionAuth`, we check that the second factor claim is set to true, if not, it will redirect to `/second-factor` (as defined in the claim validator). We also remove the in build `MultiFactorAuth.MultiFactorAuthClaim` since we are not using the full in built MFA recipe (as this is the legacy method).

## Second factor UI

For this guide, we will be showing the second factor UI on `/second-factor`.

### 1. Create the second factor UI on `/second-factor`

Copy & paste the code for the second-factor UI from [our demo app right here](https://github.com/supertokens/supertokens-auth-react/blob/master/examples/with-legacy-2fa/src/SecondFactor/index.tsx).

This component customises the `AuthPageTheme` component to:
- Renders the pre-built `AuthPage` with passwordless, `otp-phone` factor.
- Add a button to "login with another account" which allows users to redo the first factor.
- Redirects the user to the `/` route in case the second factor has already been completed.
- Auto sends the OTP to the user in case they are signing in and we already know their phone number. 

### 2. Override the passwordless UI components to change the header text and disable the change phone number button

Copy / Paste the following override customisations in the `Passwordless.init` function call:

```tsx

function App() {
    return (
        <SuperTokensWrapper>
            <AuthRecipeComponentsOverrideContextProvider
                components={{
                    AuthPageHeader_Override: ({ DefaultComponent, ...props }) => {
                        if (props.factorIds.includes("otp-phone")) {
                            <div
                                style={{
                                    fontSize: "30px",
                                    marginBottom: "10px",
                                }}>
                                Second factor auth
                            </div>;
                        }
                        return <DefaultComponent {...props} />;
                    },
                }}>
                <PasswordlessComponentsOverrideProvider
                    components={{
                        // we override the component which shows the change phone number button
                        PasswordlessUserInputCodeFormFooter_Override: ({ DefaultComponent, ...props }) => {
                            const session = useSessionContext();

                            if (session.loading !== true && session.accessTokenPayload.phoneNumber === undefined) {
                                // this will show the change phone number button
                                return <DefaultComponent {...props} />;
                            }

                            // this will hide the change phone number button
                            return null;
                        },
                    }}>
                    {/* Rest of the JSX */}
                </PasswordlessComponentsOverrideProvider>
            </AuthRecipeComponentsOverrideContextProvider>
        </SuperTokensWrapper>
    );
}
export default App;
```

### 3. Display the second factor component on your app's router

Finally, we add the custom component we copy / pasted before to our router:

```tsx

// @ts-ignore

function App() {
    return (
        <SuperTokensWrapper>
            <div className="App">
                <div className="fill">
                    <Routes>
                        {getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI, EmailPasswordPreBuiltUI, PasswordlessPreBuiltUI, MultiFactorAuthPreBuiltUI])}
                        // highlight-start
                        <Route
                            path="/second-factor"
                            element={
                                <SessionAuth key="/second-factor">
                                    <SecondFactor />
                                </SessionAuth>
                            }
                        />
                        // highlight-end
                    </Routes>
                </div>
            </div>
        </SuperTokensWrapper>
    );
}
```