Skip to main content

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.js file to add an auth wrapper around your Home component like so:

import React from 'react'import dynamic from 'next/dynamic'import EmailPassword from 'supertokens-auth-react/recipe/emailpassword'import ProtectedPage from "./protectedPage";
const EmailPasswordAuthNoSSR = dynamic(  new Promise<typeof EmailPassword.EmailPasswordAuth>((res) =>    res(EmailPassword.EmailPasswordAuth)  ),  { ssr: false })
export default function Home() {  return (    // we protect ProtectedPage by wrapping it    // with ThirdPartyEmailPasswordAuthNoSSR
    <EmailPasswordAuthNoSSR>      <ProtectedPage />    </EmailPasswordAuthNoSSR>  )}

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.