Communitygithub.com

Next.js 身份验证 (Auth.js v5)

用于在 Next.js 中添加身份验证功能 — Auth.js/NextAuth 凭证或 OAuth、中间件路由保护、RSC 和服务端操作中的会话访问、角色检查。

Next.js 身份验证 (Auth.js v5) 是什么?

此技能专为 Next.js 开发者设计,旨在高效集成 Auth.js v5(原 NextAuth.js)身份验证系统。它提供了从集中式配置到路由保护、会话读取和角色权限控制的全套最佳实践。 核心价值在于强制安全准则:通过 `auth.ts` 集中管理凭证并禁止暴露密钥,使用边缘兼容的 `auth` 中间件保护路由,同时强调中间件仅用于用户体验,真正的授权检查必须在服务端操作中二次确认。技能支持多种身份提供者(如 GitHub OAuth),并清晰区分了服务端组件(`await auth()`)和客户端组件(`useSession()` + `SessionProvider`)的会话读取方式。 此外,它涵盖了通过模块扩充(`next-auth.d.ts`)扩展用户角色类型、使用 Zod 在启动时验证环境变量等高级实践。配合完整的代码示例和检查清单,开发者可以快速为 Next.js 应用建立安全、可维护的身份验证体系。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/sakilanwar12/nextjs-typescript-skills/tree/HEAD/skills/nextjs-auth

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Next.js 身份验证 (Auth.js v5) 是做什么的?

规则

  1. 在 auth.ts 中集中配置(NextAuth() 导出:handlers、auth、signIn、signOut)。切勿分散提供者密钥。
  2. 在 middleware.ts 中保护路由(使用边缘安全的 auth 包装器),并在服务端操作/变更中重新检查会话 —— 中间件是用户体验,而非授权。
  3. 在服务端组件中通过 await auth() 读取会话。在客户端组件中使用来自 next-auth/react 的 useSession(),并配合 <SessionProvider>。
  4. 切勿使用 NEXT_PUBLIC_ 前缀暴露密钥(AUTH_SECRET、提供者密钥)。在启动时使用 Zod 验证环境变量。
  5. 角色检查:通过模块扩充扩展会话类型(user.role),在服务端强制执行。

模式

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

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [GitHub],
  callbacks: {
    async session({ session, token }) {
      if (session.user) (session.user as { role?: string }).role = token.role as string;
      return session;
    },
    async jwt({ token, user }) {
      if (user) token.role = (user as { role?: string }).role ?? 'user';
      return token;
    },
  },
});

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

// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;
// 服务端组件门卫
import { auth } from '@/auth';
import { redirect } from 'next/navigation';

export default async function AdminPage() {
  const session = await auth();
  if (!session?.user) redirect('/login');
  if ((session.user as { role?: string }).role !== 'admin')
    redirect('/dashboard');
  return <AdminView />;
}
// types/next-auth.d.ts — 角色扩充
import 'next-auth';
declare module 'next-auth' {
  interface User { role?: string }
}

检查清单

  • middleware.ts 中的匹配器是否覆盖了受保护路径?
  • 在操作/变更中是否重新检查了会话?
  • 是否没有密钥在客户端暴露?
  • 角色是否在服务端强制执行,而不仅仅是隐藏 UI?
  • 是否处理了登出和会话过期?

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

相关技能