React Native
This tutorial demonstrates how to add user login to a React Native application using Auth0. We recommend that you log in to follow this quickstart with examples configured for your account.
I want to integrate with my app
15 minutesI want to explore a sample app
2 minutesGet a sample configured with your account settings or check it out on Github.
This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, please refer to the Expo Quickstart
Configure Auth0
Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
- Domain
- Client ID
Install Dependencies
In this section, you will install the React Native Auth0 module.
Yarn
yarn add react-native-auth0
Was this helpful?
npm
npm install react-native-auth0 --save
Was this helpful?
Additional iOS step: install the module Pod
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
Was this helpful?
First, you must provide a way for your users to log in. We recommend using the Auth0 hosted login page.
![Universal Login](/docs/media/articles/native-platforms/ios-swift/login-ios.png)
Integrate Auth0 in Your Application
Configure Android
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}"]
}
...
}
Was this helpful?
Configure iOS
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];
}
Was this helpful?
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>
Was this helpful?
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>
Was this helpful?
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 runxed 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.
Configure Callback URLs
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.
iOS callback URL
{PRODUCT_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback
Was this helpful?
Remember to replace {PRODUCT_BUNDLE_IDENTIFIER}
with your actual application's bundle identifier name.
Android callback URL
{YOUR_APP_PACKAGE_NAME}://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback
Was this helpful?
Remember to replace {YOUR_APP_PACKAGE_NAME}
with your actual application's package name.
Configure Logout URLs
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.
iOS logout URL
{PRODUCT_BUNDLE_IDENTIFIER}://{yourDomain}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback
Was this helpful?
Remember to replace {PRODUCT_BUNDLE_IDENTIFIER}
with your actual application's bundle identifier name.
Android logout URL
{YOUR_APP_PACKAGE_NAME}://{yourDomain}/android/{YOUR_APP_PACKAGE_NAME}/callback
Was this helpful?
Remember to replace {YOUR_APP_PACKAGE_NAME}
with your actual application's package name.
Add login to your app
Import the useAuth0
hook and the Auth0Provider
component from the react-native-auth0
package.
import {useAuth0, Auth0Provider} from 'react-native-auth0';
Was this helpful?
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>
);
};
Was this helpful?
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" />
}
Was this helpful?
Checkpoint
Add a button component that calls authorize
when clicked. Verify that you are redirected to the login page and then back to your application.
Add logout to your app
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" />
}
Was this helpful?
Checkpoint
Add a button that calls clearSession
when clicked. Verify that you are logged out of the application when clicked.
Show user profile information
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>}
</>
)
}
Was this helpful?
Checkpoint
Add a component to your app that uses the user
prop to display information about the user on the screen.