Auth0 React 身份验证集成：为 React SPA 快速添加安全登录

auth0-react by auth0/agent-skills

412 周安装量

13 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/auth0/agent-skills --skill auth0-react

JavaScript 框架 API 安全

🇨🇳中文介绍

Auth0 React 集成

使用 @auth0/auth0-react 为 React 单页应用添加身份验证。

前提条件

React 16.11+ 应用程序（Vite 或 Create React App）- 支持 React 16、17、18 和 19
已配置的 Auth0 账户和应用程序
如果尚未设置 Auth0，请先使用 auth0-quickstart 技能

何时不应使用

Next.js 应用程序 - 对于 App Router 和 Pages Router，请使用 auth0-nextjs 技能
React Native 移动应用 - 对于 iOS/Android，请使用 auth0-react-native 技能
服务端渲染的 React - 使用特定框架的 SDK（Next.js、Remix 等）
嵌入式登录 - 此 SDK 使用 Auth0 通用登录（基于重定向）
后端 API 身份验证 - 请改用 express-openid-connect 或 JWT 验证

快速开始工作流

1. 安装 SDK

npm install @auth0/auth0-react

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

3. 使用 Auth0Provider 包装应用

更新 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>
);

4. 添加身份验证界面

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>;
}

5. 测试身份验证

启动开发服务器并测试登录流程：

npm run dev  # Vite
# 或
npm start    # CRA

设置指南 - 自动化设置脚本（Bash/PowerShell）、CLI 命令、手动配置
集成指南 - 受保护路由、API 调用、错误处理、高级模式
API 参考 - 完整的 SDK API、配置选项、钩子参考、测试策略

错误	修复方法
忘记在 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 调用的访问令牌

登录/登出按钮 → 参见上面的第 4 步
受保护的路由 → 集成指南
使用令牌进行 API 调用 → 集成指南
错误处理 → 集成指南

🇺🇸English

Auth0 React Integration

Add authentication to React single-page applications using @auth0/auth0-react.

Prerequisites

React 16.11+ application (Vite or Create React App) - supports React 16, 17, 18, and 19
Auth0 account and application configured
If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

Next.js applications - Use auth0-nextjs skill for both App Router and Pages Router
React Native mobile apps - Use auth0-react-native skill for iOS/Android
Server-side rendered React - Use framework-specific SDK (Next.js, Remix, etc.)
Embedded login - This SDK uses Auth0 Universal Login (redirect-based)
Backend API authentication - Use express-openid-connect or JWT validation instead

Quick Start Workflow

1. Install SDK

npm install @auth0/auth0-react

2. Configure Environment

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

3. Wrap App with Auth0Provider

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>
);

4. Add Authentication UI

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>;
}

5. Test Authentication

Start your dev server and test the login flow:

npm run dev  # Vite
# or
npm start    # CRA

Detailed Documentation

Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration
Integration Guide - Protected routes, API calls, error handling, advanced patterns
API Reference - Complete SDK API, configuration options, hooks reference, testing strategies

Common Mistakes

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>`

Related Skills

auth0-quickstart - Basic Auth0 setup
auth0-migration - Migrate from another auth provider
auth0-mfa - Add Multi-Factor Authentication

Quick Reference

Core Hooks:

useAuth0() - Main authentication hook
isAuthenticated - Check if user is logged in
user - User profile information
loginWithRedirect() - Initiate login
logout() - Log out user
getAccessTokenSilently() - Get access token for API calls

Common Use Cases:

Login/Logout buttons → See Step 4 above
Protected routes → Integration Guide
API calls with tokens → Integration Guide
Error handling → Integration Guide

References

Weekly Installs

300

Repository

auth0/agent-skills

GitHub Stars

First Seen

Feb 6, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykWarn

Installed on

github-copilot288

codex287

opencode286

gemini-cli285

amp280

kimi-cli280

OpenClaw技能安全审计指南：skill-vetter工具详解与安装前安全检查

11,900 周安装