DEV Community

How to implement protected routes in Next.js

Caleb O. on March 05, 2022

One of the features that is neccessary in a single page application as it pertains to the authentication or its security is the ability to conditio...

Read full post

Casey Choiniere • Jun 9 '22

Just a little feedback on some things that you might want to correct in your article so that people are not misled.

The isUserAuthenticated function will never return true. It will return "false" or "undefined". Instead of what you have:

const isUserAuthenticated = () => {
if (!authState.token) {
return false;
}
};

You might want to consider simply:

const isUserAuthenticated = () => !!authState.token;

Which will always return a boolean value.

Also, where you're checking if the user is authenticated in your useEffect you have your logic backwards. If the user isn't authenticated you're sending them to the dashboard, not the login page.

You have this:
React.useEffect(() => {
// checks if the user is authenticated
authContext.isUserAuthenticated()
? router.push("/")
: router.push("/dashboard");
}, []);

Which should be:
React.useEffect(() => {
// checks if the user is authenticated
authContext.isUserAuthenticated()
? router.push("/dashboard")
: router.push("/");
}, []);

Caleb O. • Jun 9 '22

Dang!!!

Thank you so much for pointing this out. I'll make the necessary change. Thank you once again for your feedback man!

Ahmed Khalil YOUSFI • Aug 5 '22

you still haven't updated your article

Caleb O. • Aug 5 '22

All done!

Thank you for reminding me

Ajitpatil92002 • Dec 28 '22

Yghhh

Mohammed Faizan Ahmed • Oct 22 '22

thank you for this article.

Caleb O. • Oct 24 '22

I'm glad you found it helpful

Ajitpatil92002 • Dec 28 '22

Hhh

Hidayt Rahman • Apr 25 '23

Nice Article, But why we are not using session ?

Caleb O. • Apr 27 '23

Thanks Hidayt!

Funny enough. This was when I first laid my hands on auth in Next.js. Now that I've been accustomed to it. I'm using cookies and session with getServerSideProps

Hopefully, I'll have an article about it and share it Herr, soon.

Kehinde Adeleke • May 11 '23

Hi Caleb, do you have any open source repo demonstrating your use of cookies and session with getServerSideProps?

Caleb O. • May 11 '23

Hi Kehinde,

At the moment, No. But, I'm experimenting with cookies and getServerSideProps currently.

I'm using nookies (a Next.js cookie helper package) to parse cookies on the client and server.

Perhaps and when it turns out well. I'll share what I learned.

Matej Vykoukal • Jan 26 '23

Maybe I am wrong, but is it safe to store token in localStorage? AFAIK localStorage can be accesed by 3rd party scripts :/

Caleb O. • Jan 27 '23

You're absolutely correct.

Storing JWT in localStorage isn't the perfect solution. You can try keeping the token in a cookie.

Whatever works best for everyone's use-case.

Alexandros Panayi • Aug 23 '22

I feel like useEffect is the wrong hook to use. You're rendering all your components, then checking if the user is authenticated.

Wouldn't it be better just to:

!authContext.isUserAuthenticated() && router.push("/")

Outside of the useEffect?

Tejaswan Kalluri • Sep 30 '22

can we use useLayoutEffect() hook. which runs before the rendering part.

youtu.be/sRDUOd1IkS8

Muhnnad Habib • Jan 8 '23

Thank you for this article, but I just got confused a little bit, you didn't use localstorage.getItem at all!, this means whenever the user land on the page he will be not authorized even though the token exists in the localstorage? am I wrong?

Caleb O. • Jan 9 '23

Hi Muhnnad,

I'm glad you found it helpful. I'm not using the getItem method here because all I'm doing here is to check if the user's auth token is in localStorage.

If it is, authenticate the user. If it isn't, re-route them to the login page.

Hence, the need for this snippet, and the one below, in the use Effect hook.

const isUserAuthenticated = () => !!authState.token;

Aman Deep • Jul 13 '22

isUserAuthenticated won't work becasue next js have by default ssr. Here's simple solution that put jwt in cookie. it will work otherwise , it will show undefined.

mahan-js • Nov 11 '22

Hidayt Rahman • Apr 27 '23

Have covered session here.
Handle Protected Route using Session

Caleb O. • Apr 28 '23

Great! I see that you're using next-auth here too.

My own case would be for an external backend. Thank you for sharing though.

Hidayt Rahman • Apr 28 '23

It works with both cases internal and external backend by using next-auth

Caleb O. • May 3 '23

Oh! Great!

Rabby Hossian • Oct 12 '22

If you have hundreds of pages, there will be a lot of code duplication with this approach

Caleb O. • Oct 13 '22

What would the best approach look like?

liv • Dec 5 '22 • Edited

You can create a new function inside your auth-context.js like this.

export const ProtectRoute = ({ children }: any) => {
    const router = useRouter();
    const authContext = React.useContext(AuthContext);

    const isLoggedIn = authContext.isUserAuthenticated();

    if (isLoggedIn && window.location.pathname === "/") {
        router.push("/dashboard");
    } else if (!isLoggedIn && window.location.pathname !== "/") {
        router.push("/");
    }

    return children;
};

And then use it as a wrapper to your pages.

Example in MyApp component, like this:

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

Alternatively, you can also add this to any individual page.

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

Caleb O. • Jan 27 '23

Thank you for sharing this @liv_it