Auth0 React Native SDK Quickstarts: Add Login to Your React Native Application

This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the Expo Quickstart.

Use AI to integrate Auth0

If you use an AI coding assistant like Claude Code, Cursor, or GitHub Copilot, you can add Auth0 authentication automatically in minutes using agent skills.Install:

npx skills add https://github.com/auth0/agent-skills --skill auth0-react-native

Then ask your AI assistant:

Add Auth0 authentication to my React Native app

Your AI assistant will automatically create your Auth0 application, fetch credentials, install react-native-auth0, configure native dependencies, and set up your authentication flow. Full agent skills documentation →

Get Started

Create a new React Native project

Create a new React Native project for this quickstart.In your terminal:

npx @react-native-community/cli init Auth0ReactNativeSample
cd Auth0ReactNativeSample

Configure your project with:

Name: Auth0ReactNativeSample
Package name: com.auth0.samples.reactnative

This creates a React Native app with the latest stable version. The Auth0 SDK requires React Native 0.78.0+ and React 19.0.0+.

Install the Auth0 SDK

Add the Auth0 React Native SDK to your project.

npm install react-native-auth0

For iOS, install the native dependencies:

cd ios && pod install && cd ..

The SDK auto-links on both platforms. The pod install step installs the required iOS native modules (Auth0.swift, JWTDecode, SimpleKeychain).

Configure your Auth0 Application

Create and configure an Auth0 application to work with your React Native app.

Navigate to the Auth0 Dashboard.
Select Applications > Applications > Create Application.
In the dialog, enter a name for your application (for example, Auth0 React Native Sample), select Native as the application type, and select Create.
Select the Settings tab on the Application Details page.
Note your Domain and Client ID values.

Allowed Callback URLs:

https://YOUR_DOMAIN/ios/org.reactjs.native.example.auth0reactnativesample/callback,
https://YOUR_DOMAIN/android/com.auth0reactnativesample/callback

Allowed Logout URLs:

https://YOUR_DOMAIN/ios/org.reactjs.native.example.auth0reactnativesample/callback,
https://YOUR_DOMAIN/android/com.auth0reactnativesample/callback

Replace YOUR_DOMAIN with your actual Auth0 domain (for example, dev-abc123.us.auth0.com).

These HTTPS callback URLs use App Links (Android) and Universal Links (iOS), which the operating system verifies before routing the callback to your application. This prevents other applications from intercepting the authentication response. To learn more, read Measures Against App Impersonation.

Configure Native Platforms

Configure both iOS and Android to handle the authentication callback.Android Configuration:Open android/app/build.gradle and add the manifest placeholders inside defaultConfig:

android/app/build.gradle

android {
    defaultConfig {
        applicationId "com.auth0reactnativesample"
        // ... other config
        
        // Add Auth0 manifest placeholders
        manifestPlaceholders = [
            auth0Domain: "YOUR_DOMAIN",
            auth0Scheme: "https"
        ]
    }
}

Replace YOUR_DOMAIN with your Auth0 domain (for example, dev-abc123.us.auth0.com).

Setting auth0Scheme: "https" enables App Links, which lets Android verify the callback URL against your domain before routing it to your application.

iOS Configuration:To enable Universal Links, add an Associated Domain to your Xcode project.

Open your project in Xcode.
Select your target, then select the Signing & Capabilities tab.
Select + Capability and add Associated Domains.
In the Associated Domains list, add the following entry:

applinks:YOUR_DOMAIN

Replace YOUR_DOMAIN with your Auth0 domain (for example, dev-abc123.us.auth0.com).

Universal Links are verified by iOS against a file hosted at your Auth0 domain before routing callbacks to your application. This prevents other applications from intercepting the authentication response.

Setup App Component

Setup your main app component based on your chosen implementation approach.

Hooks-based (with Provider)
Class-based (without Provider)

Replace the contents of App.tsx and wrap your application with the Auth0Provider component:

