Implement User Authentication in Next.js with Auth.js

Auth.js (formerly NextAuth.js) simplifies user authentication in Next.js applications by providing secure authentication, session management, and support for multiple authentication providers such as Google, GitHub, and Microsoft.

Supports multiple authentication providers, including Google, GitHub, and Microsoft.
Provides secure session management with minimal configuration.
Integrates seamlessly with the Next.js App Router for implementing authentication.

Steps to Add User Authentication in Next.js

Follow the steps below to set up user authentication in a Next.js application using Auth.js with Google as the authentication provider.

Step 1: Create a new Next.js application using the following command:

npx create-next-app@latest my-app

Step 2: Navigate to the project directory:

cd my-app

Step 3: Install Auth.js (NextAuth.js):

npm install next-auth

Step 4: Create OAuth credentials (Client ID and Client Secret) for your preferred authentication provider, such as Google, from the Google Cloud Console.

Step 5: Create a .env.local file

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
NEXTAUTH_SECRET=your_random_secret
NEXTAUTH_URL=http://localhost:3000

Step 6: Configure Auth.js

Create the file:

app/api/auth/[...nextauth]/route.js

Add the following code:

JavaScript

import NextAuth from "next-auth";
import Google from "next-auth/providers/google";

const handler = NextAuth({
    providers: [
        Google({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
});

export { handler as GET, handler as POST };

This configures Google as the authentication provider for your application.

Step 7: Add the SessionProvider

Create a providers.js file inside the app directory.

JavaScript

"use client";

import { SessionProvider } from "next-auth/react";

export default function Providers({ children }) {
    return (
        <SessionProvider>
            {children}
        </SessionProvider>
    );
}

Now update your app/layout.js file.

JavaScript

import Providers from "./providers";

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <Providers>{children}</Providers>
            </body>
        </html>
    );
}

The SessionProvider makes the authentication session available throughout the application.

Step 8: Add Sign In and Sign Out Buttons

Update your app/page.js file.

JavaScript

"use client";

import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
    const { data: session } = useSession();

    return (
        <div>
            <h1>GeeksforGeeks</h1>

            {session ? (
                <button onClick={() => signOut()}>
                    Sign Out
                </button>
            ) : (
                <button onClick={() => signIn("google")}>
                    Sign In with Google
                </button>
            )}
        </div>
    );
}

This example checks whether a user is authenticated. If a session exists, the Sign Out button is displayed; otherwise, the Sign In with Google button is shown.

Step 9: Run the application using the following command:

npm run dev

Implement User Authentication in Next.js with Auth.js

Steps to Add User Authentication in Next.js

Explore