How to add credentials in Next.js app router?

To add credentials in Next.js app router, you can use the next-auth package with the Credentials provider. First, install it:

npm install next-auth

Then, create a file named [...nextauth].js in the app/api/auth directory and configure your credentials provider.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        // Add your own logic to validate credentials here
        const user = { id: 1, name: "John Doe" }; // Example user

        if (
          credentials.username === "admin" &&
          credentials.password === "password"
        ) {
          return user; // Return user object if credentials are valid
        } else {
          return null; // Return null if credentials are invalid
        }
      },
    }),
  ],
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
  },
  callbacks: {
    async session(session, user) {
      session.user = user; // Add user object to session
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET, // Required for JWT encryption
  session: {
    jwt: true, // Use JWT for session management
  },
  jwt: {
    secret: process.env.NEXTAUTH_JWT_SECRET, // Required for JWT encryption
  },
});