In this blog post, we'll be talking about the integration of Auth0 into our React Native (Android) app.

Auth0: Auth0 secures more than 100 million logins each day. Auth0 provides the simplicity, extensibility, and expertise to scale and protect identities in any application, for any audience. Also, auth0 is the first identity management platform for application builders, and the only identity solution needed for custom-built applications.

Now, let's move further to the integration part.

Step 1: Create an Application in the Auth0 Dashboard

Go to the Auth0 Dashboard and Create an Application

Give a name to your app and select the app. type

Select React Native from the listed Technologies

Step 2: Configure the App with Auth0

Go to the Application Settings section in the Auth0 Dashboard

Get the Client ID and Domain from the panel

Step 2: Installing Dependencies

Install the dependencies of the React Native Auth0 module.

Yarn:

$ yarn add react-native-auth0

npm:

$ npm install react-native-auth0

Provide a way for users to log in. You can do this with the Auth0 hosted login page.

The login page looks similar to the image below.

Step 3: Integrate Auth0 into your app

Go to android/app/src/main/AndroidManifest.xml, and make sure that the activity you are going to receive the authentication on has a launch mode value of singleTask and that it declares the following intent filter.

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data
        android:host="MY_DOMAIN"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" />
</intent-filter>

So the MainActivity looks like this:

Step 4: Configure Callback URLs:

A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.

The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

callback URL:

$ {YOUR_APP_PACKAGE_NAME}://{MY_DOMAIN}/android/{YOUR_APP_PACKAGE_NAME}/callback

Remember to replace {YOUR_APP_PACKAGE_NAME} and {MY_DOMAIN} with your actual application's package name and Domain.

Step 5: Configure logout URL:

A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo query parameter.

The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

logout URL:

$ {YOUR_APP_PACKAGE_NAME}://{MY_DOMAIN}/android/{YOUR_APP_PACKAGE_NAME}/callback

Remember to replace {YOUR_APP_PACKAGE_NAME} and {MY_DOMAIN} with your actual application's package name and Domain.

Step 6: Add authentication with Auth0 in your app:

First, import the Auth0 module and create a new Auth0 instance.

$ import Auth0 from 'react-native-auth0';
$ const auth0 = new Auth0({ domain: 'MY_DOMAIN', clientId: 'CLIENT_ID' });

Then present the hosted login screen, like this:

Upon successful authentication the user's credentials will be returned, containing an access_token, an id_token and an expires_in value.

Step 6: Log the user out:

To log the user out, redirect them to the Auth0 log out endpoint by calling clearSession. This will remove their session from the authorization server. After this happens, remove the Access Token from the state.

auth0.webAuth
    .clearSession({})
    .then(success => {
        Alert.alert(
            'Logged out!'
        );
        this.setState({ accessToken: null });
    })
    .catch(error => {
        console.log('Log out cancelled');
    });

Thanks a lot for reaching here and reading this blog. If you face any difficulties you can always have a look at the Auth0 documentation.