技能 web-auth

📦

web-auth

内容修订 r1 安全 ⚙️ 外部命令🌐 网络访问🔑 环境变量

实现 React Web 身份验证

React 团队需要安全的身份验证流程，能够正确处理会话、重定向、OAuth 和令牌刷新。此技能为 Claude、Codex 和 Claude Code 提供在 Web 应用中构建这些流程的实用模式。

支持: Claude Codex Code(CC)

使用我的智能体安装

将此请求复制给你的智能体，其中包含权威 Skill 页面和清单。

智能体请求

Review the Skillstore skill "web-auth" from https://skillstore.io/skills/cjharmath-web-auth.md and its manifest at https://skillstore.io/api/skills/cjharmath-web-auth/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

你的智能体仍应展示其计划，并按安全策略请求必要确认。

Agent 可读资源

当 AI Agent、爬虫或脚本需要干净上下文，而不是读取完整页面时，请使用这些链接。

Markdown 详情 GET /skills/cjharmath-web-auth.md 已签名 manifest GET /api/skills/cjharmath-web-auth/manifest 已签名 lockfile GET /api/skills/cjharmath-web-auth/lockfile

测试它

正在使用“web-auth”。我需要在使用 Cookie 的 React 应用中实现登录和登出。

预期结果:

一份简洁的实施计划，包含 API 客户端、身份验证 provider、加载状态、登录表单连接和登出清理。

正在使用“web-auth”。我想向 Next.js 应用添加 Google 登录。

预期结果:

provider 设置指导、环境变量名称、回调行为、会话处理和仪表板保护步骤。

正在使用“web-auth”。检查我的身份验证流程是否存在常见安全缺口。

预期结果:

一份按优先级排序的审查，涵盖令牌存储、CSRF 标头、Cookie 设置、刷新重试、路由守卫和错误处理。

安全审计

安全

v7 • 2026/7/5 打开版本化报告

All static findings were reviewed against SKILL.md. The command alerts are Markdown code fences, and the network, environment, sensitive, and reconnaissance alerts are non-executed authentication examples. No prompt injection, malicious intent, or credential exfiltration evidence was found.

1

已扫描文件

566

分析行数

0

复核项

0

已忽略误报

最新一次完成的静态与语义审计未检测到已确认的安全发现。这并不能证明该 Skill 没有副作用。

审计者: codex 查看审计历史 →

分享与引用此报告

分享版本化评估报告、中性徽章、嵌入卡片和引用。Skillstore 只报告证据，不判断该 Skill 是否安全。

打开版本化报告

安全评估

复制报告链接

https://skillstore.io/skills/cjharmath-web-auth/audits/7?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 徽章

