Implementing Authentication and Authorization in a Next.js Application

As web applications become increasingly sophisticated and the need for secure user interactions grows, implementing a robust authentication and authorization system is crucial. Next.js, a powerful framework built on React, allows developers to build server-rendered applications effortlessly. This article will guide you through implementing authentication and authorization in your Next.js application, ensuring a secure and efficient user experience.

What are Authentication and Authorization?

Before diving into the implementation, let’s clarify the terms:

• Authentication is the process of verifying who a user is. For instance, logging in requires users to provide credentials, such as email and password.
• Authorization determines what an authenticated user can do. Once logged in, users may have different permissions based on their roles — for example, a regular user versus an administrator.

Tools and Technologies

We will leverage several tools to implement our authentication and authorization system effectively:

• NextAuth.js: A complete open-source authentication solution for Next.js applications, offering multiple authentication providers.
• JWT (JSON Web Token): A compact way to securely transmit information between parties as a JSON object, widely used for authorization.
• Database: We’ll use some form of a database to store user details and roles. This guide assumes you use MongoDB for its flexibility and ease of integration.

Setting Up Your Next.js Project

Begin by creating your Next.js application. If you haven’t set it up yet, execute the following command:

npx create-next-app@latest my-auth-app

Navigate to the project folder:

cd my-auth-app

Now, install the necessary dependencies:

npm install next-auth mongoose

Configuring MongoDB

Next, set up your MongoDB database. Create a new database instance and note down the connection string. For this tutorial, we will be using the native MongoDB driver with Mongoose.

Connecting to MongoDB

Create a lib/mongodb.js file for connecting to your MongoDB database:

import mongoose from 'mongoose';

const connection = {}; // to maintain a global connection

async function connectDB() {
  if (connection.isConnected) {
    return; // already connected
  }

  const db = await mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  });

  connection.isConnected = db.connections[0].readyState;
}

export default connectDB;

Update your .env.local file with your MongoDB connection string:

MONGODB_URI=mongodb://yourUser:[email protected]/mydbname?retryWrites=true&w=majority

Setting Up NextAuth.js

Create a new file pages/api/auth/[…nextauth].js to manage authentication routes:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import connectDB from '../../../lib/mongodb';
import User from '../../../models/User'; // This is where your user model will be.

export default NextAuth({
  providers: [
    Providers.Credentials({
      // The name to display on the sign-in form
      name: 'Credentials',
      credentials: {
        email: { label: "Email", type: "text", placeholder: "[email protected]" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        await connectDB(); // connect to MongoDB
        const user = await User.findOne({ email: credentials.email });
        
        if (user && user.password === credentials.password) {
          return user; // Return user object on success
        }
        throw new Error('Invalid credentials');
      }
    }),
  ],
  session: {
    jwt: true, // use JSON Web Tokens instead of the default database sessions
  },
  callbacks: {
    async jwt(token, user) {
      if (user) {
        token.id = user._id; // add user ID to token
      }
      return token;
    },
    async session(session, token) {
      session.user.id = token.id; // make id available in session
      return session;
    }
  }
});

Creating a User Model

Define a user schema in models/User.js:

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, default: 'user' } // Add role for authorization
});

export default mongoose.models.User || mongoose.model('User', UserSchema);

User Registration and Login Pages

Create simple registration and login forms to test authentication features.

Registration Form

Create a new file pages/register.js for user registration:

import { useState } from 'react';
import axios from 'axios';

export default function Register() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const registerUser = async (e) => {
    e.preventDefault();
    await axios.post('/api/auth/register', { email, password });
  };

  return (
    <form onSubmit={registerUser}>
      <input type="text" placeholder="Email" onChange={(e) => setEmail(e.target.value)} required />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} required />
      <button type="submit">Register</button>
    </form>
  );
}

Login Form

Now, create a new file pages/login.js for user login:

import { signIn } from 'next-auth/react';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const loginUser = async (e) => {
    e.preventDefault();
    await signIn('credentials', { email, password });
  };

  return (
    <form onSubmit={loginUser}>
      <input type="text" placeholder="Email" onChange={(e) => setEmail(e.target.value)} required />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} required />
      <button type="submit">Login</button>
    </form>
  );
}

Authorization: Role-Based Access Control

After authenticating users, you can control their access based on roles using middleware or conditional rendering. Let’s explore how you can implement basic role-based access control (RBAC).

Protecting Routes

Create a higher-order component (HOC) to protect certain routes based on user roles:

import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';

const withAuth = (WrappedComponent, allowedRoles) => {
  return (props) => {
    const { data: session, status } = useSession();
    const router = useRouter();

    if (status === 'loading') {
      return <div>Loading...</div>;
    }

    if (status === 'unauthenticated' || !allowedRoles.includes(session.user.role)) {
      router.push('/login');
      return null;
    }

    return <WrappedComponent {...props} />;
  }
};

export default withAuth;

Using the Protected Route

Use the HOC to protect a page by user role:

import withAuth from '../components/withAuth'; // adjust path as necessary

const AdminDashboard = () => {
  return <div>Welcome to the Admin Dashboard</div>;
};

export default withAuth(AdminDashboard, ['admin']); // Only admin users can access

Conclusion

In this article, we’ve explored the essential concepts of authentication and authorization, implementing them in a Next.js application using NextAuth.js and MongoDB. Implementing such mechanisms not only secures your application but also enhances the user experience by personalizing features based on roles.

As you continue developing your application, consider expanding on this foundation by implementing features like password hashing, email verification, and user profile management. By enhancing user security and accessibility, you build a robust and reliable web application.

We hope this guide has provided you with practical insights into building secure applications with Next.js. Happy coding!