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 # or your desired package name

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

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": "YOUR_ANDROID_PACKAGE_NAME_IS_FOUND_HERE"
    },
    "ios": {
      "bundleIdentifier": "YOUR_IOS_BUNDLE_IDENTIFIER_IS_FOUND_HERE"
    }
  }
}

The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your application. Auth0 invokes the callback URL after authenticating the user, and the logout URL after removing the session cookie.

If the callback and logout URLs are not set, users will be unable to log in and out of the application and will get an error.

Go to the settings page of your Auth0 application and add the corresponding URL to Allowed Callback URLs and Allowed Logout URLs, according to the platform of your application. If you are using a custom domain, use the value of your custom domain instead of the Auth0 domain from the settings page.

BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback

PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback

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, error} = useAuth0();

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