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.

important

Test by navigating to /

Test by navigating to `/`