Next.js Authentication with Auth.js

Install Auth.js

npm install next-auth@beta

Auth.js v5 is the version that works with the App Router. Add the required environment variables:

# .env.local
AUTH_SECRET=your-secret-here
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

Generate a secret with:

npx auth secret

Create the Auth Config

Create auth.ts at your project root:

import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Google from 'next-auth/providers/google';

export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: [GitHub, Google],
    pages: {
        signIn: '/login'
    },
    callbacks: {
        async session({ session, token }) {
            if (token.sub) session.user.id = token.sub;
            return session;
        }
    }
});

Add the Route Handler

Create app/api/auth/[...nextauth]/route.ts:

import { handlers } from '@/auth';

export const { GET, POST } = handlers;

This single file handles every OAuth callback, sign-in, sign-out, and session endpoint.

Add Sign-In and Sign-Out Buttons

import { signIn, signOut } from '@/auth';

// Sign-in button (Server Component)
export function SignIn() {
    return (
        <form action={async () => {
            'use server';
            await signIn('github');
        }}>
            <button type="submit">Sign in with GitHub</button>
        </form>
    );
}

// Sign-out button
export function SignOut() {
    return (
        <form action={async () => {
            'use server';
            await signOut();
        }}>
            <button type="submit">Sign out</button>
        </form>
    );
}

Server Actions let you handle auth without writing client-side fetch calls.

Read the Session

In any Server Component:

import { auth } from '@/auth';

export default async function Dashboard() {
    const session = await auth();

    if (!session) {
        return <p>Not logged in</p>;
    }

    return <h1>Welcome, {session.user?.name}</h1>;
}

In a Client Component:

'use client';
import { useSession } from 'next-auth/react';

export function Profile() {
    const { data: session, status } = useSession();
    if (status === 'loading') return <p>Loading...</p>;
    if (!session) return <p>Not logged in</p>;
    return <p>{session.user?.email}</p>;
}

Protect Routes with Middleware

Create middleware.ts at your project root:

import { auth } from '@/auth';
import { NextResponse } from 'next/server';

export default auth((req) => {
    const isLoggedIn = !!req.auth;
    const isOnDashboard = req.nextUrl.pathname.startsWith('/dashboard');

    if (isOnDashboard && !isLoggedIn) {
        return NextResponse.redirect(new URL('/login', req.url));
    }
    return NextResponse.next();
});

export const config = {
    matcher: ['/dashboard/:path*', '/admin/:path*']
};

Wrap the Session Provider

For client-side useSession(), wrap your app in app/layout.tsx:

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

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