auth0-expo
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseAuth0 Expo Integration
Auth0 Expo 集成
Add authentication to Expo (React Native) applications using with the Expo Config Plugin.
react-native-auth0使用结合Expo Config Plugin为Expo(React Native)应用添加身份认证功能。
react-native-auth0Prerequisites
前提条件
- 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 skill first
auth0-quickstart - 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 Case | Recommended Skill |
|---|---|
| Bare React Native CLI project (no Expo) | |
| React web SPA (Vite/CRA) | |
| Next.js application | |
| Vue.js SPA | |
| Angular SPA | |
| Express.js backend | |
| Native Android (Kotlin/Java) | |
| Backend API (JWT validation) | |
| 使用场景 | 推荐技能 |
|---|---|
| 纯React Native CLI项目(无Expo) | |
| React Web单页应用(Vite/CRA) | |
| Next.js应用 | |
| Vue.js单页应用 | |
| Angular单页应用 | |
| Express.js后端 | |
| 原生Android(Kotlin/Java) | |
| 后端API(JWT验证) | |
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 hasinstalled. Read the project'sexpo-dev-clientand look forpackage.jsoninexpo-dev-clientordependencies.devDependencies
Ifis found: Proceed to step 3.expo-dev-client Ifis NOT found: Useexpo-dev-clientwith the following message:AskUserQuestion"TheSDK requires a custom Expo development client — it does not work with Expo Go. Your project does not havereact-native-auth0installed.expo-dev-clientHow would you like to proceed?
- Install it for me — I'll run
and continue setupnpx expo install expo-dev-client- I'll set it up myself — skip this step and continue to Auth0 SDK installation"
If the user picks option 1, run:bashnpx expo install expo-dev-clientThen 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
若找到: 继续步骤3。expo-dev-client 若未找到: 使用expo-dev-client发送以下消息:AskUserQuestion"SDK需要自定义Expo开发客户端——无法在Expo Go中使用。你的项目尚未安装react-native-auth0。expo-dev-client你希望如何继续?
- 帮我安装——我将运行
并继续设置npx expo install expo-dev-client- 我自行设置——跳过此步骤,直接进入Auth0 SDK安装"
如果用户选择选项1,运行:bashnpx expo install expo-dev-client然后继续步骤3。如果选择选项2,直接进入步骤3。
3. Install SDK
3. 安装SDK
bash
npx expo install react-native-auth0bash
npx expo install react-native-auth04. Configure Expo Config Plugin
4. 配置Expo Config Plugin
Add the react-native-auth0 plugin to (or ) with your Auth0 domain and a custom scheme. Also ensure (iOS) and (Android) are set:
app.jsonapp.config.jsbundleIdentifierpackagejson
{
"expo": {
"ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
"android": { "package": "com.yourcompany.yourapp" },
"plugins": [
["react-native-auth0", {
"domain": "YOUR_AUTH0_DOMAIN",
"customScheme": "YOUR_CUSTOM_SCHEME"
}]
]
}
}The must be all lowercase with no special characters (e.g., ). See Setup Guide for HTTPS callbacks, multiple domains, EAS Build, and secret management.
customSchemeauth0sample将react-native-auth0插件添加到(或)中,配置你的Auth0域名和自定义scheme。同时确保设置了iOS的和Android的:
app.jsonapp.config.jsbundleIdentifierpackagejson
{
"expo": {
"ios": { "bundleIdentifier": "com.yourcompany.yourapp" },
"android": { "package": "com.yourcompany.yourapp" },
"plugins": [
["react-native-auth0", {
"domain": "YOUR_AUTH0_DOMAIN",
"customScheme": "YOUR_CUSTOM_SCHEME"
}]
]
}
}customSchemeauth0sample5. 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/callbackAll values must be lowercase with no trailing slash. For HTTPS callback URLs (App Links / Universal Links), see Setup Guide.
在Auth0控制台的Allowed Callback URLs和Allowed 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 and use the hook:
Auth0ProvideruseAuth0Agent 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>
);
}用包裹你的应用,并使用钩子:
Auth0ProvideruseAuth0Agent 指令: 在添加新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:bashnpx expo prebuild --clean npx expo run:ios # or npx expo run:androidIf 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
ornpx expo run:iosinstead ofnpx expo run:androidnpx expo start- Plugin not applied: Missing
in app.json plugins array — verify the plugin configurationreact-native-auth0- Pod install fails (iOS): Run
to regenerate native projectsnpx expo prebuild --clean- 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: "The build is still failing after several fix attempts. How would you like to proceed?"AskUserQuestion
- Let the skill continue fixing iteratively
- Fix it manually — show the remaining errors
- Skip build verification — proceed without a successful build
Agent 指令: 完成集成后,构建项目以验证是否可编译:bashnpx 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:androidnpx 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
常见错误
| Mistake | Fix |
|---|---|
| Using Expo Go instead of development build | react-native-auth0 requires native code. Use |
Missing | Pass |
| Callback URL mismatch | Ensure callback URL is all lowercase, no trailing slash, and matches Auth0 Dashboard exactly: |
| App type not set to Native | The Auth0 application must be type Native in the Dashboard, not SPA or Regular Web. |
| Missing bundleIdentifier or package in app.json | Both |
| Forgot to wrap app with Auth0Provider | All components using |
| Using react-native-auth0 v5.x with Expo < 53 | Version 5.x requires Expo 53+. Use v4.x for older Expo versions. |
| Not testing on physical device | Biometric 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需要原生代码。使用 |
在authorize/clearSession调用中缺少 | 在 |
| 回调URL不匹配 | 确保回调URL全小写、无末尾斜杠,且与Auth0控制台完全一致: |
| 应用类型未设置为Native | Auth0应用在控制台中必须设置为Native类型,而非SPA或常规Web应用。 |
| app.json中缺少bundleIdentifier或package | 必须在app.json中设置 |
| 忘记用Auth0Provider包裹应用 | 所有使用 |
| 在Expo <53版本中使用react-native-auth0 v5.x | v5.x要求Expo 53+。旧版Expo请使用v4.x。 |
| 未在物理设备上测试 | 生物识别认证(Face ID、指纹)仅在物理设备上可用,模拟器无法使用。发布前务必在真实设备上测试完整认证流程。 |
Related Skills
相关技能
- auth0-quickstart — Set up an Auth0 account and application
- auth0-react-native — Bare React Native CLI projects
- auth0-mfa — Configure multi-factor authentication
- auth0-cli — Manage Auth0 resources from the terminal
- auth0-quickstart——设置Auth0账户和应用
- auth0-react-native——纯React Native CLI项目
- auth0-mfa——配置多因素认证
- auth0-cli——从终端管理Auth0资源