To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.

Configure an application

Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code will use to call Auth0 APIs through the SDK.

Any settings you configure using this quickstart will automatically update for your Application in the Dashboard, which is where you can manage your Applications in the future.

If you would rather explore a complete configuration, you can view a sample application instead.

Configure Callback URLs

A callback URL is the application URL that Auth0 will direct your users to once they have authenticated. If you do not set this value, Auth0 will not return users to your application after they log in.

Configure Logout URLs

A logout URL is the application URL Auth0 will redirect your users to once they log out. If you do not set this value, users will not be able to log out from your application and will receive an error.

In this section, you will learn how to install the React Native Auth0 module.

Yarn

yarn add react-native-auth0

npm

npm install react-native-auth0 --save

Additional iOS step: install the module Pod

CocoaPods is the package management tool for iOS. The React Native framework uses CocoaPods to install itself into your project. For the iOS native module to work with your iOS app you must first install the library Pod. If you are familiar with older React Native SDK versions, this is similar to linking a native module. The process is now simplified:

Change directory into the ios folder and run pod install.

cd ios
pod install

First, you must provide a way for your users to log in. We recommend useing the Auth0 hosted login page.

Open your app's build.gradle file (typically at android/app/build.gradle) and add the following manifest placeholders. The value for auth0Domain should be populated from your Auth0 application settings as configured above.

android {
    defaultConfig {
        // Add the next line
        manifestPlaceholders = [auth0Domain: "YOUR_DOMAIN", auth0Scheme: "${applicationId}"]
    }
    ...
}

Configure iOS

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

#import <React/RCTLinkingManager.h>

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  return [RCTLinkingManager application:app openURL:url options:options];
}

Next, 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>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

Update the value for the CFBundleURLSchemes with the value CFBundleIdentifier to register a URL type entry.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>None</string>
        <key>CFBundleURLName</key>
        <string>auth0</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
        </array>
    </dict>
</array>

In a later step, you will use this value to define the callback URLs below. You can change it using XCode with the following steps:

• Open the ios/<YOUR PROJECT>.xcodeproj file or run xed ios on a Terminal from the app root.
• Open your project's or desired target's Build Settings tab and find the section that contains "Bundle Identifier".
• Replace the "Bundle Identifier" value with your desired application's bundle identifier name.

For additional information please read react native docs.

iOS callback URL

{PRODUCT_BUNDLE_IDENTIFIER}://YOUR_DOMAIN/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback

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

Android callback URL

{YOUR_APP_PACKAGE_NAME}://YOUR_DOMAIN/android/{YOUR_APP_PACKAGE_NAME}/callback

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

iOS logout URL

{PRODUCT_BUNDLE_IDENTIFIER}://YOUR_DOMAIN/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback

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

Android logout URL

{YOUR_APP_PACKAGE_NAME}://YOUR_DOMAIN/android/{YOUR_APP_PACKAGE_NAME}/callback

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

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.

Upon successful authentication, Auth0 returns the user's credentials, containing an access_token, an id_token and an expires_in value.

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.