Expo

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

How to install the React Native Auth0 module.

yarn add react-native-auth0

npm install react-native-auth0 --save

The first step in adding authentication to your application is to provide a way for your users to log in. The fastest, most secure, and most feature-rich way to do this with Auth0 is to use the hosted login page.

The Auth0 package runs custom native code that needs to be configured at build time. We will use Expo Config Plugin to achieve this.

Add the react-native-auth0 plugin to the Expo config file at app.json or app.config.js.

{
  "expo": {
    ...
    "plugins": [
      [
        "react-native-auth0",
        {
          "domain": "{yourDomain}"
        }
      ]
    ]
  }
}

You must generate the native code for the above configuration to be set. To do this, run the following command:

expo prebuild

You will be prompted to provide the Android package and iOS bundle identifier if they are not already present in the Expo config:

? What would you like your Android package name to be? > com.auth0samples

? What would you like your iOS bundle identifier to be? > com.auth0samples

These values are found in the Expo config file at app.json or app.config.js. It will be used in the callback and logout URLs:

{
    ...
    "android": {
      "package": "com.auth0samples"
    },
    "ios": {
      "bundleIdentifier": "com.auth0samples"
    }
  }
}

{IOS_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{IOS_BUNDLE_IDENTIFIER}/callback

Remember to replace {IOS_BUNDLE_IDENTIFIER} with your actual application's bundle identifier name.

{ANDROID_PACKAGE}://{yourDomain}/android/{ANDROID_PACKAGE}/callback

Remember to replace {ANDROID_PACKAGE} with your actual application's package name.

{IOS_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{IOS_BUNDLE_IDENTIFIER}/callback

Remember to replace {IOS_BUNDLE_IDENTIFIER} with your actual application's bundle identifier name.

{ANDROID_PACKAGE}://{yourDomain}/android/{ANDROID_PACKAGE}/callback

Remember to replace {ANDROID_PACKAGE} with your actual application's package name.

First, import the useAuth0 hook and the Auth0Provider component from the react-native-auth0 package.

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

Next, wrap your application in the Auth0Provider component, providing your Auth0 domain and Client ID values:

const App = () => {
  return (
    <Auth0Provider domain={"{yourDomain}"} clientId={"{yourClientId}"}>
      {/* your application */}
    </Auth0Provider>
  );
};

Finally, present the hosted login screen using the authorize method from the useAuth0 hook. See this usage example showing logging in on a button click:

const LoginButton = () => {
    const {authorize} = useAuth0();

    const onPress = async () => {
        try {
            await authorize();
        } catch (e) {
            console.log(e);
        }
    };

    return <Button onPress={onPress} title="Log in" />
}

To log the user out, redirect them to the Auth0 log out endpoint by importing and calling the clearSession method from the useAuth0 hook. This will remove their session from the authorization server.

See this usage example of a button that logs the user out of the app when clicked:

const LogoutButton = () => {
    const {clearSession} = useAuth0();

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

    return <Button onPress={onPress} title="Log out" />
}

The useAuth0 hook exposes a user object that contains information about the authenticated user. You can use this to access user profile information about the authenticated user that has been decoded from the ID token.

If a user has not been authenticated, this property will be null.

const Profile = () => {
    const {user} = useAuth0();

    return (
        <>
            {user && <Text>Logged in as {user.name}</Text>}
            {!user && <Text>Not logged in</Text>}
        </>
    )
}