React Native

View on Github

React Native

Gravatar for martin.walsh@auth0.com
By Martin Walsh
Auth0

This tutorial demonstrates how to add user login to a React Native application using Auth0. We recommend you to Log in to follow this quickstart with examples configured for your account.

I want to explore a sample app

2 minutes

Get a sample configured with your account settings or check it on Github.

View on Github
System requirements: React Native 0.26.0 | NodeJS 4.3

New to Auth? Learn How Auth0 works, how it integrates with Native Applications and which protocol it uses.

Configure Auth0

Get Your Application Keys

When you signed up for Auth0, a new application was created for you, or you could have created a new one.

Your will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

You need the following information:

  • Client ID
  • Domain

If you download the sample from the top of this page these details are filled out for you.

If you have more than one application in your account, the sample comes with the values for your Default App.

App Dashboard

Configure Callback URLs

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

You need to whitelist the callback URL for your app in the Allowed Callback URLs field in your Application Settings. If you do not set any callback URL, your users will see a mismatch error when they log in.

iOS Callback

{PRODUCT_BUNDLE_IDENTIFIER}://YOUR_AUTH0_DOMAIN/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback

Remember to replace PRODUCT_BUNDLE_IDENTIFIER with your actual application's bundle identifier name.

Inside the ios folder open the Info.plist and locate the value for CFBundleIdentifier. In the sample project the value is:

<key>CFBundleIdentifier</key>
<string>auth0.samples.Auth0Sample</string>

Android Callback

{YOUR_APP_PACKAGE_NAME}://YOUR_AUTH0_DOMAIN/android/{YOUR_APP_PACKAGE_NAME}/callback

Remember to replace YOUR_APP_PACKAGE_NAME with your actual application's package name.

You can find this at the top of your AndroidManifest.xml file located in the android/app/src/main/ folder. In the sample project the value is:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.auth0sample"

Install Dependencies

How to install the React Native Auth0 module.

npm

npm install react-native-auth0 --save

yarn

yarn add --dev react-native-auth0

For further reference on yarn, check their official documentation.

To add the functionality of the React Native Auth0 module to your project you need to link it.

react-native link react-native-auth0

For further reference on linking libraries, check the official documentation.

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.

Login Page

Integrate Auth0 in your Application

Configure Android

In the file android/app/src/main/AndroidManifest.xml you must make sure the MainActivity of the app has a launchMode value of singleTask and that it has 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="YOUR_AUTH0_DOMAIN"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" />
</intent-filter>

So your MainActivity should look like this:

<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:launchMode="singleTask"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</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="YOUR_AUTH0_DOMAIN"
        android:pathPrefix="/android/${applicationId}/callback"
        android:scheme="${applicationId}" />
</intent-filter>
</activity>

Configure iOS

In the file ios/<YOUR PROJECT>/AppDelegate.m add the following:

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  return [RCTLinkingManager application:application openURL:url
                      sourceApplication:sourceApplication annotation:annotation];
}

Next you will need to add a URLScheme using your App's bundle identifier.

Inside the ios folder open the Info.plist and locate the value for CFBundleIdentifier

<key>CFBundleIdentifier</key>
<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>

and then register a URL type entry using the value of CFBundleIdentifier as the value for the CFBundleURLSchemes

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>None</string>
        <key>CFBundleURLName</key>
        <string>auth0</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
        </array>
    </dict>
</array>

The value org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) is the default for apps created with React Native CLI, you may have a different value.

Add Authentication with Auth0

Universal login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security and the fullest array of features.

You can also embed login functionality directly in your application. If you use this method, some features, such as single sign-on, will not be accessible. To learn how to embed functionality using a custom login form in your application, follow the Custom Login Form Sample. Make sure you read the Browser-Based vs. Native Login Flows on Mobile Devices article to learn how to choose between the two types of login flows.

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

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

Then present the hosted login screen, like this:

auth0
    .webAuth
    .authorize({scope: 'openid profile email', audience: 'https://YOUR_AUTH0_DOMAIN/userinfo'})
    .then(credentials =>
      console.log(credentials)
      // Successfully authenticated
      // Store the accessToken
    )
    .catch(error => console.log(error));

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

For more information on the accessToken, refer to Access Token.

Use Auth0 for FREECreate free Account