App.tsx

import React from 'react';
import {Auth0Provider} from 'react-native-auth0';
import {SafeAreaView, StyleSheet} from 'react-native';
import MainScreen from './src/MainScreen';

const App = () => {
  return (
    <Auth0Provider
      domain="YOUR_DOMAIN"
      clientId="YOUR_CLIENT_ID">
      <SafeAreaView style={styles.container}>
        <MainScreen />
      </SafeAreaView>
    </Auth0Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

Replace YOUR_DOMAIN with your Auth0 domain and YOUR_CLIENT_ID with your Client ID from the Auth0 Dashboard settings.

The Auth0Provider initializes the SDK and provides authentication context to all child components via the useAuth0 hook.

Replace the contents of App.tsx with a simple container for your class-based component:

App.tsx

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import MainScreen from './src/MainScreen';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <MainScreen />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default App;

The class-based approach doesn’t require the Auth0Provider since it uses the Auth0 class instance directly. The Auth0 configuration will be in the MainScreen component.

Implement Login and Logout

Create a screen component that handles login and logout. Choose between a hooks-based approach (recommended) or a class-based approach.

Hooks-based (Recommended)
Class-based

Create src/MainScreen.tsx using the useAuth0 hook:

src/MainScreen.tsx

import React from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
  ActivityIndicator,
  Image,
} from 'react-native';
import {useAuth0} from 'react-native-auth0';

const MainScreen = () => {
  const {authorize, clearSession, user, isLoading} = useAuth0();

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

  const logout = async () => {
    try {
      await clearSession();
    } catch (e) {
      console.error(e);
    }
  };

  if (isLoading) {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#0066cc" />
        <Text style={styles.loadingText}>Loading...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Auth0 React Native</Text>

      {user ? (
        <View style={styles.profileContainer}>
          {user.picture && (
            <Image source={{uri: user.picture}} style={styles.avatar} />
          )}
          <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
          <Text style={styles.emailText}>{user.email}</Text>
          <View style={styles.buttonContainer}>
            <Button title="Log Out" onPress={logout} color="#dc3545" />
          </View>
        </View>
      ) : (
        <View style={styles.loginContainer}>
          <Text style={styles.subtitle}>
            Tap the button below to log in
          </Text>
          <View style={styles.buttonContainer}>
            <Button title="Log In" onPress={login} color="#0066cc" />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
    textAlign: 'center',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
  profileContainer: {
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  emailText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  loginContainer: {
    alignItems: 'center',
  },
  buttonContainer: {
    width: 200,
    marginTop: 10,
  },
});

export default MainScreen;

Create src/MainScreen.tsx using the Auth0 class directly:

src/MainScreen.tsx

import React, {Component} from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
  ActivityIndicator,
  Image,
} from 'react-native';
import Auth0, {Credentials} from 'react-native-auth0';

const auth0 = new Auth0({
  domain: 'YOUR_DOMAIN',
  clientId: 'YOUR_CLIENT_ID',
});

interface User {
  name?: string;
  email?: string;
  picture?: string;
}

interface MainScreenState {
  user: User | null;
  isLoading: boolean;
}

class MainScreen extends Component<{}, MainScreenState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      user: null,
      isLoading: true,
    };
  }

  async componentDidMount() {
    await this.checkAuthStatus();
  }

  checkAuthStatus = async () => {
    try {
      const hasValidCredentials = await auth0.credentialsManager.hasValidCredentials();
      if (hasValidCredentials) {
        const credentials = await auth0.credentialsManager.getCredentials();
        const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
        this.setState({user: userInfo, isLoading: false});
      } else {
        this.setState({isLoading: false});
      }
    } catch (e) {
      console.error(e);
      this.setState({isLoading: false});
    }
  };

  login = async () => {
    try {
      const credentials: Credentials = await auth0.webAuth.authorize({
        scope: 'openid profile email',
      });
      
      await auth0.credentialsManager.saveCredentials(credentials);
      const userInfo = await auth0.auth.userInfo({token: credentials.accessToken});
      this.setState({user: userInfo});
    } catch (e) {
      console.error(e);
    }
  };

  logout = async () => {
    try {
      await auth0.webAuth.clearSession();
      await auth0.credentialsManager.clearCredentials();
      this.setState({user: null});
    } catch (e) {
      console.error(e);
    }
  };

  render() {
    const {user, isLoading} = this.state;

    if (isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" color="#0066cc" />
          <Text style={styles.loadingText}>Loading...</Text>
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <Text style={styles.title}>Auth0 React Native</Text>

        {user ? (
          <View style={styles.profileContainer}>
            {user.picture && (
              <Image source={{uri: user.picture}} style={styles.avatar} />
            )}
            <Text style={styles.welcomeText}>Welcome, {user.name}!</Text>
            <Text style={styles.emailText}>{user.email}</Text>
            <View style={styles.buttonContainer}>
              <Button title="Log Out" onPress={this.logout} color="#dc3545" />
            </View>
          </View>
        ) : (
          <View style={styles.loginContainer}>
            <Text style={styles.subtitle}>
              Tap the button below to log in
            </Text>
            <View style={styles.buttonContainer}>
              <Button title="Log In" onPress={this.login} color="#0066cc" />
            </View>
          </View>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
    textAlign: 'center',
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: '#666',
  },
  profileContainer: {
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 22,
    fontWeight: '600',
    marginBottom: 8,
    color: '#333',
  },
  emailText: {
    fontSize: 16,
    color: '#666',
    marginBottom: 30,
  },
  loginContainer: {
    alignItems: 'center',
  },
  buttonContainer: {
    width: 200,
    marginTop: 10,
  },
});

export default MainScreen;

Replace YOUR_DOMAIN with your Auth0 domain and YOUR_CLIENT_ID with your Client ID from the Auth0 Dashboard settings.

The authorize() method (hooks) or auth0.webAuth.authorize() (class) opens Auth0’s Universal Login in a secure browser (ASWebAuthenticationSession on iOS, Chrome Custom Tabs on Android). The clearSession() method logs the user out and clears both the browser session and stored credentials.

Run your app

Build and run your React Native application on a device or emulator.For iOS (requires macOS):

npx react-native run-ios

For Android:

npx react-native run-android

Expected flow:

App launches showing “Log In” button
Tap Log In → Browser opens with Auth0 Universal Login
Complete login (sign up or sign in)
Browser closes → Returns to app automatically
User profile displays with name, email, and avatar

iOS Simulator requires a valid Apple Developer account for ASWebAuthenticationSession. For testing on simulator without an account, use a physical device or Android emulator instead.

CheckpointYou now have a fully functional Auth0 login experience running on your device or emulator. The app uses secure browser authentication and automatically manages credentials.

Troubleshooting & Advanced

Common Issues & Solutions

”Callback URL mismatch” error

Solution:

Verify the HTTPS callback URL is in Allowed Callback URLs in the Auth0 Dashboard.
Ensure both iOS and Android URLs are added.
Confirm YOUR_DOMAIN is replaced with your actual Auth0 domain.

Fix:

Confirm the Associated Domain applinks:YOUR_DOMAIN is added in Xcode under Signing & Capabilities.
Verify the HTTPS callback URL in the Auth0 Dashboard matches your bundle identifier and domain.
Ensure your Apple Developer team has an active membership, as Associated Domains requires a valid team ID.

Android build fails

Fix:

Add auth0Domain and auth0Scheme manifest placeholders to android/app/build.gradle. Set auth0Scheme: "https" to enable App Links.
Sync the project with Gradle files.
Clean the build: ./gradlew clean

”PKCE not allowed” error

Fix:

Go to Auth0 Dashboard → Applications → Your Application
Change application type to Native
Save changes and try again

Pod install fails (iOS)

Fix:

Update CocoaPods: sudo gem install cocoapods
Update pod repo: pod install --repo-update
If issues persist, delete Podfile.lock and ios/Pods folder, then run pod install again

User cancelled error

Handle gracefully in your login function:

const login = async () => {
  try {
    await authorize({scope: 'openid profile email'});
  } catch (e) {
    if (e.message === 'a0.session.user_cancelled') {
      // User closed login screen - handle gracefully
      console.log('Login cancelled by user');
    } else {
      console.error('Login failed:', e);
    }
  }
};

iOS Alert Dialog

On iOS, users see a permission dialog: “App Name” Wants to Use “auth0.com” to Sign In. This is expected behavior from ASWebAuthenticationSession. Users must tap Continue to proceed.To customize this behavior, you can use ephemeral sessions (disables SSO):

await authorize({scope: 'openid profile email'}, {ephemeralSession: true});

Retrieving Access Tokens

Use the getCredentials() method to retrieve tokens for API calls:

import {useAuth0} from 'react-native-auth0';

const MyComponent = () => {
  const {getCredentials} = useAuth0();

  const callApi = async () => {
    try {
      const credentials = await getCredentials();
      const response = await fetch('https://your-api.com/endpoint', {
        headers: {
          Authorization: `Bearer ${credentials.accessToken}`,
        },
      });
      // Handle response
    } catch (e) {
      console.error('Failed to get credentials', e);
    }
  };
};

Include the offline_access scope during login to receive a refresh token: authorize({scope: 'openid profile email offline_access'}). This enables automatic token renewal.

Check Authentication Status on App Launch

Use hasValidCredentials() to check if the user is already logged in:

import {useAuth0} from 'react-native-auth0';
import {useEffect} from 'react';

const App = () => {
  const {hasValidCredentials, getCredentials} = useAuth0();

  useEffect(() => {
    const checkAuth = async () => {
      const isLoggedIn = await hasValidCredentials();
      if (isLoggedIn) {
        const credentials = await getCredentials();
        // User is authenticated, load their data
      }
    };
    checkAuth();
  }, []);
};

Production Deployment

Before deploying to production

Verify Android App Links in the Auth0 Dashboard:

Navigate to Settings > Advanced Settings > Device Settings.
Add your application’s SHA-256 certificate fingerprint so Android can verify your domain.

Verify iOS Universal Links:

Confirm applinks:YOUR_DOMAIN is present in Signing & Capabilities > Associated Domains in Xcode.
Confirm the callback URL registered in the Auth0 Dashboard matches the format https://YOUR_DOMAIN/ios/{bundleId}/callback.

Enable biometric authentication for sensitive applications using localAuthenticationOptions in Auth0Provider.Review security settings in the Auth0 Dashboard:

Enable OIDC Conformant in Advanced Settings.
Configure Token Expiration appropriately.
Set up Brute Force Protection.
Test on multiple devices and OS versions.
Implement proper error handling for network failures.

Single Page App

Regular Web App

Native/Mobile App

Backend/API

Add Login to Your React Native Application

Get Started

Troubleshooting & Advanced

”Callback URL mismatch” error

Android build fails

”PKCE not allowed” error

Pod install fails (iOS)

User cancelled error

iOS Alert Dialog

Before deploying to production

Single Page App

Regular Web App

Native/Mobile App

Backend/API

​Get Started

​Troubleshooting & Advanced

​”Callback URL mismatch” error

​App doesn’t return after login (iOS)

​Android build fails

​”PKCE not allowed” error

​Pod install fails (iOS)

​User cancelled error

​iOS Alert Dialog

​Before deploying to production

Get Started

Troubleshooting & Advanced

”Callback URL mismatch” error

App doesn’t return after login (iOS)

Android build fails

”PKCE not allowed” error

Pod install fails (iOS)

User cancelled error

iOS Alert Dialog

Before deploying to production