Which UI do you use?

Custom UI

Pre built UI

4. Protecting a website route

CAUTION

This information only applies to scenarios in which you are using SuperTokens Session Access Tokens.

If you are implementing Unified Login you will have to manually check authentication state based the OAuth2/OIDC library that you are using. Please explore the dedicated documentation to find out more.

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>
  )
}

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.