Auth0 React Native 集成

使用 react-native-auth0 为 React Native 和 Expo 移动应用添加身份认证功能。

前提条件

• React Native 或 Expo 应用
• 已配置为 Native 类型的 Auth0 账户与应用
• 若尚未配置 Auth0，请先使用 auth0-quickstart 技能完成基础设置

不适用场景

• Expo 托管工作流（Managed Workflow） —— 对于使用配置插件（config plugin）的 Expo 应用，请使用 auth0-expo 技能
• React Web 应用 —— 对于单页应用（SPA，如基于 Vite 或 CRA 构建），请使用 auth0-react 技能
• React 服务端组件（Server Components） —— 对于 Next.js 应用，请使用 auth0-nextjs 技能
• 非 React 原生应用 —— 请使用平台专属 SDK（iOS 使用 Swift，Android 使用 Kotlin）
• 后端 API —— 请使用对应服务端语言的 JWT 校验库

快速入门流程

1. 安装 SDK

Expo：

npx expo install react-native-auth0

React Native CLI：

npm install react-native-auth0
npx pod-install  # 仅 iOS 需要

2. 配置环境变量

如需通过 Auth0 CLI 自动化配置，请参阅《Setup Guide》获取完整脚本。

如需手动配置：

创建 .env 文件：

AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id

3. 配置原生平台

iOS —— 修改 ios/{YourApp}/Info.plist：

CFBundleURLTypes

  
    CFBundleTypeRole
    None
    CFBundleURLName
    auth0
    CFBundleURLSchemes
    
      $(PRODUCT_BUNDLE_IDENTIFIER).auth0
    
  

Android —— 修改 android/app/src/main/AndroidManifest.xml：

Expo —— 修改 app.json：

{
  "expo": {
    "scheme": "your-app-scheme",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

4. 使用 Auth0Provider 添加认证

用 Auth0Provider 包裹主应用组件：

import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';

export default function Root() {
  return (
    
      
    
  );
}

5. 使用 useAuth0 Hook

import React from 'react';
import { View, Button, Text, ActivityIndicator } from 'react-native';
import { useAuth0 } from 'react-native-auth0';

export default function App() {
  const { user, authorize, clearSession, isLoading } = useAuth0();

  const login = async () => {
    try {
      await authorize({
        scope: 'openid profile email'
      });
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  const logout = async () => {
    try {
      await clearSession();
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  if (isLoading) {
    return ;
  }

  return (
    
      {user ? (
        <>
          Welcome, {user.name}!
          {user.email}
          
        
      ) : (
        
      )}
    
  );
}

6. 测试认证功能

Expo：

npx expo start

React Native：

npx react-native run-ios
# 或
npx react-native run-android

详细文档

• Setup Guide（配置指南） —— 自动化配置、原生平台配置、深度链接（Deep Linking）设置
• Patterns Guide（最佳实践指南） —— 安全存储、生物识别认证、令牌刷新等模式
• API Reference（API 参考） —— SDK 完整 API 列表、方法说明及配置选项

常见错误

相关技能

• auth0-quickstart —— Auth0 基础配置
• auth0-migration —— 从其他认证服务商迁移
• auth0-mfa —— 添加多因素认证（MFA）
• auth0-cli —— 通过终端管理 Auth0 资源

速查参考

核心 Hook API：

• useAuth0() —— 主认证 Hook
• authorize() —— 启动登录流程
• clearSession() —— 注销用户
• user —— 用户资料对象
• getCredentials() —— 获取用于 API 请求的访问令牌
• isLoading —— 认证加载状态

常见使用场景：

• 登录 / 注销 → 参见上方第 5 步
• 安全令牌存储 → 由 Auth0Provider 自动完成
• 生物识别认证 → 参见 Patterns Guide
• 携带令牌调用 API → 参见 Patterns Guide
• 令牌自动刷新 → 调用 getCredentials() 时自动完成

参考资料

• Auth0 React Native SDK 文档
• Auth0 React Native 快速入门指南（Quickstart）
• SDK GitHub 仓库