React Native

This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, please refer to the Expo Quickstart

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

yarn add react-native-auth0

npm install react-native-auth0 --save

CocoaPods is the iOS package management tool the React Native framework uses to install itself into your project. For the iOS native module to work with your iOS app, first install the library Pod. If you're familiar with older React Native SDK versions, this is similar to the previous 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 using 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 contain your Auth0 application settings as configured above.

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

In the file ios/<YOUR PROJECT>/AppDelegate.mm 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.

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

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

Below this value, 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>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
        </array>
    </dict>
</array>

Note this value as you'll be using it to define the callback URLs below. If desired, you can change it using XCode in the following way:

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

{PRODUCT_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback

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

{YOUR_APP_PACKAGE_NAME}://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback

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

{PRODUCT_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback

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

{YOUR_APP_PACKAGE_NAME}://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback

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

Import the useAuth0 hook and the Auth0Provider component from the react-native-auth0 package.

import {useAuth0, Auth0Provider} from 'react-native-auth0';

Next, wrap your application in the Auth0Provider component, providing your Auth0 domain and Client ID values:

const App = () => {
  return (
    <Auth0Provider domain={"{yourDomain}"} clientId={"{yourClientId}"}>
      {/* your application */}
    </Auth0Provider>
  );
};

Finally, present the hosted login screen using the authorize method from the useAuth0 hook. See this usage example showing logging in on a button click:

const LoginButton = () => {
    const {authorize} = useAuth0();

    const onPress = async () => {
        try {
            await authorize();
        } catch (e) {
            console.log(e);
        }
    };

    return <Button onPress={onPress} title="Log in" />
}

To log the user out, redirect them to the Auth0 log out endpoint by importing and calling the clearSession method from the useAuth0 hook. This method removes their session from the authorization server.

See this usage example of a button that logs the user out of the app when clicked:

const LogoutButton = () => {
    const {clearSession} = useAuth0();

    const onPress = async () => {
        try {
            await clearSession();
        } catch (e) {
            console.log(e);
        }
    };

    return <Button onPress={onPress} title="Log out" />
}

The useAuth0 hook exposes a user object that contains information about the authenticated user. You can use this to access decoded user profile information about the authenticated user from the ID token.

If a user has not been authenticated, this property will be null.

const Profile = () => {
    const {user} = useAuth0();

    return (
        <>
            {user && <Text>Logged in as {user.name}</Text>}
            {!user && <Text>Not logged in</Text>}
        </>
    )
}