From 167595d398aa268278fa3e5eac8cf944aed18a23 Mon Sep 17 00:00:00 2001 From: Subhankar Maiti Date: Thu, 8 Jan 2026 10:12:26 +0530 Subject: [PATCH 1/2] updated react native quickstart --- main/docs.json | 2 +- .../quickstart/native/react-native/_index.mdx | 346 ------ .../quickstart/native/react-native/index.mdx | 1003 +++++++++++------ .../native/react-native/interactive.mdx | 375 ------ 4 files changed, 687 insertions(+), 1039 deletions(-) delete mode 100644 main/docs/quickstart/native/react-native/_index.mdx delete mode 100644 main/docs/quickstart/native/react-native/interactive.mdx diff --git a/main/docs.json b/main/docs.json index b92800a61d..5aba0740c3 100644 --- a/main/docs.json +++ b/main/docs.json @@ -2412,7 +2412,7 @@ "docs/quickstart/native/ios-swift/index", "docs/quickstart/native/android/index", "docs/quickstart/native/android-facebook-login/interactive", - "docs/quickstart/native/react-native/interactive", + "docs/quickstart/native/react-native/index", "docs/quickstart/native/react-native-expo/interactive", "docs/quickstart/native/flutter/interactive", "docs/quickstart/native/net-android-ios/interactive", diff --git a/main/docs/quickstart/native/react-native/_index.mdx b/main/docs/quickstart/native/react-native/_index.mdx deleted file mode 100644 index 2d81712a0c..0000000000 --- a/main/docs/quickstart/native/react-native/_index.mdx +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: Add Login to Your React Native Application -sidebarTitle: React Native - ---- -import { Recipe, Content, Section, SideMenu, SideMenuSectionItem, SignUpForm } from "/snippets/recipe.jsx"; -import { LoggedInForm } from "/snippets/Login.jsx"; -import App from "/snippets/quickstart/native/react-native/app.js.mdx"; -import App2 from "/snippets/quickstart/native/react-native/app.js2.mdx"; -import App3 from "/snippets/quickstart/native/react-native/app.js3.mdx"; -import App4 from "/snippets/quickstart/native/react-native/app.js4.mdx"; - -export const sections = [ - { id: "configure-auth0", title: "Configure Auth0" }, - { id: "install-dependencies", title: "Install dependencies" }, - { id: "integrate-auth0-in-your-application", title: "Integrate Auth0 in your application" }, - { 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 React Native framework. To integrate Auth0 into your Expo application, refer to the [Expo Quickstart](https://auth0.com/docs/quickstart/native/react-native-expo/interactive). - -
- To use Auth0 services, you must 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. - - To explore a complete configuration, review the sample application in your Dashboard. - - ### 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://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback - ``` - - - #### Android - - ``` - PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback - ``` - - - - If you are following along with our sample project, set the following for: - - - **iOS**: - `com.auth0samples.auth0://labs-fundtraining.us.auth0.com/ios/com.auth0samples/callback` - - **Android**: - `com.auth0samples.auth0://labs-fundtraining.us.auth0.com/android/com.auth0samples/callback` - - - -
- -
- In this section, you will install the React Native Auth0 module. - - - Refer to the [official documentation](https://facebook.github.io/react-native/) for additional details on React Native. - - - ### Yarn - - ``` - yarn add react-native-auth0 - ``` - - - For further reference on yarn, check [their official documentation](https://yarnpkg.com/en/docs). - - - ### npm - - ``` - npm install react-native-auth0 --save - ``` - - - ### Additional iOS step: install the module Pod - - Our SDK requires a minimum iOS deployment target of 13.0. In your project's `ios/Podfile``, ensure your platform - target is set to 13.0. - - ``` - platform :ios '13.0' - ``` - - - 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. - - - - - - ### Configure Android - - Open the `build.gradle` file in your application directory (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. - - ```groovy lines - android { - defaultConfig { - - // Add the next line - - manifestPlaceholders = [auth0Domain: "{yourDomain}", auth0Scheme: "${applicationId}.auth0"] - - } - - ... - - } - ``` - - - - At runtime, the `applicationId` value will automatically update with your application's - package name or ID (e.g. `com.example.app`). You can change this value from the - `build.gradle` file. You can also check it at the top of your - `AndroidManifest.xml` file. - - - ### Configure iOS - - #### AppDelegate Setup (Choose Based on Architecture) - - If you're using (Swift - `ios//AppDelegat.swift`) add the following in - `AppDelegate` class: - - ```text lines - func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { - return RCTLinkingManager.application(app, open: url, options: options) - } - ``` - - - If you're using (Objective-C++ - `ios//AppDelegate.mm`) add the following: - - ```text lines - #import - - - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url - options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options - - - - { - return [RCTLinkingManager application:app openURL:url options:options]; - } - ``` - - - - This file will be `ios//AppDelegate.m` on applications using the [old architecture](https://reactnative.dev/docs/next/new-architecture-app-intro#ios---use-objective-c-mm-extension). - - - Next, add a URLScheme using your App's bundle identifier. - - In the `ios` folder, open the `Info.plist` and locate the value for - `CFBundleIdentifier`. - - ```xml lines - CFBundleIdentifier - $(PRODUCT_BUNDLE_IDENTIFIER) - ``` - - - Below this value, register a URL type entry using the value of `CFBundleIdentifier` as the value for - the `CFBundleURLSchemes`. - - ```xml lines - CFBundleURLTypes - - - CFBundleTypeRole - None - CFBundleURLName - auth0 - CFBundleURLSchemes - - $(PRODUCT_BUNDLE_IDENTIFIER).auth0 - - - - ``` - - - - If your application was generated using the React Native CLI, the default value of - `$(PRODUCT_BUNDLE_IDENTIFIER)` dynamically matches - `org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)`. For the sample app, this - value matches `com.auth0samples`. - - - 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/.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](https://facebook.github.io/react-native/docs/linking). - - -
- -
- The `useAuth0` hook relies on a React Context to provide state management. The - `Auth0Provider` component provides this context. - - 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 correctly, 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 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 tab in the Client ID field. - - - ##### Checkpoint - - You just configured the `Auth0Provider` component. 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 method redirects the user to the Auth0 Universal - Login page for authentication, then back to your app. - - To confirm the user successfully logged in, 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 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 decoded user profile information about the authenticated user from - the ID token. - - 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 - - - - - diff --git a/main/docs/quickstart/native/react-native/index.mdx b/main/docs/quickstart/native/react-native/index.mdx index ceb9a5da9a..ac0d22a8df 100644 --- a/main/docs/quickstart/native/react-native/index.mdx +++ b/main/docs/quickstart/native/react-native/index.mdx @@ -1,378 +1,747 @@ --- -title: "React Native" -permalink: "00-login" +mode: wide +'og:description': This guide demonstrates how to integrate Auth0 with any React Native + app using the Auth0 React Native SDK. +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': 'Auth0 React Native SDK Quickstarts: Add Login to Your React Native Application' +'og:url': https://auth0.com/docs/ +sidebarTitle: React Native +title: Add Login to Your React Native Application +'twitter:description': This guide demonstrates how to integrate Auth0 with any React Native + app using the Auth0 React Native SDK. +'twitter:title': 'Auth0 React Native SDK Quickstarts: Add Login to Your React Native Application' --- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; + + This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the [Expo Quickstart](https://auth0.com/docs/quickstart/native/react-native-expo/interactive). + -##### By Steve Hobbs +## Get Started -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. -{/* -System requirements: React Native 0.62.2 | NodeJS 10.16 - */} -This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, please refer to the [Expo Quickstart](https://auth0.com/docs/quickstart/native/react-native-expo/interactive) + + + Create a new React Native project for this quickstart. - -**New to Auth?** Learn [How Auth0 works](/docs/get-started/auth0-overview), how it [integrates with Native Applications](/docs/get-started/architecture-scenarios/mobile-api) and which [protocol](/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce) it uses. - + **In your terminal:** -## Configure Auth0 + ```bash + npx @react-native-community/cli init Auth0ReactNativeSample + cd Auth0ReactNativeSample + ``` -### Get Your Application Keys + Configure your project with: + * **Name**: `Auth0ReactNativeSample` + * **Package name**: `com.auth0.samples.reactnative` -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](https://manage.auth0.com/#/applications) section in the Auth0 dashboard. + + This creates a React Native app with the latest stable version. The Auth0 SDK requires React Native 0.78.0+ and React 19.0.0+. + + -![App Dashboard](https://cdn2.auth0.com/docs/1.14550.0/media/articles/dashboard/client_settings.png) + + Add the Auth0 React Native SDK to your project. - -When using the Default App with a Native or Single Page Application, ensure to update the **Token Endpoint Authentication Method** to `None` and set the **Application Type** to either `SPA` or `Native`. - + ```bash + npm install react-native-auth0 + ``` -You need the following information: + For iOS, install the native dependencies: -* **Domain** -* **Client ID** + ```bash + cd ios && pod install && cd .. + ``` - -If you download the sample from the top of this page, these details are filled out for you. - + + The SDK auto-links on both platforms. The `pod install` step installs the required iOS native modules (Auth0.swift, JWTDecode, SimpleKeychain). + + -## Install Dependencies + + Create and configure an Auth0 application to work with your React Native app. -In this section, you will install the React Native Auth0 module. + 1. Head to the [Auth0 Dashboard](https://manage.auth0.com/dashboard/) + 2. Click on **Applications** > **Applications** > **Create Application** + 3. In the popup, enter a name for your app (e.g., `Auth0 React Native Sample`), select `Native` as the app type and click **Create** + 4. Switch to the **Settings** tab on the Application Details page + 5. Note your **Domain** and **Client ID** values - -Please refer to the [official documentation](https://facebook.github.io/react-native/) for additional details on React Native. - + **Allowed Callback URLs:** + ``` + com.auth0.samples.reactnative.auth0://{yourDomain}/ios/com.auth0.samples.reactnative/callback, + com.auth0.samples.reactnative.auth0://{yourDomain}/android/com.auth0.samples.reactnative/callback + ``` -### Yarn + **Allowed Logout URLs:** + ``` + com.auth0.samples.reactnative.auth0://{yourDomain}/ios/com.auth0.samples.reactnative/callback, + com.auth0.samples.reactnative.auth0://{yourDomain}/android/com.auth0.samples.reactnative/callback + ``` -```bash lines -yarn add react-native-auth0 -``` + Replace `{yourDomain}` with your actual Auth0 domain (e.g., `dev-abc123.us.auth0.com`). + + **Allowed Callback URLs** are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail, and users will be blocked by an Auth0 error page instead of accessing your app. + **Allowed Logout URLs** are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout and will instead be left on a generic Auth0 page. + The URL scheme includes `.auth0` after your bundle identifier to ensure the callback is routed to your specific app. + + + **Important**: The callback URL scheme must include `.auth0` after your bundle identifier (e.g., `com.auth0.samples.reactnative.auth0://`). This is required for the SDK to properly handle the authentication callback. + + - -For further reference on yarn, check [their official documentation](https://yarnpkg.com/en/docs). - + + Configure both iOS and Android to handle the authentication callback. -### npm + **Android Configuration:** -```bash lines -npm install react-native-auth0 --save -``` + Open `android/app/build.gradle` and add the manifest placeholders inside `defaultConfig`: - - - - - -### Additional iOS step: install the module Pod - -Our SDK requires a minimum iOS deployment target of 13.0. In your project's `ios/Podfile``, ensure your platform target is set to 13.0. - -```bash lines -platform :ios '13.0' -``` - - - - - - -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`. - -```bash lines -cd ios -pod install -``` - - - - - - -First, you must provide a way for your users to log in. We recommend using the Auth0 hosted [login page](/docs/authenticate/login/auth0-universal-login). - -![Universal Login](https://cdn2.auth0.com/docs/1.14550.0/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](#get-your-application-keys). - -export const codeExample1 = `android { - defaultConfig { - // Add the next line - manifestPlaceholders = [auth0Domain: "{yourDomain}", auth0Scheme: "\${applicationId}.auth0"] + ```groovy android/app/build.gradle lines + android { + defaultConfig { + applicationId "com.auth0.samples.reactnative" + // ... other config + + // Add Auth0 manifest placeholders + manifestPlaceholders = [ + auth0Domain: "{yourDomain}", + auth0Scheme: "${applicationId}.auth0" + ] + } } - ... -}`; - - - - - - - - -At runtime, the `applicationId` value will automatically update with your application's package name or ID (e.g. `com.example.app`). You can change this value from the `build.gradle` file. You can also check it at the top of your `AndroidManifest.xml` file. - - -### Configure iOS - -#### AppDelegate Setup (Choose Based on Architecture) - -If you're using (Swift - `ios//AppDelegat.swift`) add the following in `AppDelegate` class: - -```js lines -func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { - return RCTLinkingManager.application(app, open: url, options: options) -} -``` - - - - - - -If you're using (Objective-C++ - `ios//AppDelegate.mm`) add the following: - -```h lines -#import - -- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url - options:(NSDictionary *)options -{ - return [RCTLinkingManager application:app openURL:url options:options]; -} -``` - - - - - - -This file will be `ios//AppDelegate.m` on applications using the [old architecture](https://reactnative.dev/docs/next/new-architecture-app-intro#ios---use-objective-c-mm-extension). - - -Next, add a URLScheme using your App's bundle identifier. - -In the `ios` folder, open the `Info.plist` and locate the value for `CFBundleIdentifier` - -```xml lines -CFBundleIdentifier -$(PRODUCT_BUNDLE_IDENTIFIER) -``` + ``` + Replace `{yourDomain}` with your Auth0 domain (e.g., `dev-abc123.us.auth0.com`). + **iOS Configuration:** + Open `ios/Auth0ReactNativeSample/AppDelegate.mm` and add the URL handling method: + ```objc ios/Auth0ReactNativeSample/AppDelegate.mm lines + #import + // Add this method inside the @implementation block + - (BOOL)application:(UIApplication *)app + openURL:(NSURL *)url + options:(NSDictionary *)options + { + return [RCTLinkingManager application:app openURL:url options:options]; + } + ``` -Below this value, register a URL type entry using the value of `CFBundleIdentifier` as the value for the `CFBundleURLSchemes`. + Open `ios/Auth0ReactNativeSample/Info.plist` and add the URL scheme. Add this before the closing `` tag: -```xml lines -CFBundleURLTypes - - + ```xml ios/Auth0ReactNativeSample/Info.plist lines + CFBundleURLTypes + + CFBundleTypeRole None CFBundleURLName auth0 CFBundleURLSchemes - $(PRODUCT_BUNDLE_IDENTIFIER).auth0 + $(PRODUCT_BUNDLE_IDENTIFIER).auth0 - - -``` - - - - - - -If your application was generated using the React Native CLI, the default value of `$(PRODUCT_BUNDLE_IDENTIFIER)` dynamically matches `org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)`. For the sample app, this value matches `com.auth0samples`. - - -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/.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](https://facebook.github.io/react-native/docs/linking). - -### Configure Callback and Logout URLs - -The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your application. Auth0 invokes the callback URL after authenticating the user, and the logout URL after removing the session cookie. - -If the callback and logout URLs are not set, users will be unable to log in and out of the application and will get an error. - -Go to the settings page of your [Auth0 application](https://manage.auth0.com/#/applications/{yourClientId}/settings) and add the corresponding URL to **Allowed Callback URLs** and **Allowed Logout URLs**, according to the platform of your application. If you are using a [custom domain](/docs/customize/custom-domains), use the value of your custom domain instead of the Auth0 domain from the settings page. - -#### iOS - -``` -BUNDLE_IDENTIFIER.auth0://{yourDomain}/ios/BUNDLE_IDENTIFIER/callback -``` - - - - - - -#### Android - -``` -PACKAGE_NAME.auth0://{yourDomain}/android/PACKAGE_NAME/callback -``` - - - - - - -If you are following along with our sample project, set this - -* for iOS - `com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback` -* for Android - `com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback` - - -## Add login to your app - -Import the `useAuth0` hook and the `Auth0Provider` component from the `react-native-auth0` package. - -```js lines -import {useAuth0, Auth0Provider} from 'react-native-auth0'; -``` - - - - - - -Next, wrap your application in the `Auth0Provider` component, providing your Auth0 domain and Client ID values: - -export const codeExample2 = `const App = () => { - return ( - - {/* your application */} - - ); -};`; - - - - - - - - -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: - -```javascript lines -const LoginButton = () => { - const {authorize} = useAuth0(); - - const onPress = async () => { - try { - await authorize(); - } catch (e) { - console.log(e); + + + ``` + + + The URL scheme uses your bundle identifier with `.auth0` appended. This ensures the callback is routed to your specific app after authentication completes in the browser. + + + + + Setup your main app component based on your chosen implementation approach. + + + + Replace the contents of `App.tsx` and wrap your application with the `Auth0Provider` component: + + ```tsx App.tsx lines + import React from 'react'; + import {Auth0Provider} from 'react-native-auth0'; + import {SafeAreaView, StyleSheet} from 'react-native'; + import MainScreen from './src/MainScreen'; + + const App = () => { + return ( + + + + + + ); + }; + + const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + }, + }); + + export default App; + ``` + + Replace `{yourDomain}` with your Auth0 domain and `{yourClientId}` with your Client ID from the Auth0 Dashboard. + + + The `Auth0Provider` initializes the SDK and provides authentication context to all child components via the `useAuth0` hook. + + + + + Replace the contents of `App.tsx` with a simple container for your class-based component: + + ```tsx App.tsx lines + import React from 'react'; + import {SafeAreaView, StyleSheet} from 'react-native'; + import MainScreen from './src/MainScreen'; + + const App = () => { + return ( + + + + ); + }; + + const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + }, + }); + + export default App; + ``` + + + The class-based approach doesn't require the `Auth0Provider` since it uses the `Auth0` class instance directly. The Auth0 configuration will be in the MainScreen component. + + + + + + + Create a screen component that handles login and logout. You can choose between a hooks-based approach (recommended) or a class-based approach. + + + + Create `src/MainScreen.tsx` using the `useAuth0` hook: + + ```tsx src/MainScreen.tsx lines + import React from 'react'; + import { + View, + Text, + Button, + StyleSheet, + ActivityIndicator, + Image, + } from 'react-native'; + import {useAuth0} from 'react-native-auth0'; + + const MainScreen = () => { + const {authorize, clearSession, user, isLoading} = useAuth0(); + + const login = async () => { + try { + await authorize({scope: 'openid profile email'}); + } catch (e) { + console.error(e); + } + }; + + const logout = async () => { + try { + await clearSession(); + } catch (e) { + console.error(e); + } + }; + + if (isLoading) { + return ( + + + Loading... + + ); + } + + return ( + + Auth0 React Native + + {user ? ( + + {user.picture && ( + + )} + Welcome, {user.name}! + {user.email} + +