React Native

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

System Requirements
  • React Native 0.26.0
  • NodeJS 4.3
Show requirements

This multistep quickstart guide will walk you through managing authentication in your React Native with Auth0.

About the Sample Applications

Each step within this quickstart guide (starting with Login) contains a downloadable sample which demonstrates the topic being covered. Within each of these samples, you will find an appropriate application to demonstrate the features discussed in the chapter.

Auth0 Dependencies

Each tutorial will require you to use the react-native-auth0 toolkit. This toolkit enables you to communicate efficiently with many of the Auth0 API functions and enables you to integrate the Login.

Create a Client

If you haven't already done so, create a new client application in your Auth0 dashboard and choose Native.

App Dashboard

How to Login with Auth0

Configure Callback URLs

Callback URLs are the URLs that Auth0 invokes after the authentication process. Auth0 routes your application back to this URL and appends additional parameters to it, including a token. Since callback URLs can be manipulated, you will need to add your application's URL to your client's Allowed Callback URLs for security. This will enable Auth0 to recognize these URLs as valid. If omitted, authentication will not be successful.

Go to your Client's Dashboard and make sure that Allowed Callback URLs contains the following for each platform you are supporting.

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 ths 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 ths value is:

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

Install

How to install the React Native Auth0 module.

npm

npm install react-native-auth0 --save

For more information about npm usage, check their official documentation.

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.

Hosted Login Page

Configuration

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

We recommend using the Auth0 hosted login page for the best experience, best security and the fullest array of features. This guide will use it to provide a way for your users to log in to your application.

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.

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));

This snippet sets the audience to ensure an OIDC compliant response. This can also be achieved by enabling the OIDC Conformant switch in your Auth0 dashboard, under Client > Settings > Show Advanced Settings > OAuth. For more information, refer to How to use the new flows.

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