Implementing Authentication in Next.js 14 with Auth.js: A Step-by-Step Guide

With the release of Next.js 14, integrating authentication into your application has become more streamlined, especially with the power of Auth.js (formerly NextAuth.js). This guide will walk you through setting up authentication using TypeScript, leveraging the latest features and best practices.

1. Setting Up the Project

First, ensure you have a Next.js 14 project initialized. If you haven't started one yet, you can create a new project:

npx create-next-app@latest my-next-app
cd my-next-app

Then, install the next-auth package:

npm install next-auth@beta

The @beta tag is essential here, as it ensures you are using the latest features of Auth.js compatible with Next.js 14.

2. Configuring Auth.js

Auth.js requires a configuration file where you'll define your authentication providers, session management, and callbacks. Create a file named auth.ts at the root of your project:

// auth.ts
import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";
import GoogleProvider from "next-auth/providers/google";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID!,
      clientSecret: process.env.GITHUB_CLIENT_SECRET!,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.AUTH_SECRET!,
});

This setup imports the necessary providers and configures them using environment variables. The secret is mandatory and should be securely stored in your .env.local file.

3. Setting Up API Routes

In Next.js 14, you'll place your API routes within the app directory, particularly under app/api/auth/[...nextauth]/route.ts:

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

import { handlers } from "@/auth";
export const { GET, POST } = handlers;

This file connects your Next.js app to Auth.js by exposing the necessary API routes for authentication.

4. Using Authentication in Your Components

With the configuration set up, you can now integrate authentication into your React components. For server-side rendering or API routes, use the auth() function:

// Example server component
import { auth } from "@/auth";

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

  return (
    <div>
      {session?.user ? (
        <p>Welcome, {session.user.name}!</p>
      ) : (
        <p>Please sign in.</p>
      )}
    </div>
  );
}

For client-side components, the useSession() hook remains the go-to approach:

"use client";

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

const ClientComponent = () => {
  const { data: session } = useSession();

  return (
    <div>
      {session ? (
        <>
          <p>Welcome, {session.user?.name}</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      ) : (
        <button onClick={() => signIn()}>Sign in</button>
      )}
    </div>
  );
};

5. Environment Variables

Ensure you have the necessary environment variables in your .env.local file:

GITHUB_CLIENT_ID=your-github-client-id
GITHUB_CLIENT_SECRET=your-github-client-secret
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
AUTH_SECRET=your-auth-secret

The AUTH_SECRET is critical for token encryption and should be generated using a secure method, such as the npx auth secret command.

6. Advanced Configuration

Auth.js also supports lazy initialization, which can be useful for dynamic provider configurations or request-specific settings. Here's how you can implement it:

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const { handlers, auth } = NextAuth((req) => {
  return {
    providers: [
      GitHubProvider({
        clientId: process.env.GITHUB_CLIENT_ID!,
        clientSecret: process.env.GITHUB_CLIENT_SECRET!,
      }),
    ],
  };
});

This setup allows you to modify the configuration based on the incoming request context, making your authentication logic more flexible.

Integrating authentication in a Next.js 14 application using Auth.js is straightforward and powerful. With the combination of TypeScript and modern Next.js features, you can build secure and scalable applications quickly.

For more detailed information, including additional providers and advanced use cases, refer to the Auth.js documentation and Next.js 14 docs.