auth0-react-native by auth0/agent-skills
npx skills add https://github.com/auth0/agent-skills --skill auth0-react-native使用 react-native-auth0 为 React Native 和 Expo 移动应用添加身份验证功能。
auth0-quickstart 技能auth0-react 技能auth0-nextjsExpo:
npx expo install react-native-auth0
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npm install react-native-auth0
npx pod-install # 仅限 iOS
要使用 Auth0 CLI 进行自动化设置,请参阅设置指南以获取完整脚本。
手动设置:
创建 .env 文件:
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
iOS - 更新 ios/{YourApp}/Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>None</string>
<key>CFBundleURLName</key>
<string>auth0</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).auth0</string>
</array>
</dict>
</array>
Android - 更新 android/app/src/main/AndroidManifest.xml:
<activity
android:name="com.auth0.android.provider.RedirectActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="YOUR_AUTH0_DOMAIN"
android:pathPrefix="/android/${applicationId}/callback"
android:scheme="${applicationId}" />
</intent-filter>
</activity>
Expo - 更新 app.json:
{
"expo": {
"scheme": "your-app-scheme",
"ios": {
"bundleIdentifier": "com.yourcompany.yourapp"
},
"android": {
"package": "com.yourcompany.yourapp"
}
}
}
用 Auth0Provider 包装您的应用:
import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';
export default function Root() {
return (
<Auth0Provider
domain={process.env.AUTH0_DOMAIN}
clientId={process.env.AUTH0_CLIENT_ID}
>
<App />
</Auth0Provider>
);
}
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 <ActivityIndicator />;
}
return (
<View>
{user ? (
<>
<Text>Welcome, {user.name}!</Text>
<Text>{user.email}</Text>
<Button title="Logout" onPress={logout} />
</>
) : (
<Button title="Login" onPress={login} />
)}
</View>
);
}
Expo:
npx expo start
React Native:
npx react-native run-ios
# 或
npx react-native run-android
| 错误 | 修复方法 |
|---|---|
| 忘记用 Auth0Provider 包装应用 | 所有使用 useAuth0() 的组件必须是 Auth0Provider 的子组件 |
| 忘记配置深度链接 | 将 URL 方案添加到 iOS Info.plist 和 Android AndroidManifest.xml(参见步骤 3) |
| 回调 URL 不匹配 | 确保 Auth0 仪表板中的回调 URL 与应用的 URL 方案匹配(例如 com.yourapp.auth0://YOUR_DOMAIN/ios/com.yourapp/callback) |
| iOS 安装后构建失败 | 运行 npx pod-install 以链接原生依赖项 |
| 在 Auth0 中创建为 SPA 类型 | 移动应用必须是 Native 应用程序类型 |
| 未处理身份验证错误 | 将 authorize/clearSession 调用包装在 try-catch 块中 |
| Android 上深度链接不工作 | 验证 RedirectActivity 上是否设置了 android:exported="true" |
auth0-quickstart - 基础 Auth0 设置auth0-migration - 从其他身份验证提供商迁移auth0-mfa - 添加多因素认证核心 Hook API:
useAuth0() - 用于身份验证的主要 Hookauthorize() - 发起登录clearSession() - 登出user - 用户资料对象getCredentials() - 获取用于 API 调用的令牌isLoading - 加载状态常见用例:
每周安装量
124
仓库
GitHub 星标数
11
首次出现
2026 年 2 月 6 日
安全审计
安装于
codex116
opencode116
gemini-cli115
github-copilot115
amp112
kimi-cli112
Add authentication to React Native and Expo mobile applications using react-native-auth0.
auth0-quickstart skill firstauth0-react skill for SPAs (Vite/CRA)auth0-nextjs for Next.js applicationsExpo:
npx expo install react-native-auth0
React Native CLI:
npm install react-native-auth0
npx pod-install # iOS only
For automated setup with Auth0 CLI , see Setup Guide for complete scripts.
For manual setup:
Create .env:
AUTH0_DOMAIN=your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
iOS - Update ios/{YourApp}/Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>None</string>
<key>CFBundleURLName</key>
<string>auth0</string>
<key>CFBundleURLSchemes</key>
<array>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).auth0</string>
</array>
</dict>
</array>
Android - Update android/app/src/main/AndroidManifest.xml:
<activity
android:name="com.auth0.android.provider.RedirectActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="YOUR_AUTH0_DOMAIN"
android:pathPrefix="/android/${applicationId}/callback"
android:scheme="${applicationId}" />
</intent-filter>
</activity>
Expo - Update app.json:
{
"expo": {
"scheme": "your-app-scheme",
"ios": {
"bundleIdentifier": "com.yourcompany.yourapp"
},
"android": {
"package": "com.yourcompany.yourapp"
}
}
}
Wrap your app with Auth0Provider:
import React from 'react';
import { Auth0Provider } from 'react-native-auth0';
import App from './App';
export default function Root() {
return (
<Auth0Provider
domain={process.env.AUTH0_DOMAIN}
clientId={process.env.AUTH0_CLIENT_ID}
>
<App />
</Auth0Provider>
);
}
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 <ActivityIndicator />;
}
return (
<View>
{user ? (
<>
<Text>Welcome, {user.name}!</Text>
<Text>{user.email}</Text>
<Button title="Logout" onPress={logout} />
</>
) : (
<Button title="Login" onPress={login} />
)}
</View>
);
}
Expo:
npx expo start
React Native:
npx react-native run-ios
# or
npx react-native run-android
| Mistake | Fix |
|---|---|
| Forgot to wrap app with Auth0Provider | All components using useAuth0() must be children of Auth0Provider |
| Forgot to configure deep linking | Add URL scheme to iOS Info.plist and Android AndroidManifest.xml (see Step 3) |
| Callback URL mismatch | Ensure callback URL in Auth0 Dashboard matches your app's URL scheme (e.g., com.yourapp.auth0://YOUR_DOMAIN/ios/com.yourapp/callback) |
| iOS build fails after install | Run npx pod-install to link native dependencies |
| App created as SPA type in Auth0 | Must be Native application type for mobile apps |
| Not handling auth errors | Wrap authorize/clearSession calls in try-catch blocks |
| Deep link not working on Android | Verify android:exported="true" is set on RedirectActivity |
auth0-quickstart - Basic Auth0 setupauth0-migration - Migrate from another auth providerauth0-mfa - Add Multi-Factor AuthenticationCore Hook API:
useAuth0() - Main hook for authenticationauthorize() - Initiate loginclearSession() - Logoutuser - User profile objectgetCredentials() - Get tokens for API callsisLoading - Loading stateCommon Use Cases:
Auth0ProvidergetCredentials()Weekly Installs
124
Repository
GitHub Stars
11
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex116
opencode116
gemini-cli115
github-copilot115
amp112
kimi-cli112
Better Auth 最佳实践指南:集成、配置与安全设置完整教程
31,200 周安装