4. Protecting a website route

Protecting a website route means that it cannot be accessed unless a user is signed in. A signed-out user is 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:

import React from "react";
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>
  );
}

Protecting a website route means that it cannot be accessed unless a user is signed in. A signed-out user is redirected to the login page.

You can do this with the doesSessionExist function. This example assumes that your custom login page is at /login; change the path if your login page uses a different route.

import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Session from "supertokens-web-js/recipe/session";

import ProtectedPage from "./protectedPage";

type SessionStatus = "loading" | "authenticated" | "redirecting" | "error";

export default function Home() {
  const router = useRouter();
  const [sessionStatus, setSessionStatus] = useState<SessionStatus>("loading");

  useEffect(() => {
    let active = true;

    async function checkSession() {
      try {
        const sessionExists = await Session.doesSessionExist();
        if (!active) {
          return;
        }

        if (!sessionExists) {
          setSessionStatus("redirecting");
          const didNavigate = await router.replace("/login");
          if (active && !didNavigate) {
            setSessionStatus("error");
          }
          return;
        }

        setSessionStatus("authenticated");
      } catch {
        if (active) {
          setSessionStatus("error");
        }
      }
    }

    void checkSession();

    return () => {
      active = false;
    };
  }, [router]);

  if (sessionStatus === "error") {
    return <div role="alert">Unable to verify your session. Please try again.</div>;
  }

  if (sessionStatus === "redirecting") {
    return <div>Redirecting...</div>;
  }

  if (sessionStatus === "loading") {
    return <div>Loading...</div>;
  }

  return <ProtectedPage />;
}