auth0-expo

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Auth0 Expo Integration

Auth0 Expo 集成

Add authentication to Expo (React Native) applications using
react-native-auth0
with the Expo Config Plugin.
使用
react-native-auth0
结合Expo Config Plugin为Expo(React Native)应用添加身份认证功能。

Prerequisites

前提条件

  • Expo SDK 53 or higher (react-native-auth0 v5.x requires Expo 53+)
  • React 19 and React Native 0.78.0 or higher
  • Auth0 account with a Native application configured
  • If Auth0 is not set up yet, use the
    auth0-quickstart
    skill first
  • Not compatible with Expo Go — requires custom development client or EAS Build
  • Expo SDK 53 或更高版本(react-native-auth0 v5.x 要求 Expo 53+)
  • React 19 和 React Native 0.78.0 或更高版本
  • 已配置Native类型应用的Auth0账户
  • 若尚未设置Auth0,请先使用
    auth0-quickstart
    技能
  • 不兼容Expo Go——需要自定义开发客户端或EAS Build

When NOT to Use

不适用于以下场景

Use CaseRecommended Skill
Bare React Native CLI project (no Expo)
auth0-react-native
React web SPA (Vite/CRA)
auth0-react
Next.js application
auth0-nextjs
Vue.js SPA
auth0-vue
Angular SPA
auth0-angular
Express.js backend
auth0-express
Native Android (Kotlin/Java)
auth0-android
Backend API (JWT validation)
auth0-fastify-api
or
auth0-express
使用场景推荐技能
纯React Native CLI项目(无Expo)
auth0-react-native
React Web单页应用(Vite/CRA)
auth0-react
Next.js应用
auth0-nextjs
Vue.js单页应用
auth0-vue
Angular单页应用
auth0-angular
Express.js后端
auth0-express
原生Android(Kotlin/Java)
auth0-android
后端API(JWT验证)
auth0-fastify-api
auth0-express

Quick Start Workflow

快速开始流程

1. Configure Auth0

1. 配置Auth0

For automated setup with Auth0 CLI, see Setup Guide for complete scripts.
For manual setup, configure a Native application in the Auth0 Dashboard and note your Domain and Client ID.
使用Auth0 CLI自动配置,请查看设置指南获取完整脚本。
手动配置,在Auth0控制台中配置一个Native类型应用,并记录你的Domain和Client ID。

2. Verify Expo Dev Client

2. 验证Expo开发客户端

Agent instruction: Before installing the Auth0 SDK, check if the project has
expo-dev-client
installed. Read the project's
package.json
and look for
expo-dev-client
in
dependencies
or
devDependencies
.
  • If
    expo-dev-client
    is found:
    Proceed to step 3.
  • If
    expo-dev-client
    is NOT found:
    Use
    AskUserQuestion
    with the following message:
    "The
    react-native-auth0
    SDK requires a custom Expo development client — it does not work with Expo Go. Your project does not have
    expo-dev-client
    installed.
    How would you like to proceed?
    1. Install it for me — I'll run
      npx expo install expo-dev-client
      and continue setup
    2. I'll set it up myself — skip this step and continue to Auth0 SDK installation"
    If the user picks option 1, run:
    bash
    npx expo install expo-dev-client
    Then proceed to step 3. If option 2, proceed to step 3 directly.
Agent 指令: 在安装Auth0 SDK之前,检查项目是否已安装
expo-dev-client
。查看项目的
package.json
,在
dependencies
devDependencies
中查找
expo-dev-client
  • 若找到
    expo-dev-client
    继续步骤3。
  • 若未找到
    expo-dev-client
    使用
    AskUserQuestion
    发送以下消息:
    "
    react-native-auth0
    SDK需要自定义Expo开发客户端——无法在Expo Go中使用。你的项目尚未安装
    expo-dev-client
    你希望如何继续?
    1. 帮我安装——我将运行
      npx expo install expo-dev-client
      并继续设置
    2. 我自行设置——跳过此步骤,直接进入Auth0 SDK安装"
    如果用户选择选项1,运行:
    bash
    npx expo install expo-dev-client
    然后继续步骤3。如果选择选项2,直接进入步骤3。

3. Install SDK

3. 安装SDK

bash
npx expo install react-native-auth0
bash
npx expo install react-native-auth0

4. Configure Expo Config Plugin

4. 配置Expo Config Plugin

