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 `/`