Auth0 React
为React SPA添加Auth0登录保护
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Auth0 React。 它的用途是：为React SPA添加Auth0登录保护 完整的 Skill 内容见：https://321skill.com/skills/auth0-react-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘给我的React SPA加Auth0登录，保护/dashboard和/profile路由’，它会自动安装`auth0-react` Skill，创建Auth0Provider，添加`useAuth`钩子，并在路由配置中插入`<ProtectedRoute>`组件，完成后还会提示你配置Auth0环境变量。
介绍
该Skill已废弃，建议使用auth0 Skill（运行npx clawhub install auth0）。它专为React单页应用（SPA）集成Auth0身份认证而设计，能快速实现登录、登出、受保护路由和用户会话管理。核心封装了@auth0/auth0-react库，即使开发者仅表达“给我的React应用加个登录”或“保护我的React路由”，无需明确提及Auth0，该Skill也能自动识别并执行正确配置。
使用方式极简：在支持Clawhub的编码环境中，直接运行npx clawhub install auth0-react（或按提示安装auth0 Skill）即可注入完整的认证模块。安装后，它会自动创建Auth0Provider包裹根组件，提供useAuth()钩子，并将登录/登出按钮、路由守卫、Token管理逻辑整合进项目，显著减少样板代码和配置错误。
适合正在开发React SPA的前端开发者、全栈开发者，以及需要快速为现有项目添加认证功能的团队。尤其适合那些对Auth0流程不熟悉、希望避免手动集成@auth0/auth0-react常见坑点（如回调URL配置、Token刷新时机）的开发者。
注意：该Skill已标记为废弃，推荐迁移至auth0泛用Skill以获取更全面的支持和更新。若已安装旧版，建议尽快通过npx clawhub install auth0替换。此外，该Skill仅处理React客户端的认证逻辑，不包含后端API权限验证或用户管理后台，需要配合后端Skill或Auth0 Dashboard完成完整认证体系。
核心特点
与通用Auth0集成方案相比，该Skill针对React SPA预置了`auth0-react`最佳实践，自动处理Provider包裹、路由守卫和会话状态同步，无需手动编写Context和钩子封装。
注意事项
不适用于非React框架（如Vue、Angular）或需要自定义认证UI的复杂场景，且已废弃建议迁移至`auth0` Skill。
常见问题
安装后怎么用？
安装后会在项目根组件自动注入Auth0Provider，你可以在任意组件中通过`useAuth()`获取`loginWithRedirect`、`logout`、`isAuthenticated`等方法，并直接使用`<ProtectedRoute>`组件包裹需要登录的路由。
和`auth0` Skill有什么区别？
`auth0` Skill是升级版，支持更多框架（Next.js、Vue等）和更灵活的配置，此Skill仅限React SPA且已停止维护，建议替换。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/auth0-react-x-6/raw/index.md 读取 Auth0 React 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/auth0-react-x-6/raw/index.md（查看排版版本）