Add the react-native-auth0 plugin to
app.json
(or
app.config.js
) with your Auth0 domain and a custom scheme. Also ensure
bundleIdentifier
(iOS) and
package
(Android) are set:
json
{
  "expo": {
    "ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
    "android": { "package": "com.yourcompany.yourapp" },
    "plugins": [
      ["react-native-auth0", {
        "domain": "YOUR_AUTH0_DOMAIN",
        "customScheme": "YOUR_CUSTOM_SCHEME"
      }]
    ]
  }
}
The
customScheme
must be all lowercase with no special characters (e.g.,
auth0sample
). See Setup Guide for HTTPS callbacks, multiple domains, EAS Build, and secret management.
将react-native-auth0插件添加到
app.json
(或
app.config.js
)中,配置你的Auth0域名和自定义scheme。同时确保设置了iOS的
bundleIdentifier
和Android的
package
json
{
  "expo": {
    "ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
    "android": { "package": "com.yourcompany.yourapp" },
    "plugins": [
      ["react-native-auth0", {
        "domain": "YOUR_AUTH0_DOMAIN",
        "customScheme": "YOUR_CUSTOM_SCHEME"
      }]
    ]
  }
}
customScheme
必须全小写且无特殊字符(例如:
auth0sample
)。有关HTTPS回调、多域名、EAS Build和密钥管理的内容,请查看设置指南

5. Configure Callback URLs

5. 配置回调URL

Add to Allowed Callback URLs and Allowed Logout URLs in the Auth0 Dashboard:
text
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/ios/YOUR_BUNDLE_ID/callback,
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/android/YOUR_PACKAGE/callback
All values must be lowercase with no trailing slash. For HTTPS callback URLs (App Links / Universal Links), see Setup Guide.
Auth0控制台Allowed Callback URLsAllowed Logout URLs中添加以下内容:
text
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/ios/YOUR_BUNDLE_ID/callback,
YOUR_CUSTOM_SCHEME://YOUR_AUTH0_DOMAIN/android/YOUR_PACKAGE/callback
所有值必须全小写无末尾斜杠。有关HTTPS回调URL(App Links/Universal Links)的内容,请查看设置指南

6. Add Authentication with Auth0Provider

6. 使用Auth0Provider添加身份认证

Wrap your app with
Auth0Provider
and use the
useAuth0
hook:
Agent instruction: Before adding new UI elements, search the project for existing click handlers for login, logout, sign-in, or sign-out buttons. If existing handlers are found, hook the Auth0 code into them. Only create new buttons if no existing handlers are found.
typescript
import React from 'react';
import { Auth0Provider, useAuth0 } from 'react-native-auth0';
import { View, Button, Text, ActivityIndicator } from 'react-native';

function HomeScreen() {
  const { authorize, clearSession, user, isLoading, error } = useAuth0();

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

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

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      {user ? (
        <>
          <Text>Welcome, {user.name}!</Text>
          <Text>{user.email}</Text>
          <Button title="Log Out" onPress={logout} />
        </>
      ) : (
        <Button title="Log In" onPress={login} />
      )}
      {error && <Text>{error.message}</Text>}
    </View>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="YOUR_AUTH0_DOMAIN"
      clientId="YOUR_AUTH0_CLIENT_ID"
    >
      <HomeScreen />
    </Auth0Provider>
  );
}
Auth0Provider
包裹你的应用,并使用
useAuth0
钩子:
Agent 指令: 在添加新UI元素之前,搜索项目中现有的登录、登出按钮点击处理器。如果找到现有处理器,将Auth0代码挂钩到其中。仅当没有现有处理器时才创建新按钮。
typescript
import React from 'react';
import { Auth0Provider, useAuth0 } from 'react-native-auth0';
import { View, Button, Text, ActivityIndicator } from 'react-native';

function HomeScreen() {
  const { authorize, clearSession, user, isLoading, error } = useAuth0();

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

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

  if (isLoading) {
    return <ActivityIndicator size="large" />;
  }

  return (
    <View>
      {user ? (
        <>
          <Text>Welcome, {user.name}!</Text>
          <Text>{user.email}</Text>
          <Button title="Log Out" onPress={logout} />
        </>
      ) : (
        <Button title="Log In" onPress={login} />
      )}
      {error && <Text>{error.message}</Text>}
    </View>
  );
}

export default function App() {
  return (
    <Auth0Provider
      domain="YOUR_AUTH0_DOMAIN"
      clientId="YOUR_AUTH0_CLIENT_ID"
    >
      <HomeScreen />
    </Auth0Provider>
  );
}

7. Build & Verify

7. 构建并验证

Agent instruction: After completing the integration, build the project to verify it compiles:
bash
npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android
If the build fails, analyze the error output. Common integration build failures include:
  • "Invariant Violation: Native module cannot be null": Using Expo Go instead of a development build — run
    npx expo run:ios
    or
    npx expo run:android
    instead of
    npx expo start
  • Plugin not applied: Missing
    react-native-auth0
    in app.json plugins array — verify the plugin configuration
  • Pod install fails (iOS): Run
    npx expo prebuild --clean
    to regenerate native projects
  • Manifest merge failure (Android): Conflicting auth0Domain placeholder — ensure only the config plugin sets the domain
