# Getting Started with Auth0 using React Native (Android)

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

![Screenshot_2021-01-07 Getting Started(1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610004982792/EYuPBgCz7.png)

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

![Screenshot_2021-01-07 Getting Started(2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610005168160/OhxryREv9.png)

Select React Native from the listed Technologies


![Screenshot_2021-01-07 Application Details.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610005309776/v1PPjSAKo.png)

### **Step 2: ** Configure the App with Auth0

Go to the [Application Settings](https://manage.auth0.com/#/applications) section in the Auth0 Dashboard

Get the **Client ID** and **Domain** from the panel


![Screenshot from 2021-01-07 13-19-41.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610005807500/Rr0sflaCN.png)


### **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.


![oie_eYeM3DnnJG40.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610007224987/EAESB6ApH.png)


### **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:


![carbon (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610007793068/UWGA2MCny.png)

### **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](https://manage.auth0.com/#/applications). 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](https://manage.auth0.com/#/applications). 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:


![carbon (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610008520839/lrGOAZyWG.png)

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](https://auth0.com/docs/).