Setting Up Credentials Provider with Next.js 15 & NextAuth.js v5 | Dev 11 | EzyCode

In this tutorial, we will cover how to set up Next.js 15 and NextAuth.js v5 to handle user authentication in your web applications. We will specifically focus on setting up a credentials provider using NextAuth.js for handling passwords and email-based authentication.

NextAuth.js is a flexible authentication library for Next.js applications that allows you to easily add authentication features like login, logout, and password recovery to your app. It supports various authentication providers such as email/password, OAuth, and more.

Let’s get started with setting up credentials provider in NextAuth.js:

Step 1: Create a new Next.js project
First, create a new Next.js project using the following command:

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

Navigate into the project directory:

cd my-next-auth-app

Step 2: Install NextAuth.js
Next, install NextAuth.js in your Next.js project:

npm install next-auth@v5 @next-auth/jwt

Step 3: Create a pages/api/auth/[…nextauth].js file
Next, create a new file called […nextauth].js inside the pages/api/auth directory. This file will be responsible for handling authentication requests:

// pages/api/auth/[...nextauth].js

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

const options = {
  providers: [
    Providers.Credentials({
      async authorize(credentials) {
        // Add your own authentication logic here
        const user = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };
        if (user.email === credentials.email && user.password === credentials.password) {
          return Promise.resolve(user);
        } else {
          return Promise.resolve(null);
        }
      },
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

export default (req, res) => NextAuth(req, res, options);

In this file, we are setting up a credentials provider using the Providers.Credentials method. Inside the authorize function, you can add your custom authentication logic. In this example, we are hardcoding a user object and checking if the provided email and password match.

Step 4: Configure authentication options
Next, you can configure additional options for authentication in the options object. For example, you can specify a JWT secret key for signing and encrypting tokens:

const options = {
  providers: [
    Providers.Credentials({
      async authorize(credentials) {
        // Add your own authentication logic here
      },
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

Step 5: Add a login button to your Next.js app
Finally, you can add a login button to your Next.js app to allow users to authenticate. For example, you can create a new component called LoginButton.js:

// components/LoginButton.js

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

const LoginButton = () => {
  const handleLogin = async () => {
    await signIn('credentials', { email, password, redirect: false });
  };

  return (
    <button onClick={handleLogin}>Login</button>
  );
};

export default LoginButton;

You can import and use the LoginButton component in any of your pages in the Next.js app.

That’s it! You have successfully set up a credentials provider using NextAuth.js in your Next.js app. You can now customize the authentication logic and add more features like password recovery, OAuth authentication, and more.

I hope this tutorial was helpful in getting you started with setting up credentials provider in NextAuth.js. Thank you for reading!