Mahesh Waghmare

Developer Resources, Tips, Tricks, Tutorials and Much more.

Authentication in Next.js

Reading time
11 Minutes to Read
Published
Join the Conversation
Leave a Comment on Authentication in Next.js

Advertisement

Show Other References
11 Minutes to Read

? Dive into the world of web security with Next.js authentication.

Explore methods like local authentication, OAuth, and JWT to safeguard user data. Learn how to set up authentication in Next.js and ensure safe access for your users. ?

Authentication is an essential part of many web applications to ensure secure access and protect user data. Next.js provides a flexible framework for implementing authentication with various methods like local authentication, OAuth, and JWT.

In this article, we will explore the process of setting up authentication in Next.js. We will cover the following topics:

Setting Up a Next.js Project Setting Up a Next.js Project

Before we dive into authentication, let’s set up a basic Next.js project. Follow these steps:

  1. Install Node.js on your machine if you haven’t already.
  2. Open your terminal and navigate to the desired directory for your project.
  3. Run the following command to create a new Next.js project:
    npx create-next-app my-auth-app
  4. Change into the project directory:
    cd my-auth-app
  5. Start the development server:
    npm run dev
    This will launch your Next.js application at http://localhost:3000.

Top ↑

Server-side vs Client-side Authentication Server-side vs Client-side Authentication

Understanding the difference between server-side and client-side authentication is crucial in choosing the right approach for your Next.js application. Server-side authentication involves authenticating users on the server, while client-side authentication handles authentication entirely on the client side.

Top ↑

Implementing Local Authentication Implementing Local Authentication

Local authentication involves using a username and password to authenticate users. We’ll guide you through the steps of implementing user registration, login, and protecting routes with local authentication.

User Registration User Registration

To allow users to register for an account, follow these steps:

  1. Create a new folder called pages/api in your Next.js project.
  2. Inside the pages/api folder, create a file named register.js.
  3. In the register.js file, add the following code:
    import bcrypt from 'bcrypt';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  const { username, password } = req.body;

  const existingUser = await prisma.user.findUnique({
    where: {
      username,
    },
  });

  if (existingUser) {
    return res.status(409).json({ message: 'Username already exists' });
  }

  const hashedPassword = await bcrypt.hash(password, 10);

  const newUser = await prisma.user.create({
    data: {
      username,
      password: hashedPassword,
    },
  });

  res.status(201).json({ message: 'User registered successfully' });
}
  4. Save the file.
  5. In your registration form component, make a POST request to /api/register endpoint with the username and password as the request body.
  6. Handle the response to show appropriate messages to the user.

Top ↑

User Login User Login

To implement user login, follow these steps:

  1. Create a new folder called pages/api in your Next.js project.
  2. Inside the pages/api folder, create a file named login.js.
  3. In the login.js file, add the following code:
    import bcrypt from 'bcrypt';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).end();
  }

  const { username, password } = req.body;

  const user = await prisma.user.findUnique({
    where: {
      username,
    },
  });

  if (!user) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  const passwordMatch = await bcrypt.compare(password, user.password);

  if (!passwordMatch) {
    return res.status(401).json({ message: 'Invalid credentials' });
  }

  // Create a session or JWT token
  // Return appropriate response
}
  4. Save the file.
  5. In your login form component, make a POST request to /api/login endpoint with the username and password as the request body.
  6. Handle the authenticated response to set user session or JWT token for future authentication.

Top ↑

Protecting Routes Protecting Routes

To protect specific routes in your Next.js application, follow these steps:

  1. Create a new folder called lib in your Next.js project.
  2. Inside the lib folder, create a file named auth.js.
  3. In the auth.js file, add the following code:
    import { getSession } from 'next-auth/client';

export function withAuth(handler) {
  return async (req, res) => {
    const session = await getSession({ req });
   
    if (!session) {
      res.status(401).json({ message: 'Unauthorized' });
    } else {
      return handler(req, res);
    }
  };
}
  4. Save the file.
  5. In the page or API route that needs to be protected, import the withAuth function and wrap your handler with it:
    import { withAuth } from '../lib/auth';

export default withAuth(async function handler(req, res) {
  // Your protected route logic
});

