mcpField
A
adding-auth

adding-auth

github.com/spencerpauly开发868384 次安装13 周前更新
代码仓库

关于 adding-auth

指导编码 Agent 为 Next.js 应用添加 Auth.js 身份验证，涵盖依赖安装、提供方配置和路由保护，也介绍用于持久化会话或用户记录的可选数据库适配器。

主要功能

  1. 01安装并配置 Auth.js
  2. 02设置 GitHub 和 Google 提供方
  3. 03创建身份验证路由处理器
  4. 04添加登录和登出界面
  5. 05通过会话检查保护路由
  6. 06配置可选数据库适配器

适用场景

  1. 01为 Next.js 应用添加登录和注册
  2. 02启用 GitHub 或 Google OAuth
  3. 03限制只有已验证会话才能访问页面
  4. 04通过适配器持久化会话或用户记录

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill adding-auth

安装后在 Claude Code 中输入/adding-auth确认已加载。

详细介绍

添加身份验证（Auth.js）

当用户要求添加身份验证、登录、注册、OAuth 或会话管理时，使用此技能。

步骤

  1. 安装依赖项

    npm install next-auth@beta

  2. 生成身份验证密钥

    npx auth secret

    这会将 AUTH_SECRET 添加到 .env.local。

  3. 创建身份验证配置 — 在项目根目录中创建 auth.ts：

    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],
});

  4. 添加路由处理程序 — 创建 app/api/auth/[...nextauth]/route.ts：

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

  5. 为每个提供商添加环境变量：

    AUTH_SECRET=...
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...

  6. 添加登录/登出界面 — 创建调用 signIn 和 signOut 服务端操作的组件，或使用 <Link href="/api/auth/signin">。

  7. 保护路由 — 在服务端组件或中间件中使用 auth() 函数：

    import { auth } from "@/auth";

export default async function ProtectedPage() {
  const session = await auth();
  if (!session) redirect("/api/auth/signin");
  return <div>Welcome {session.user?.name}</div>;
}

  8. 添加数据库适配器（可选） — 如果用户需要持久化会话或用户记录，请安装数据库适配器（例如 @auth/drizzle-adapter、@auth/prisma-adapter），并在身份验证配置中进行配置。

注意事项

  • Auth.js v5 原生支持 Next.js App Router 和 Server Actions。
  • 对于 Pages Router，请在 getServerSideProps 中使用 getServerSession，并在客户端使用 useSession。
  • 为生产部署添加 NEXTAUTH_URL。
  • 在会话中仅存储最少的用户数据；需要时从数据库获取完整资料。

评论

支持 Markdown