How to add authjs in Next.js app router?

To add authjs in nextjs app router, you can use the next-auth package. First, install it:

npm install next-auth

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

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,
    }),
  ],
  // Add more configuration options as needed
  callbacks: {
    async session(session, user) {
      // Add custom session properties here
      return session;
    },
  },
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
    error: "/auth/error", // Error page
  },
  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
  },
  events: {
    signIn: async (message) => {
      // Custom logic after sign-in
      console.log("User signed in:", message);
    },
  },
  debug: process.env.NODE_ENV === "development", // Enable debug mode in development
  theme: {
    colorScheme: "light", // Change to "dark" for dark mode
    brandColor: "#0000FF", // Custom brand color
    logo: "/logo.png", // Custom logo URL
  },
  pages: {
    signIn: "/auth/signin", // Custom sign-in page
    signOut: "/auth/signout", // Custom sign-out page
    error: "/auth/error", // Error page
    verifyRequest: "/auth/verify-request", // Verification request page
    newUser: null, // Will disable the new account creation screen
  },
});