Auth0 React Native Integration

Add authentication to React Native and Expo mobile applications using react-native-auth0.

Prerequisites

• React Native or Expo application
• Auth0 account and application configured as Native type
• If you don't have Auth0 set up yet, use the auth0-quickstart skill first

When NOT to Use

• React web applications - Use auth0-react skill for SPAs (Vite/CRA)
• React Server Components - Use auth0-nextjs for Next.js applications
• Non-React native apps - Use platform-specific SDKs (Swift for iOS, Kotlin for Android)
• Backend APIs - Use JWT validation libraries for your server language

Quick Start Workflow

1. Install SDK

Expo:

npx expo install react-native-auth0

React Native CLI:

npm install react-native-auth0
npx pod-install  # iOS only

2. Configure Environment

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

3. Configure Native Platforms

iOS - Update ios/{YourApp}/Info.plist:

\x3Ckey>CFBundleURLTypes\x3C/key>
\x3Carray>
  \x3Cdict>
    \x3Ckey>CFBundleTypeRole\x3C/key>
    \x3Cstring>None\x3C/string>
    \x3Ckey>CFBundleURLName\x3C/key>
    \x3Cstring>auth0\x3C/string>
    \x3Ckey>CFBundleURLSchemes\x3C/key>
    \x3Carray>
      \x3Cstring>$(PRODUCT_BUNDLE_IDENTIFIER).auth0\x3C/string>
    \x3C/array>
  \x3C/dict>
\x3C/array>

Android - Update android/app/src/main/AndroidManifest.xml:

\x3Cactivity
    android:name="com.auth0.android.provider.RedirectActivity"
    android:exported="true">
    \x3Cintent-filter>
        \x3Caction android:name="android.intent.action.VIEW" />
        \x3Ccategory android:name="android.intent.category.DEFAULT" />
        \x3Ccategory android:name="android.intent.category.BROWSABLE" />
        \x3Cdata
            android:host="YOUR_AUTH0_DOMAIN"
            android:pathPrefix="/android/${applicationId}/callback"
            android:scheme="${applicationId}" />
    \x3C/intent-filter>
\x3C/activity>

Expo - Update app.json:

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

4. Add Authentication with Auth0Provider

Wrap your app with Auth0Provider:

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

export default function Root() {
  return (
    \x3CAuth0Provider
      domain={process.env.AUTH0_DOMAIN}
      clientId={process.env.AUTH0_CLIENT_ID}
    >
      \x3CApp />
    \x3C/Auth0Provider>
  );
}

5. Use the 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 \x3CActivityIndicator />;
  }

  return (
    \x3CView>
      {user ? (
        \x3C>
          \x3CText>Welcome, {user.name}!\x3C/Text>
          \x3CText>{user.email}\x3C/Text>
          \x3CButton title="Logout" onPress={logout} />
        \x3C/>
      ) : (
        \x3CButton title="Login" onPress={login} />
      )}
    \x3C/View>
  );
}

6. Test Authentication

Expo:

npx expo start

React Native:

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

Detailed Documentation

• Setup Guide - Automated setup, native configuration, deep linking
• Patterns Guide - Secure storage, biometric auth, token refresh
• API Reference - Complete SDK API, methods, configuration options

Common Mistakes

Related Skills

• auth0-quickstart - Basic Auth0 setup
• auth0-migration - Migrate from another auth provider
• auth0-mfa - Add Multi-Factor Authentication

Quick Reference

Core Hook API:

• useAuth0() - Main hook for authentication
• authorize() - Initiate login
• clearSession() - Logout
• user - User profile object
• getCredentials() - Get tokens for API calls
• isLoading - Loading state

Common Use Cases:

• Login/Logout → See Step 5 above
• Secure token storage → Automatic with Auth0Provider
• Biometric authentication → Patterns Guide
• API calls with tokens → Patterns Guide
• Token refresh → Automatic with getCredentials()

References

• Auth0 React Native SDK Documentation
• Auth0 React Native Quickstart
• SDK GitHub Repository