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

4. Protecting a website route

Protecting a website route means that it cannot be accessed unless a user is signed in. If a non signed in user tries to access it, they will be redirected to the login page.

Let's say we want to protect the home page of your website (/ route). In this case, we can edit the /pages/index.tsx file to add an auth wrapper around your Home component like so:

pages/index.tsx
import React from 'react'
import dynamic from 'next/dynamic'
import { SessionAuth } from 'supertokens-auth-react/recipe/session'
import ProtectedPage from "./protectedPage";

export default function Home() {
return (
// we protect ProtectedPage by wrapping it with SessionAuth

<SessionAuth>
<ProtectedPage />
</SessionAuth>
)
}
important

An example of this can be seen here.

Test by navigating to /

You should be redirected to the login page. After that, sign in, and then visit / again. This time, there should be no redirection.

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