Auth.js

The open-source authentication library for modern web apps, formerly known as NextAuth.js. Auth.js handles OAuth 2.0, OIDC, Credentials, Email magic links, and WebAuthn passkeys — with 80+ built-in providers, database adapters for all major ORMs, and Edge Runtime support.

What is Auth.js?

Auth.js (v5, beta) is the rewrite of NextAuth.js — the most popular authentication library for Next.js with over 24,000 GitHub stars. It abstracts the complexity of OAuth 2.0 flows, CSRF tokens, session cookies, and token refresh cycles behind a clean API. The v5 rewrite adds a universal config file at the project root, full Edge Runtime compatibility (runs on Vercel Edge and Cloudflare Workers), and first-class support for the Next.js App Router.

Auth.js is not just for OAuth. The Credentials provider handles traditional email/password login, the Email provider sends magic links for passwordless authentication, and the Passkey provider uses WebAuthn for biometric/hardware key login. All providers work with the same session and adapter API.

Installation

# Install Auth.js (Next.js)
npm install next-auth@beta

# .env.local
AUTH_SECRET=your-32-char-secret-here  # openssl rand -hex 32
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret

Auth.js v5 Configuration

// auth.ts — Auth.js v5 configuration
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Google from 'next-auth/providers/google';
import Credentials from 'next-auth/providers/credentials';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from './lib/prisma';
import bcrypt from 'bcryptjs';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GitHub,
    Google,
    Credentials({
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        const user = await prisma.user.findUnique({
          where: { email: credentials.email as string },
        });
        if (!user?.passwordHash) return null;
        const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
        return valid ? user : null;
      },
    }),
  ],
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) return isLoggedIn;
      return true;
    },
    session({ session, user }) {
      session.user.id = user.id;
      return session;
    },
  },
  pages: {
    signIn: '/auth/signin',
    error: '/auth/error',
  },
});

Route Handler + Middleware

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;

// middleware.ts — protect routes
export { auth as middleware } from '@/auth';
export const config = {
  matcher: ['/dashboard/:path*', '/api/protected/:path*'],
};

Server + Client Components

// Server Component — access session
import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await auth();
  if (!session) redirect('/auth/signin');
  return 
Hello, {session.user?.name}
;
}

// Client Component
'use client';
import { useSession, signIn, signOut } from 'next-auth/react';

export function AuthButton() {
  const { data: session, status } = useSession();
  if (status === 'loading') return Loading...;
  if (session) return (
     signOut()}>Sign out ({session.user?.email})
  );
  return  signIn('github')}>Sign in with GitHub;
}