[![Skillstore security assessment](https://skillstore.io/badges/skills/cjharmath-web-auth/security.svg)](https://skillstore.io/skills/cjharmath-web-auth?utm_source=security_passport_badge)

HTML 徽章

<a href="https://skillstore.io/skills/cjharmath-web-auth?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-web-auth/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

嵌入卡片

<iframe src="https://skillstore.io/embed/skills/cjharmath-web-auth.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

学术引用 (APA · BibTeX · CFF)

APA 引用

CJHarmath. (2026). web-auth security audit report (audit version 7) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-web-auth/audits/7

BibTeX 引用

@techreport{cjharmath-cjharmath-web-auth-2026,
  author = {CJHarmath},
  title = {web-auth security audit report (audit version 7)},
  institution = {Skillstore},
  year = {2026},
  number = {7},
  url = {https://skillstore.io/skills/cjharmath-web-auth/audits/7},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "web-auth security audit report (audit version 7)"
version: "unspecified"
type: report
authors:
  - name: "CJHarmath"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/cjharmath-web-auth/audits/7"
identifiers:
  - type: other
    value: "skillstore:cjharmath-web-auth:audit:7"
    description: "Skillstore immutable audit report identifier"

Skillstore 评分

评分依据证据置信度: 高

55

架构

85

可维护性

87

内容

71

社区

78

规范符合性

你能构建什么

向 React 应用添加登录

创建包含 Cookie 支持的会话、当前用户加载和登出行为的登录流程。

在 Next.js 中配置 OAuth

设置 Google OAuth 或 NextAuth.js，并在组件中使用 provider 回调和会话访问。

强化身份验证 UX

添加受保护路由、令牌刷新、表单验证、CSRF 标头和安全响应标头。

试试这些提示

创建基础身份验证上下文

使用 web-auth 技能创建一个 React 身份验证上下文，用于登录、登出、当前用户加载和受保护路由检查。

构建 Cookie 会话流程

使用 web-auth 技能为我的 React 应用和 API 设计基于 Cookie 的登录、登出和刷新流程。

向 Next.js 添加 OAuth

使用 web-auth 技能通过 NextAuth.js、回调和受保护的仪表板页面向 Next.js 应用添加 Google OAuth。

审查身份验证安全性

使用 web-auth 技能审查我的 React 身份验证流程，包括令牌存储、CSRF 处理、路由保护和刷新行为。

最佳实践

当后端支持时，优先为长期会话令牌使用 httpOnly 安全 Cookie。
将 Cookie 身份验证与 CSRF 保护和请求中的显式凭据处理配合使用。
当框架支持服务器检查时，同时在客户端和服务器端保护路由。

避免

不要在未接受 XSS 暴露风险的情况下，将长期访问令牌存储在 localStorage 中。
不要将客户端路由守卫作为唯一的授权控制。
不要在浏览器代码或公共环境变量中暴露 OAuth 客户端密钥。

常见问题

此技能是否实现完整的身份验证服务？

不会。它提供可根据你的后端、数据库和身份提供商进行调整的模式和示例。

它涵盖哪些 React 框架？

它涵盖纯 React 模式、React Router、Next.js App Router 和 NextAuth.js 示例。

它是否推荐将 localStorage 用于令牌？

它将 localStorage 列为一个选项，但明确标记其无法抵御 XSS，因而不安全。

Claude Code 或 Codex 能否用它进行实现？

可以。这些示例的结构便于 Claude Code 和 Codex 将其调整到项目文件中。

它是否处理后端身份验证？

它包含一个 FastAPI 参考示例，但后端验证和持久化仍取决于具体项目。

生产环境前我应配置什么？

审查 Cookie 标志、TLS、CORS、CSRF 保护、OAuth 重定向、密钥存储和服务器端授权。

开发者详情

作者

许可证

MIT

Skillstore 修订

r1

版本提示

作者未声明版本。

仓库

https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/web-auth

引用

02f077c174c5335e2f5d02ca15e77b70d9543e58

维护新鲜度

2026/7/22

使用量

6 次下载 · 257 次浏览

文件结构

CJHarmath 的更多技能

rn-performance

优化 React Native 性能

React Native 应用可能会遇到列表滚动缓慢、额外渲染以及 JS 线程卡顿等问题。此 skill 提供聚焦的模式，用于更快的 FlatList 屏幕、记忆化组件、优化后的选择器、缓存图片以及性能分析。

编码与开发查看

react-zustand-patterns

改进 React Zustand Store 模式

React 团队在使用 Zustand 时可能会遇到过期状态、渲染时序和异步 action bug。此技能为 store、selector、派生状态、测试、调试和持久化提供直接可用的模式。

编码与开发查看

web-build-deploy

可靠部署 React 应用

React 部署设置可能重复且容易出错。此技能为 Vercel、Netlify、Docker、CI/CD、环境和监控提供实用示例。

DevOps 与基础设施查看

rn-styling

应用 React Native 样式模式

React Native 样式在不同主题、屏幕和平台之间可能变得不一致。此技能为 Expo 应用提供实用的 NativeWind 和 BrandColors 模式。

编码与开发查看

rn-observability

改进 React Native 可观测性

静默失败和薄弱的错误消息会让移动端 bug 难以诊断。此技能提供实用的 React Native 模式，用于日志、错误、追踪和安全上报。

编码与开发查看

rn-zustand-patterns

构建可靠的 React Native Zustand Store

React Native 团队经常在陈旧状态、异步 action 时序以及可避免的渲染上浪费时间。此技能提供 Zustand 模式，让 store 行为更易于推理、测试和调试。

编码与开发查看

senior-secops

自动化 SecOps 检查

由 alirezarezvani

安全团队需要在不同项目中保持一致的审查工作流。此技能提供 SecOps CLI 脚手架和参考指南，用于可重复的检查。

安全与合规查看

security-analyzer

分析项目安全风险

由 Cornjebus

当依赖项、容器和 IaC 数据分散在整个仓库中时，安全审查会很慢。此技能会清点资产、检查 OSV.dev，并起草按优先级排序的修复报告。

安全与合规查看

clerk-auth

安全地实现 Clerk 身份验证

由 sickn33

Clerk 设置在中间件、服务器组件、组织和 webhook 中都容易出错。此技能为安全的 Next.js 身份验证流程提供有针对性的实现指导。

安全与合规查看

auth-handler

保护 Next.js 认证路由

由 AayushBaniya2006

当团队混用 session API 和路由守卫时，认证变更经常会失败。此技能会引导 Claude、Codex 和 Claude Code 使用项目辅助函数来实现安全的访问控制。

安全与合规查看

senior-backend

构建可靠的后端 API

由 alirezarezvani

后端项目通常需要在 API、数据库、安全和部署方面保持一致的规划。此技能通过简单的辅助脚本和参考资料，为 Claude、Codex 和 Claude Code 提供结构化的后端指导。

编码与开发查看

senior-fullstack

在资深指导下构建全栈应用

由 alirezarezvani

全栈项目通常需要一致的设置、架构选择和质量检查。此技能为 React、Next.js、Node.js、GraphQL 和 PostgreSQL 工作提供脚本与参考资料。

编码与开发查看