JWT Authentication to NextJS Apps with middleware axios

This article is a simple tutorial on how to implement authentication with NextJS, before going into the guide, I’m going to demonstrate the technologies that are going to be used in the guide:JWT or JSON Web Token is an industry standard RFC 7519 method for representing claims securely between two parties.
NextJS middleware : Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly. This will help us handling routing with authentication
JWT auth service: you need a backend service that supports authentication with JWT, you can check out my tutorial on how to create one with NestJS, or you can build one on your own with any technology

Layout

We need a user interface first, take a look at this simple layout:

• Public routes : routes where anyone can access
• Auth routes : routes where only unauthenticated user can access
• Protected routes : routes where only authenticated user can access

Auth service

We need to call API login right ? So we need a service to handle authentication API calls. In this example, I will use axios to handle API calls

You can see that if the login request succeed, we will have the username , the accessToken or JWT, and the expire time.

Authentication hooks

We need 3 simple hooks:

• useCurrentUser : the hook to get the current logged in user’s info
• useLogin : the hook that provide the login method
• useLogout : the hook that provide the logout method

I will go into the first useLogin first: You can see I saved the user info after logged in with Cookies, why cookie ? I’ll explain later

useLogout : To log out, we only need to clear the cookie

useCurrentUser

Middleware

With React only, it’s pretty hard to check for authentication on every routes. But with NextJS middleware, it turns out to be pretty easy.

First, let’s check out the routes:

Since this is only a simple guide, I will go with these routes.

The important part is the middleware. In NextJS, Middleware allows you to run code before a request is completed, then based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.

Which means the middleware will be invoked for every route in your project.

Let’s see the middleware.ts file:

Explanation:

• First, get the current user from the cookies
• Check if the next route is protected, then check if the user is unauthenticated or the token expired. Delete the user from cookies and redirect to /login
• Check if the next route is auth route, but the user is logged in, redirect the user to /profile

Conclusion

That it, simple implementation to handle authentication in NextJS. I hope you find this article useful, if the example code is to obscure, check out the source code here