Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const sections = [{
id: "configure-auth0",
title: "Configure Auth0"
}, {
id: "install-dependencies",
title: "Install dependencies"
}, {
id: "setup-auth0-config-plugin",
title: "Setup Auth0 Config Plugin"
}, {
id: "generate-native-source-code",
title: "Generate Native Source Code"
}, {
id: "configure-the-auth0provider-component",
title: "Configure the Auth0Provider component"
}, {
id: "add-login-to-your-application",
title: "Add login to your application"
}, {
id: "add-logout-to-your-application",
title: "Add logout to your application"
}, {
id: "show-user-profile-information",
title: "Show user profile information"
}];
This Quickstart is for the Expo framework. To integrate Auth0 into your React Native application, please refer to
the React Native Quickstart.
This SDK is not compatible with "Expo Go" app. It is compatible only with Custom Dev Client and EAS
builds.
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](https://manage.auth0.com/), 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 and logout URLs
Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback
URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the
callback and logout URLs, users will not be able to log in and out of the app, and your application will produce
an error.
Add the corresponding URL to **Callback URLs** and **Logout URLs**, according to your app's platform. If
you are using a custom domain, use the value of your custom
domain instead of your Auth0 tenant’s domain.
#### iOS
```
BUNDLE_IDENTIFIER.auth0://dev-gja8kxz4ndtex3rq.us.auth0.com/ios/BUNDLE_IDENTIFIER/callback
```
#### Android
```
PACKAGE_NAME.auth0://dev-gja8kxz4ndtex3rq.us.auth0.com/android/PACKAGE_NAME/callback
```
If you are following along with our sample project, use the following value:
* iOS: `com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback`
* Android: `com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback`
In this section, you will learn how to install the React Native Auth0 module.
Please refer to the [official documentation](https://facebook.github.io/react-native/) for additional details on React Native.
### Yarn
```bash
yarn add react-native-auth0
```
For further reference on `yarn`, check their [official documentation](https://yarnpkg.com/en/docs).
### npm
```bash
npm install react-native-auth0 --save
```
The Auth0 package runs custom native code that must be configured at build time. Use [Expo Config
Plugin](https://docs.expo.dev/guides/config-plugins/) to achieve this.
The `react-native-auth0` plugin will be added in the [Expo config](https://docs.expo.dev/workflow/configuration/).
You must generate the native code for the above configuration to be set. To do this, run the following command:
```bash
expo prebuild
```
You will be prompted to provide the [Android package](https://github.com/expo/fyi/blob/main/android-package.md) and [iOS
bundle identifier](https://github.com/expo/fyi/blob/main/bundle-identifier.md) if they are not already present in the Expo config.
```bash
? What would you like your Android package name to be? > com.auth0samples # or your desired package name
? What would you like your iOS bundle identifier to be? > com.auth0samples # or your desired bundle identifier
```
These values are used to set the callback and logout URLs.
The `useAuth0` hook relies on a React Context to provide state management. This context is provided by
the `Auth0Provider` component.
Import the `useAuth0` hook and `Auth0Provider` component from the
`react-native-auth0` package:
```jsx lines
import {useAuth0, Auth0Provider} from 'react-native-auth0';
```
For the SDK to function properly, you must wrap your application in the `Auth0Provider` component, and
set the following properties:
* `domain`: The domain of your Auth0 tenant. Generally, you can find this in the Auth0 Dashboard
under your Application's **Settings** in the **Domain** field. If you are using a custom domain, you should set this to the value of your
custom domain instead.
* `clientId`: The client ID of the Auth0 Application you set up earlier in this quickstart. You can
find this in the Auth0 Dashboard under your Application's **Settings** in the **Client ID** field.
##### Checkpoint
Your `Auth0Provider` component should now be properly configured. Run your application to
verify that:
* the SDK is initializing correctly
* your application is not throwing any errors related to Auth0
Authenticate the user by calling the `authorize` method provided by the `useAuth0` hook.
This redirects the user to the Auth0 Universal Login page
for authentication, then back to your app.
For confirmation that the user was logged in successfully, check that the `user` property provided by
the hook is not `null`.
##### 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.
To log the user out, redirect them to the Auth0 logout endpoint by calling `clearSession`. This will
remove their session from the authorization server and log the user out of the application.
##### Checkpoint
Add a logout button that calls `clearSession` and observe that you are redirected to the Auth0
logout endpoint and back again. You should no longer be logged in to your application.
The `useAuth0` hook exposes a `user` object that contains information about the
authenticated user. You can use this to access user profile information about the authenticated user that has been
decoded from the [ID token](https://auth0.com/docs/secure/tokens/id-tokens).
If a user has not been authenticated, this property will be `null`.
##### Checkpoint
Log in and inspect the `user` property on the result. Verify the current user's profile
information, such as `email` or `name`.
## Next Steps
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:
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Learn how to configure and manage your Auth0 tenant and applications
* [react-native-auth0 SDK](https://github.com/auth0/react-native-auth0) - Explore the SDK used in this tutorial more fully
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality
```jsx App.js lines
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx App.js lines highlight={31-36}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx App.js lines highlight={46-48}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx App.js lines highlight={8-14}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx App.js lines highlight={16-22}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
```jsx App.js lines highlight={32-34}
import {useAuth0, Auth0Provider} from 'react-native-auth0';
const Home = () => {
const {authorize, clearSession, user, error, isLoading} = useAuth0();
const onLogin = async () => {
try {
await authorize();
} catch (e) {
console.log(e);
}
};
const onLogout = async () => {
try {
await clearSession();
} catch (e) {
console.log('Log out cancelled');
}
};
if (isLoading) {
return Loading;
}
const loggedIn = user !== undefined && user !== null;
return (
{loggedIn && You are logged in as {user.name}}
{!loggedIn && You are not logged in}
{error && {error.message}}
);
};
const App = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
export default App;
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.