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.
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.
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.
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 add react-native-auth0
npm install react-native-auth0 --save
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}"]
}
...
}
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:
ios/<YOUR PROJECT>.xcodeproj
file or run xed ios
on a Terminal from the app root.For additional information please read react native docs.
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
{PRODUCT_BUNDLE_IDENTIFIER}://YOUR_DOMAIN/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback
Remember to replace {PRODUCT_BUNDLE_IDENTIFIER}
with your actual application's bundle identifier name.
{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.
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo
query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
{PRODUCT_BUNDLE_IDENTIFIER}://YOUR_DOMAIN/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback
Remember to replace {PRODUCT_BUNDLE_IDENTIFIER}
with your actual application's bundle identifier name.
{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.
Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.
This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
Sign up for an or to your existing account to integrate directly with your own tenant.