Build a React Data Dashboard with Route Guarding using NextAuth Middleware

If you are looking to build a data dashboard using React, Next.js, Material-UI, and Typescript, you’ve come to the right place. In this article, we will focus on route guarding with NextAuth middleware to secure your dashboard and restrict access to authenticated users only.

Getting Started

Before we dive into the implementation of route guarding, make sure you have Next.js, Material-UI, and Typescript installed in your project. If not, you can use the following commands to add them:

			npm install next react react-dom
			npm install @mui/material @emotion/react @emotion/styled
			npm install typescript @types/react @types/node
		

Implementing NextAuth Middleware

NextAuth is a complete authentication system for Next.js. It provides a set of default routes for handling authentication, including login, logout, and user session management. To implement route guarding, we will leverage NextAuth middleware to protect our dashboard routes.

First, install NextAuth in your project using the following command:

			npm install next-auth
		

Next, create a new file named ‘auth.ts’ and configure your authentication settings:

			// auth.ts
			import NextAuth from 'next-auth';
			import Providers from 'next-auth/providers';

			export default NextAuth({
			  providers: [
			    Providers.Google({
			      clientId: process.env.GOOGLE_CLIENT_ID,
			      clientSecret: process.env.GOOGLE_CLIENT_SECRET
			    })
			  ],
			  callbacks: {
			    async session(session, user) {
			      // Add property to session
			      session.user.role = user.role;
			      return session;
			    }
			  }
			});
		

Protecting Dashboard Routes

Now that we have our authentication configuration in place, we can protect our dashboard routes using NextAuth middleware. In your dashboard route file, import the `getSession` function from NextAuth and use it to check if the user is authenticated:

			// dashboard.tsx

			import { getSession } from 'next-auth/client';

			export async function getServerSideProps(context) {
			  const session = await getSession(context);

			  if (!session) {
			    return {
			      redirect: {
			        destination: '/login',
			        permanent: false
			      }
			    };
			  }

			  return {
			    props: { }
			  };
			}

			function Dashboard() {
			  return (
			    // your dashboard component
			  );
			}

			export default Dashboard;
		

Conclusion

By using NextAuth middleware, we have successfully implemented route guarding to secure our data dashboard and allow access only to authenticated users. This provides a seamless and secure user experience while interacting with sensitive data. Feel free to explore additional features of NextAuth and customize your authentication and authorization logic for your specific requirements.