Top ↑

Implementing OAuth Authentication Implementing OAuth Authentication

OAuth allows users to log in to your application using their existing social media or third-party accounts. We’ll walk you through the process of setting up OAuth providers, configuring OAuth in Next.js, and handling user authentication.

Top ↑

Setting Up OAuth Providers Setting Up OAuth Providers

Before implementing OAuth, you’ll need to set up OAuth providers such as Google, Facebook, or GitHub. Each provider has its own setup process. Here is an example of setting up Google as an OAuth provider:

  1. Go to the Google Developers Console and create a new project.
  2. Enable the necessary OAuth APIs.
  3. Create credentials and obtain the client ID and secret.
  4. Add redirect URIs for your Next.js application.
  5. Save the client ID and secret for later use.

Top ↑

Configuring OAuth with Next.js Configuring OAuth with Next.js

Next.js provides convenient methods for configuring OAuth authentication. Follow these steps to configure OAuth in your Next.js project:

  1. Install the necessary dependencies:
    npm install next-auth next-auth/providers
  2. Create a folder named pages/api/auth in your project.
  3. Inside the pages/api/auth folder, create a file named [...nextauth].js.
  4. In the [...nextauth].js file, add the following code:
    import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  // Configure additional NextAuth options
};

export default (req, res) => NextAuth(req, res, options);
    Replace process.env.GOOGLE_CLIENT_ID and process.env.GOOGLE_CLIENT_SECRET with your actual Google client ID and secret.
  5. Save the file.

Top ↑

User Authentication with OAuth User Authentication with OAuth

To authenticate users with OAuth, follow these steps:

  1. In your login page or component, add a button or link that triggers the OAuth authentication flow.
  2. Use the signIn method from the next-auth/client package to initiate the OAuth flow when the button or link is clicked.
  3. Handle the authentication response to set user session or JWT token for future authentication.

Top ↑

Implementing JWT Authentication Implementing JWT Authentication

JSON Web Tokens (JWT) provide a stateless mechanism for authentication. In this section, you’ll learn how to generate and verify JWT tokens, and how to protect routes using JWT authentication.

Top ↑

Generating and Verifying JWT Tokens Generating and Verifying JWT Tokens

To generate and verify JWT tokens in your Next.js application, follow these steps:

  1. Install the necessary dependencies:
    npm install jsonwebtoken
  2. Generate JWT tokens when a user successfully logs in and provide this token in the response.
  3. Verify JWT tokens when a user makes requests to protected routes. If the token is valid, allow access to the route; otherwise, return an unauthorized response.

Top ↑

Protecting Routes with JWT Authentication Protecting Routes with JWT Authentication

To protect specific routes in your Next.js application using JWT authentication, follow these steps:

  1. Create a new folder called lib in your Next.js project.
  2. Inside the lib folder, create a file named auth.js.
  3. In the auth.js file, add the following code:
    import jwt from 'jsonwebtoken';

export function withAuth(handler) {
  return async (req, res) => {
    const token = req.headers.authorization?.replace('Bearer ', '');

    if (!token) {
      res.status(401).json({ message: 'Unauthorized' });
    }

    try {
      const decoded = jwt.verify(token, process.env.JWT_SECRET);

      // Additional checks, if required

      return handler(req, res);
    } catch (error) {
      res.status(401).json({ message: 'Invalid token' });
    }
  };
}
    Replace process.env.JWT_SECRET with your actual JWT secret.
  4. Save the file.
  5. In the page or API route that needs to be protected, import the withAuth function and wrap your handler with it:
    import { withAuth } from '../lib/auth';

export default withAuth(async function handler(req, res) {
  // Your protected route logic
});

Top ↑

Conclusion Conclusion

In this article, we covered the fundamentals of authentication in Next.js. We explored local authentication, OAuth authentication, and JWT authentication. By following the step-by-step guide and code snippets, you should now be able to implement secure and reliable user authentication in your Next.js applications.

Keep practicing and experimenting with different authentication methods to enhance your skills. Remember to implement appropriate security measures and error handling to ensure the safety of user data.

Note: The content provided in this article is for educational purposes only and should not be used in production without appropriate security measures.

Leave a Reply