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

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

{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. If you open the project in Xcode you will find this under the General tab in your Projects target settings.

Android

{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. Take note of this URL as it's also defined in the AndroidManifest.xml file.

Install

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.

react-native link react-native-auth0

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

Native configuration

Auth0 will need to handle the callback of the hosted login authentication.

Android

In the file android/app/src/main/AndroidManifest.xml you must make sure the main activity of the app has launchMode value of singleTask and that it has the following intent filter.

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

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.

Check the info.plist for the existing bundle identifier e.g.

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

You can then register the identifier by adding the following snippet:

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

For further reference on linking, check the official documentation

Implement the login

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