auth0-react by auth0/agent-skills
npx skills add https://github.com/auth0/agent-skills --skill auth0-react使用 @auth0/auth0-react 为 React 单页应用添加身份验证。
auth0-quickstart 技能auth0-nextjs 技能auth0-react-native 技能npm install @auth0/auth0-react
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
对于使用 Auth0 CLI 的自动化设置,请参阅设置指南获取完整脚本。
对于手动设置:
创建 .env 文件:
Vite:
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
Create React App:
REACT_APP_AUTH0_DOMAIN=your-tenant.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-client-id
更新 src/main.tsx (Vite) 或 src/index.tsx (CRA):
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Auth0Provider
domain={import.meta.env.VITE_AUTH0_DOMAIN} // 或 process.env.REACT_APP_AUTH0_DOMAIN
clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
authorizationParams={{
redirect_uri: window.location.origin
}}
>
<App />
</Auth0Provider>
</React.StrictMode>
);
import { useAuth0 } from '@auth0/auth0-react';
export function LoginButton() {
const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();
if (isLoading) return <div>加载中...</div>;
if (isAuthenticated) {
return (
<div>
<span>欢迎,{user?.name}</span>
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
登出
</button>
</div>
);
}
return <button onClick={() => loginWithRedirect()}>登录</button>;
}
启动开发服务器并测试登录流程:
npm run dev # Vite
# 或
npm start # CRA
| 错误 | 修复方法 |
|---|---|
| 忘记在 Auth0 仪表板中添加重定向 URI | 将你的应用程序 URL(例如 http://localhost:3000、https://app.example.com)添加到 Auth0 仪表板中的“允许的回调 URL” |
| 使用了错误的环境变量前缀 | Vite 使用 VITE_ 前缀,Create React App 使用 REACT_APP_ |
| 未处理加载状态 | 在渲染依赖于身份验证的 UI 之前,始终检查 isLoading |
| 将令牌存储在 localStorage 中 | 切勿手动存储令牌 - SDK 会自动处理安全存储 |
| 缺少 Auth0Provider 包装器 | 整个应用必须包裹在 <Auth0Provider> 中 |
| Provider 不在根级别 | Auth0Provider 必须包裹所有使用身份验证钩子的组件 |
| 环境变量的导入路径错误 | Vite 使用 import.meta.env.VITE_*,CRA 使用 process.env.REACT_APP_* |
auth0-quickstart - 基础 Auth0 设置auth0-migration - 从其他身份验证提供商迁移auth0-mfa - 添加多因素身份验证核心钩子:
useAuth0() - 主要的身份验证钩子isAuthenticated - 检查用户是否已登录user - 用户个人信息loginWithRedirect() - 发起登录logout() - 登出用户getAccessTokenSilently() - 获取用于 API 调用的访问令牌常见用例:
每周安装量
300
仓库
GitHub 星标
11
首次出现
2026年2月6日
安全审计
安装于
github-copilot288
codex287
opencode286
gemini-cli285
amp280
kimi-cli280
Add authentication to React single-page applications using @auth0/auth0-react.
auth0-quickstart skill firstauth0-nextjs skill for both App Router and Pages Routerauth0-react-native skill for iOS/Androidnpm install @auth0/auth0-react
For automated setup with Auth0 CLI , see Setup Guide for complete scripts.
For manual setup:
Create .env file:
Vite:
VITE_AUTH0_DOMAIN=your-tenant.auth0.com
VITE_AUTH0_CLIENT_ID=your-client-id
Create React App:
REACT_APP_AUTH0_DOMAIN=your-tenant.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-client-id
Update src/main.tsx (Vite) or src/index.tsx (CRA):
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Auth0Provider
domain={import.meta.env.VITE_AUTH0_DOMAIN} // or process.env.REACT_APP_AUTH0_DOMAIN
clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
authorizationParams={{
redirect_uri: window.location.origin
}}
>
<App />
</Auth0Provider>
</React.StrictMode>
);
import { useAuth0 } from '@auth0/auth0-react';
export function LoginButton() {
const { loginWithRedirect, logout, isAuthenticated, user, isLoading } = useAuth0();
if (isLoading) return <div>Loading...</div>;
if (isAuthenticated) {
return (
<div>
<span>Welcome, {user?.name}</span>
<button onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}>
Logout
</button>
</div>
);
}
return <button onClick={() => loginWithRedirect()}>Login</button>;
}
Start your dev server and test the login flow:
npm run dev # Vite
# or
npm start # CRA
| Mistake | Fix |
|---|---|
| Forgot to add redirect URI in Auth0 Dashboard | Add your application URL (e.g., http://localhost:3000, https://app.example.com) to Allowed Callback URLs in Auth0 Dashboard |
| Using wrong env var prefix | Vite uses VITE_ prefix, Create React App uses REACT_APP_ |
| Not handling loading state | Always check isLoading before rendering auth-dependent UI |
| Storing tokens in localStorage | Never manually store tokens - SDK handles secure storage automatically |
| Missing Auth0Provider wrapper | Entire app must be wrapped in <Auth0Provider> |
auth0-quickstart - Basic Auth0 setupauth0-migration - Migrate from another auth providerauth0-mfa - Add Multi-Factor AuthenticationCore Hooks:
useAuth0() - Main authentication hookisAuthenticated - Check if user is logged inuser - User profile informationloginWithRedirect() - Initiate loginlogout() - Log out usergetAccessTokenSilently() - Get access token for API callsCommon Use Cases:
Weekly Installs
300
Repository
GitHub Stars
11
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
github-copilot288
codex287
opencode286
gemini-cli285
amp280
kimi-cli280
OpenClaw技能安全审计指南:skill-vetter工具详解与安装前安全检查
11,900 周安装
| Provider not at root level | Auth0Provider must wrap all components that use auth hooks |
| Wrong import path for env vars | Vite uses import.meta.env.VITE_*, CRA uses process.env.REACT_APP_* |