auth0-expo

Auth0 Expo Integration

Add authentication to Expo (React Native) applications using react-native-auth0 with the Expo Config Plugin.

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

When NOT to Use

Use Case	Recommended 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

Quick Start Workflow

1. Configure 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.

2. Verify Expo Dev Client

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:

  npx expo install expo-dev-client
  

  Then proceed to step 3. If option 2, proceed to step 3 directly.

3. Install SDK

npx expo install react-native-auth0

4. Configure 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:

{
  "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.

5. Configure Callback URLs

Add to Allowed Callback URLs and Allowed Logout URLs in the Auth0 Dashboard:

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.

6. Add Authentication with 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.

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

Agent instruction: After completing the integration, build the project to verify it compiles:

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

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

Common Mistakes

Mistake	Fix
Using Expo Go instead of development build	react-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 mismatch	Ensure callback URL is all lowercase, no trailing slash, and matches Auth0 Dashboard exactly: {customScheme}://{domain}/ios/{bundleId}/callback
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 expo.ios.bundleIdentifier and expo.android.package must be set in app.json for callback URLs to work.
Forgot to wrap app with Auth0Provider	All components using useAuth0() must be children of Auth0Provider.
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.

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

References

• Auth0 Expo Quickstart
• react-native-auth0 GitHub Repository
• react-native-auth0 API Documentation
• Expo Sample App
• EXAMPLES.md