Skip to main content
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react

Protecting frontend routes

Requiring a session to access a route #

You can wrap your components with the <SessionAuth> react component. This will ensure that your component renders only if the user is logged in. If they are not logged in, the user will be redirected to the login page.

import React from "react";import {    BrowserRouter,    Routes,    Route,} from "react-router-dom";import { SuperTokensWrapper } from "supertokens-auth-react";import { SessionAuth } from "supertokens-auth-react/recipe/session";import MyDashboardComponent from "./dashboard";
class App extends React.Component {    render() {        return (            <SuperTokensWrapper>                <BrowserRouter>                    <Routes>                        <Route path="/dashboard" element={                            <SessionAuth>                                {/*Components that require to be protected by authentication*/}                                <MyDashboardComponent />                            </SessionAuth>                        } />                    </Routes>                </BrowserRouter>            </SuperTokensWrapper>        );    }}

Optional session on a route #

The <SuperTokensWrapper> component passes the session context to all components using which you can check if a session exists.

import React from "react";import {    BrowserRouter,    Routes,    Route,} from "react-router-dom";import { SuperTokensWrapper } from "supertokens-auth-react";import Session from "supertokens-auth-react/recipe/session";
class App extends React.Component {    render() {        return (            <SuperTokensWrapper>                <BrowserRouter>                    <Routes>                        <Route path="/dashboard" element={                            <MyDashboardComponent />                        } />                    </Routes>                </BrowserRouter>            </SuperTokensWrapper>        );    }}
function MyDashboardComponent(props: any) {    let sessionContext = Session.useSessionContext();
    if (sessionContext.loading) {        return null;    }
    if (sessionContext.doesSessionExist) {        // TODO:    } else {        // TODO:    }
    return null;}

Verifying the claims of a session #

Sometimes, you may also want to check if there are certain claims in the session before granting access to a route. For example, you may want to check that the session has the admin role claim for certain APIs, or that the user has completed 2FA.

This can be done using our session claims validator feature. Let's take an example of using the user roles claim to check if the session has the admin claim:

import React from "react";import { SessionAuth, useSessionContext } from 'supertokens-auth-react/recipe/session';import { UserRoleClaim, /*PermissionClaim*/ } from 'supertokens-auth-react/recipe/userroles';
const AdminRoute = (props: React.PropsWithChildren<any>) => {    return (        <SessionAuth            overrideGlobalClaimValidators={(globalValidators) =>                [...globalValidators,                UserRoleClaim.validators.includes("admin"),                    /* PermissionClaim.validators.includes("modify") */                ]            }        >            <InvalidClaimHandler>                {props.children}            </InvalidClaimHandler>        </SessionAuth>    );}
function InvalidClaimHandler(props: React.PropsWithChildren<any>) {    let sessionContext = useSessionContext();    if (sessionContext.loading) {        return null;    }
    if (sessionContext.invalidClaims.some(i => i.validatorId === UserRoleClaim.id)) {        return <div>You cannot access this page because you are not an admin.</div>    }
    // We show the protected route since all claims validators have    // passed implying that the user is an admin.    return <div>{props.children}</div>;}

Above, we are creating a generic component called AdminRoute which enforces that its child components can only be rendered if the user has the admin role.

In the AdminRoute component, we use the SessionAuth wrapper to ensure that the session exists. We also add the UserRoleClaim validator to the <SessionAuth> component which checks if the validators pass or not.

Finally, we check the result of the validation in the InvalidClaimHandler component which displays "You cannot access this page because you are not an admin." if the UserRoleClaim claim failed.

If all validation passes, we render the props.children component.

feature

You can also build your own custom claim validators based on your app's requirements.

Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react