Next.js client side protected routes without server side rendering

Question

I am a little bit confused about protected routes in next.js.

First of all, I don't want to use any server side rendering. I want to statically export via next export. In that case, how do I implement client side protected routes?

Say, I have a back-end server with basic JWT authentication. How do I make certain routes protected from certain user and redirect them in /login page?

Answer 1

Since you're wanting to create protected routes with a static export, you'll need to do everything in the browser.

1. Verify their JWT in the browser
2. If their JWT is valid, render the page (including all requests to fetch data)
3. If their JWT is not valid, redirect them

For this, we're going to create a wrapper AuthCheck component.

Related:

How can you create a Private route in next.js?

AuthCheck

For verifying the JWT, you can use any method you'd like, including sending it to an api endpoint to verify it. Though I'm unsure if you can use Next.js api endpoints with static exports.

import { useRouter } from 'next/router'

export const AuthCheck = (props) => {
  const router = useRouter()
  const isJWTValid = useIsJWTValid() // you need to implement this. In this example, undefined means things are still loading, null means user is not signed in, anything truthy means they're signed in

  if (typeof window !== 'undefined' && user === null) router.push('/')

  if(!user) return <Loading /> // a loading component that prevents the page from rendering
   
  return props.children
}

You can then add this to your app.js.

const MyApp = ({ Component, pageProps }) => {
  return (
    <AuthCheck>
      <Component {...pageProps} />
    </AuthCheck>
  )
}

export default MyApp

Alternatively, you can also add this to any individual page. With this, you may need to debug the timing of any fetched data.

export default const ProtectedPage = () => {
  return (
    <AuthCheck>
      <!-- contents of the page -->
    </AuthCheck>
  )
}