Re-run the build after each fix. Track the number of build-fix iterations.
Failcheck: If the build still fails after 5–6 fix attempts, stop and ask the user using
AskUserQuestion
: "The build is still failing after several fix attempts. How would you like to proceed?"
  • Let the skill continue fixing iteratively
  • Fix it manually — show the remaining errors
  • Skip build verification — proceed without a successful build
Agent 指令: 完成集成后,构建项目以验证是否可编译:
bash
npx expo prebuild --clean
npx expo run:ios
# 或
npx expo run:android
如果构建失败,分析错误输出。常见的集成构建失败原因包括:
  • "Invariant Violation: Native module cannot be null":使用Expo Go而非开发构建——运行
    npx expo run:ios
    npx expo run:android
    代替
    npx expo start
  • 插件未应用:app.json的plugins数组中缺少
    react-native-auth0
    ——验证插件配置
  • Pod安装失败(iOS):运行
    npx expo prebuild --clean
    重新生成原生项目
  • 清单合并失败(Android):auth0Domain占位符冲突——确保仅由配置插件设置域名
每次修复后重新运行构建。记录构建-修复的迭代次数。
失败检查: 如果经过5-6次修复尝试后构建仍然失败,请停止并使用
AskUserQuestion
询问用户: "经过多次修复尝试后,构建仍然失败。你希望如何继续?"
  • 让技能继续迭代修复
  • 手动修复——显示剩余错误
  • 跳过构建验证——无需成功构建即可继续

Detailed Documentation

详细文档

  • Setup Guide — Dev client requirement, automated setup, Expo config plugin, callback URLs, EAS Build, secret management
  • Integration Patterns — Login/logout, credential management, biometric auth, token refresh, organizations, DPoP, error handling
  • API Reference & Testing — Configuration options, useAuth0 hook API, testing checklist, common issues, security
  • 设置指南——开发客户端要求、自动配置、Expo配置插件、回调URL、EAS Build、密钥管理
  • 集成模式——登录/登出、凭证管理、生物识别认证、令牌刷新、组织、DPoP、错误处理
  • API参考与测试——配置选项、useAuth0钩子API、测试清单、常见问题、安全

Common Mistakes

常见错误

MistakeFix
Using Expo Go instead of development buildreact-native-auth0 requires native code. Use
npx expo run:ios
/
npx expo run:android
or create a development build with EAS.
Missing
customScheme
in authorize/clearSession calls
Pass
{ customScheme: 'your-scheme' }
as the second argument to
authorize()
and
clearSession()
. Must match the value in app.json plugin config.
Callback URL mismatchEnsure callback URL is all lowercase, no trailing slash, and matches Auth0 Dashboard exactly:
{customScheme}://{domain}/ios/{bundleId}/callback
App type not set to NativeThe Auth0 application must be type Native in the Dashboard, not SPA or Regular Web.
Missing bundleIdentifier or package in app.jsonBoth
expo.ios.bundleIdentifier
and
expo.android.package
must be set in app.json for callback URLs to work.
Forgot to wrap app with Auth0ProviderAll components using
useAuth0()
must be children of
Auth0Provider
.
Using react-native-auth0 v5.x with Expo < 53Version 5.x requires Expo 53+. Use v4.x for older Expo versions.
Not testing on physical deviceBiometric authentication (Face ID, fingerprint) only works on a physical device, not simulators. Always test the full auth flow on a real device before release.
错误修复方案
使用Expo Go而非开发构建react-native-auth0需要原生代码。使用
npx expo run:ios
/
npx expo run:android
或通过EAS创建开发构建。
在authorize/clearSession调用中缺少
customScheme
authorize()
clearSession()
的第二个参数中传入
{ customScheme: 'your-scheme' }
。必须与app.json插件配置中的值匹配。
回调URL不匹配确保回调URL全小写、无末尾斜杠,且与Auth0控制台完全一致:
{customScheme}://{domain}/ios/{bundleId}/callback
应用类型未设置为NativeAuth0应用在控制台中必须设置为Native类型,而非SPA或常规Web应用。
app.json中缺少bundleIdentifier或package必须在app.json中设置
expo.ios.bundleIdentifier
expo.android.package
,回调URL才能正常工作。
忘记用Auth0Provider包裹应用所有使用
useAuth0()
的组件必须是Auth0Provider的子组件。
在Expo <53版本中使用react-native-auth0 v5.xv5.x要求Expo 53+。旧版Expo请使用v4.x。
未在物理设备上测试生物识别认证(Face ID、指纹)仅在物理设备上可用,模拟器无法使用。发布前务必在真实设备上测试完整认证流程。

Related Skills

相关技能

References

参考资料