React Academy · 课时

在 Next.js App Router 中设置 Auth.js

Q: 「在 Next.js App Router 中设置 Auth.js」这节课中我会学到什么？

安装 Auth.js，配置路由处理程序，并添加 GitHub OAuth 提供商。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安装 Auth.js，配置路由处理程序，并添加 GitHub OAuth 提供商。

在 Next.js App Router 中设置 Auth.js 是 CoddyKit 上的免费 React Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是 Auth.js

Auth.js（原名 NextAuth.js v5）是一个功能完整的 Next.js 身份验证库。它开箱即用地处理 OAuth 提供商、凭据、会话和 JWT。

安装

安装 Auth.js beta 版本，并初始化配置文件。

npm install next-auth@beta

# Create auth.ts at project root
touch auth.ts

创建身份验证配置

在项目根目录的 auth.ts 中定义身份验证配置，并设置提供商和回调函数。

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

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    session({ session, token }) {
      session.user.id = token.sub!;
      return session;
    },
  },
});

设置路由处理程序

在 app/api/auth/[...nextauth]/route.ts 中创建一个全匹配路由处理程序，将请求交给 Auth.js 处理程序。

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';

export const { GET, POST } = handlers;

环境变量

为 OAuth 提供商设置所需的环境变量。JWT 签名必须使用 AUTH_SECRET。

# .env.local
AUTH_SECRET=your-random-secret-here

# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret

# Generate AUTH_SECRET:
# npx auth secret

添加登录和退出按钮

从 auth.ts 导入 signIn 和 signOut，并在服务器组件表单中使用它们。

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

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

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

在服务器组件中读取会话

在任意服务器组件或路由处理程序中从 auth.ts 调用 auth()，即可获取当前会话。

import { auth } from '@/auth';

export default async function ProfilePage() {
  const session = await auth();
  if (!session) redirect('/login');
  return <h1>Welcome, {session.user?.name}</h1>;
}

使用中间件保护页面

使用 Auth.js 中间件在边缘运行时保护路由，无需在每次请求中运行服务器逻辑。

// middleware.ts
export { auth as middleware } from '@/auth';

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

数据库会话

添加数据库适配器（例如 @auth/prisma-adapter），即可将会话、用户和账户持久化到数据库中，而不是使用 JWT。

import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';

export const { handlers, auth, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub],
  session: { strategy: 'database' },
});

自定义会话类型

扩展 Auth.js 的会话类型，以加入用户 ID 或角色等自定义字段。

// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';

declare module 'next-auth' {
  interface Session {
    user: { id: string; role: string } & DefaultSession['user'];
  }
}

错误处理

默认情况下，Auth.js 会在身份验证失败时重定向到 /error。创建 app/error/page.tsx 即可自定义错误页面。

快速检查

在 Next.js App Router 中，必须创建哪个文件才能公开 Auth.js 的 GET 和 POST 处理程序？

回顾

安装 next-auth@beta，创建包含提供商和回调函数的 auth.ts，在 app/api/auth/[...nextauth]/route.ts 中公开处理程序，设置 AUTH_SECRET 和提供商环境变量，并在服务器组件中使用 auth() 读取会话。

常见问题解答

「在 Next.js App Router 中设置 Auth.js」课时是免费的吗？

是的 — 「在 Next.js App Router 中设置 Auth.js」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「在 Next.js App Router 中设置 Auth.js」这节课中我会学到什么？

安装 Auth.js，配置路由处理程序，并添加 GitHub OAuth 提供商。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「在 Next.js App Router 中设置 Auth.js」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy