From 303ce480653a4f135b944cb2a7cf50f593b93619 Mon Sep 17 00:00:00 2001 From: Steve Hobbs Date: Fri, 30 Jun 2023 11:30:34 +0100 Subject: [PATCH 1/6] docs(react-native): use new callback URLs --- articles/quickstart/native/react-native/00-login.md | 8 ++++---- articles/quickstart/native/react-native/files/app.md | 4 +++- .../quickstart/native/react-native/interactive.md | 11 ++++++----- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/articles/quickstart/native/react-native/00-login.md b/articles/quickstart/native/react-native/00-login.md index b074f3cbf2..9f5222beb7 100644 --- a/articles/quickstart/native/react-native/00-login.md +++ b/articles/quickstart/native/react-native/00-login.md @@ -139,7 +139,7 @@ For additional information please read [react native docs](https://facebook.gith #### iOS callback URL ```text -{PRODUCT_BUNDLE_IDENTIFIER}://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback +{PRODUCT_BUNDLE_IDENTIFIER}.auth0://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback ``` Remember to replace `{PRODUCT_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. @@ -147,7 +147,7 @@ Remember to replace `{PRODUCT_BUNDLE_IDENTIFIER}` with your actual application's #### Android callback URL ```text -{YOUR_APP_PACKAGE_NAME}://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback +{YOUR_APP_PACKAGE_NAME}.auth0://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback ``` Remember to replace `{YOUR_APP_PACKAGE_NAME}` with your actual application's package name. @@ -157,7 +157,7 @@ Remember to replace `{YOUR_APP_PACKAGE_NAME}` with your actual application's pac #### iOS logout URL ```text -{PRODUCT_BUNDLE_IDENTIFIER}://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback +{PRODUCT_BUNDLE_IDENTIFIER}.auth0://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback ``` Remember to replace `{PRODUCT_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. @@ -165,7 +165,7 @@ Remember to replace `{PRODUCT_BUNDLE_IDENTIFIER}` with your actual application's #### Android logout URL ```text -{YOUR_APP_PACKAGE_NAME}://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback +{YOUR_APP_PACKAGE_NAME}.auth0://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback ``` Remember to replace `{YOUR_APP_PACKAGE_NAME}` with your actual application's package name. diff --git a/articles/quickstart/native/react-native/files/app.md b/articles/quickstart/native/react-native/files/app.md index c60570615c..60f211185f 100644 --- a/articles/quickstart/native/react-native/files/app.md +++ b/articles/quickstart/native/react-native/files/app.md @@ -3,6 +3,8 @@ name: app.js language: javascript --- + + ```javascript import React from 'react'; import {Button, Text, View} from 'react-native'; @@ -13,7 +15,7 @@ const Home = () => { const onLogin = async () => { try { - await authorize({scope: 'openid profile email'}); + await authorize(); } catch (e) { console.log(e); } diff --git a/articles/quickstart/native/react-native/interactive.md b/articles/quickstart/native/react-native/interactive.md index ceb8ff1ef4..ac5fdb4842 100644 --- a/articles/quickstart/native/react-native/interactive.md +++ b/articles/quickstart/native/react-native/interactive.md @@ -15,7 +15,7 @@ topics: # Add Login to your React Native App - + 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) @@ -37,18 +37,19 @@ A callback URL is the application URL that Auth0 will direct your users to once ::: note If you are following along with our sample project, set this -- for iOS - `{PRODUCT_BUNDLE_IDENTIFIER}://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback` -- for Android - `{YOUR_APP_PACKAGE_NAME}://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback` +- for iOS - `{PRODUCT_BUNDLE_IDENTIFIER}.auth0://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback` +- for Android - `{YOUR_APP_PACKAGE_NAME}.auth0://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback` ::: + ### Configure Logout URLs 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. ::: note If you are following along with our sample project, set this -- for iOS - `{PRODUCT_BUNDLE_IDENTIFIER}://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback` -- for Android - `{YOUR_APP_PACKAGE_NAME}://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback` +- for iOS - `{PRODUCT_BUNDLE_IDENTIFIER}.auth0://${account.namespace}/ios/{PRODUCT_BUNDLE_IDENTIFIER}/callback` +- for Android - `{YOUR_APP_PACKAGE_NAME}.auth0://${account.namespace}/android/{YOUR_APP_PACKAGE_NAME}/callback` ::: ## Install dependencies From c8c78929f2c7948b5883c837d6a06260e2c88598 Mon Sep 17 00:00:00 2001 From: Steve Hobbs Date: Fri, 30 Jun 2023 11:46:01 +0100 Subject: [PATCH 2/6] docs(react-native-expo): use new callback URLs --- .../native/react-native-expo/00-login.md | 19 +++++++------------ .../react-native-expo/files/app-json.md | 1 - .../native/react-native-expo/files/app.md | 4 ++-- .../native/react-native-expo/interactive.md | 8 ++++---- 4 files changed, 13 insertions(+), 19 deletions(-) diff --git a/articles/quickstart/native/react-native-expo/00-login.md b/articles/quickstart/native/react-native-expo/00-login.md index 729420b8ab..173f6a9650 100644 --- a/articles/quickstart/native/react-native-expo/00-login.md +++ b/articles/quickstart/native/react-native-expo/00-login.md @@ -66,8 +66,7 @@ Add the `react-native-auth0` plugin to the [Expo config](https://docs.expo.dev/w [ "react-native-auth0", { - "domain": "${account.namespace}", - "customScheme": "YOUR_CUSTOM_SCHEME" + "domain": "${account.namespace}" } ] ] @@ -75,10 +74,6 @@ Add the `react-native-auth0` plugin to the [Expo config](https://docs.expo.dev/w } ``` -::: note -The custom scheme should be a unique, all lowercase value with no special characters. -::: - ### Generate native source code You must generate the native code for the above configuration to be set. To do this, run the following command: @@ -115,7 +110,7 @@ These values are found in the Expo config file at `app.json` or `app.config.js`. #### iOS callback URL ```text -{YOUR_CUSTOM_SCHEME}://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback +{YOUR_CUSTOM_SCHEME}.auth0://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback ``` Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. @@ -123,7 +118,7 @@ Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bun #### Android callback URL ```text -{YOUR_CUSTOM_SCHEME}://${account.namespace}/android/{ANDROID_PACKAGE}/callback +{YOUR_CUSTOM_SCHEME}.auth0://${account.namespace}/android/{ANDROID_PACKAGE}/callback ``` Remember to replace `{ANDROID_PACKAGE}` with your actual application's package name. @@ -133,7 +128,7 @@ Remember to replace `{ANDROID_PACKAGE}` with your actual application's package n #### iOS logout URL ```text -{YOUR_CUSTOM_SCHEME}://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback +{YOUR_CUSTOM_SCHEME}.auth0://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback ``` Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. @@ -141,7 +136,7 @@ Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bun #### Android logout URL ```text -{YOUR_CUSTOM_SCHEME}://${account.namespace}/android/{ANDROID_PACKAGE}/callback +{YOUR_CUSTOM_SCHEME}.auth0://${account.namespace}/android/{ANDROID_PACKAGE}/callback ``` Remember to replace `{ANDROID_PACKAGE}` with your actual application's package name. @@ -174,7 +169,7 @@ const LoginButton = () => { const onPress = async () => { try { - await authorize({scope: 'openid profile email'}, {customScheme: '{YOUR_CUSTOM_SCHEME}'}); + await authorize(); } catch (e) { console.log(e); } @@ -200,7 +195,7 @@ const LogoutButton = () => { const onPress = async () => { try { - await clearSession({customScheme: '{YOUR_CUSTOM_SCHEME}'}); + await clearSession(); } catch (e) { console.log(e); } diff --git a/articles/quickstart/native/react-native-expo/files/app-json.md b/articles/quickstart/native/react-native-expo/files/app-json.md index 79f714e005..153a08b18e 100644 --- a/articles/quickstart/native/react-native-expo/files/app-json.md +++ b/articles/quickstart/native/react-native-expo/files/app-json.md @@ -17,7 +17,6 @@ language: json "react-native-auth0", { "domain": "${account.namespace}", - "customScheme": "auth0.com.auth0samples" } ] ], diff --git a/articles/quickstart/native/react-native-expo/files/app.md b/articles/quickstart/native/react-native-expo/files/app.md index 67493a5f54..2a173f3a2b 100644 --- a/articles/quickstart/native/react-native-expo/files/app.md +++ b/articles/quickstart/native/react-native-expo/files/app.md @@ -13,7 +13,7 @@ const Home = () => { const onLogin = async () => { try { - await authorize({scope: 'openid profile email'}, {customScheme: 'auth0.com.auth0samples'}); + await authorize(); } catch (e) { console.log(e); } @@ -21,7 +21,7 @@ const Home = () => { const onLogout = async () => { try { - await clearSession({customScheme: 'auth0.com.auth0samples'}); + await clearSession(); } catch (e) { console.log('Log out cancelled'); } diff --git a/articles/quickstart/native/react-native-expo/interactive.md b/articles/quickstart/native/react-native-expo/interactive.md index 84ded0ce91..94b5cfb668 100644 --- a/articles/quickstart/native/react-native-expo/interactive.md +++ b/articles/quickstart/native/react-native-expo/interactive.md @@ -42,8 +42,8 @@ A callback URL is the application URL that Auth0 will direct your users to once ::: note If you are following along with our sample project, set this -- for iOS - `auth0.com.auth0samples://${account.namespace}/ios/com.auth0samples/callback` -- for Android - `auth0.com.auth0samples://${account.namespace}/android/com.auth0samples/callback` +- for iOS - `auth0.com.auth0samples.auth0://${account.namespace}/ios/com.auth0samples/callback` +- for Android - `auth0.com.auth0samples.auth0://${account.namespace}/android/com.auth0samples/callback` ::: ### Configure Logout URLs @@ -52,8 +52,8 @@ A logout URL is the application URL Auth0 will redirect your users to once they ::: note If you are following along with our sample project, set this -- for iOS - `auth0.com.auth0samples://${account.namespace}/ios/com.auth0samples/callback` -- for Android - `auth0.com.auth0samples://${account.namespace}/android/com.auth0samples/callback` +- for iOS - `auth0.com.auth0samples.auth0://${account.namespace}/ios/com.auth0samples/callback` +- for Android - `auth0.com.auth0samples.auth0://${account.namespace}/android/com.auth0samples/callback` ::: ## Install dependencies From 5e0e05e393c8dc25cb6d1afe0786c6a53079936a Mon Sep 17 00:00:00 2001 From: Steve Hobbs Date: Wed, 5 Jul 2023 12:27:10 +0100 Subject: [PATCH 3/6] chore: move rna and rna-expo to beta folders --- .../native/{react-native => react-native-beta}/00-login.md | 0 .../native/{react-native => react-native-beta}/download.md | 0 .../native/{react-native => react-native-beta}/files/app.md | 0 .../native/{react-native => react-native-beta}/index.yml | 0 .../native/{react-native => react-native-beta}/interactive.md | 0 .../{react-native-expo => react-native-expo-beta}/00-login.md | 0 .../{react-native-expo => react-native-expo-beta}/download.md | 0 .../files/app-json.md | 0 .../{react-native-expo => react-native-expo-beta}/files/app.md | 0 .../{react-native-expo => react-native-expo-beta}/index.yml | 0 .../{react-native-expo => react-native-expo-beta}/interactive.md | 0 11 files changed, 0 insertions(+), 0 deletions(-) rename articles/quickstart/native/{react-native => react-native-beta}/00-login.md (100%) rename articles/quickstart/native/{react-native => react-native-beta}/download.md (100%) rename articles/quickstart/native/{react-native => react-native-beta}/files/app.md (100%) rename articles/quickstart/native/{react-native => react-native-beta}/index.yml (100%) rename articles/quickstart/native/{react-native => react-native-beta}/interactive.md (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/00-login.md (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/download.md (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/files/app-json.md (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/files/app.md (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/index.yml (100%) rename articles/quickstart/native/{react-native-expo => react-native-expo-beta}/interactive.md (100%) diff --git a/articles/quickstart/native/react-native/00-login.md b/articles/quickstart/native/react-native-beta/00-login.md similarity index 100% rename from articles/quickstart/native/react-native/00-login.md rename to articles/quickstart/native/react-native-beta/00-login.md diff --git a/articles/quickstart/native/react-native/download.md b/articles/quickstart/native/react-native-beta/download.md similarity index 100% rename from articles/quickstart/native/react-native/download.md rename to articles/quickstart/native/react-native-beta/download.md diff --git a/articles/quickstart/native/react-native/files/app.md b/articles/quickstart/native/react-native-beta/files/app.md similarity index 100% rename from articles/quickstart/native/react-native/files/app.md rename to articles/quickstart/native/react-native-beta/files/app.md diff --git a/articles/quickstart/native/react-native/index.yml b/articles/quickstart/native/react-native-beta/index.yml similarity index 100% rename from articles/quickstart/native/react-native/index.yml rename to articles/quickstart/native/react-native-beta/index.yml diff --git a/articles/quickstart/native/react-native/interactive.md b/articles/quickstart/native/react-native-beta/interactive.md similarity index 100% rename from articles/quickstart/native/react-native/interactive.md rename to articles/quickstart/native/react-native-beta/interactive.md diff --git a/articles/quickstart/native/react-native-expo/00-login.md b/articles/quickstart/native/react-native-expo-beta/00-login.md similarity index 100% rename from articles/quickstart/native/react-native-expo/00-login.md rename to articles/quickstart/native/react-native-expo-beta/00-login.md diff --git a/articles/quickstart/native/react-native-expo/download.md b/articles/quickstart/native/react-native-expo-beta/download.md similarity index 100% rename from articles/quickstart/native/react-native-expo/download.md rename to articles/quickstart/native/react-native-expo-beta/download.md diff --git a/articles/quickstart/native/react-native-expo/files/app-json.md b/articles/quickstart/native/react-native-expo-beta/files/app-json.md similarity index 100% rename from articles/quickstart/native/react-native-expo/files/app-json.md rename to articles/quickstart/native/react-native-expo-beta/files/app-json.md diff --git a/articles/quickstart/native/react-native-expo/files/app.md b/articles/quickstart/native/react-native-expo-beta/files/app.md similarity index 100% rename from articles/quickstart/native/react-native-expo/files/app.md rename to articles/quickstart/native/react-native-expo-beta/files/app.md diff --git a/articles/quickstart/native/react-native-expo/index.yml b/articles/quickstart/native/react-native-expo-beta/index.yml similarity index 100% rename from articles/quickstart/native/react-native-expo/index.yml rename to articles/quickstart/native/react-native-expo-beta/index.yml diff --git a/articles/quickstart/native/react-native-expo/interactive.md b/articles/quickstart/native/react-native-expo-beta/interactive.md similarity index 100% rename from articles/quickstart/native/react-native-expo/interactive.md rename to articles/quickstart/native/react-native-expo-beta/interactive.md From f24e909c9ce443955f85fa87a140fd8612ee9f8c Mon Sep 17 00:00:00 2001 From: Steve Hobbs Date: Wed, 5 Jul 2023 12:27:57 +0100 Subject: [PATCH 4/6] chore: restore original rna and rna-expo qs from master --- .../native/react-native-expo/00-login.md | 239 ++++++++++++++++ .../native/react-native-expo/download.md | 24 ++ .../react-native-expo/files/app-json.md | 46 +++ .../native/react-native-expo/files/app.md | 64 +++++ .../native/react-native-expo/index.yml | 57 ++++ .../native/react-native-expo/interactive.md | 187 +++++++++++++ .../native/react-native/00-login.md | 262 ++++++++++++++++++ .../native/react-native/download.md | 24 ++ .../native/react-native/files/app.md | 63 +++++ .../quickstart/native/react-native/index.yml | 54 ++++ .../native/react-native/interactive.md | 248 +++++++++++++++++ 11 files changed, 1268 insertions(+) create mode 100644 articles/quickstart/native/react-native-expo/00-login.md create mode 100644 articles/quickstart/native/react-native-expo/download.md create mode 100644 articles/quickstart/native/react-native-expo/files/app-json.md create mode 100644 articles/quickstart/native/react-native-expo/files/app.md create mode 100644 articles/quickstart/native/react-native-expo/index.yml create mode 100644 articles/quickstart/native/react-native-expo/interactive.md create mode 100644 articles/quickstart/native/react-native/00-login.md create mode 100644 articles/quickstart/native/react-native/download.md create mode 100644 articles/quickstart/native/react-native/files/app.md create mode 100644 articles/quickstart/native/react-native/index.yml create mode 100644 articles/quickstart/native/react-native/interactive.md diff --git a/articles/quickstart/native/react-native-expo/00-login.md b/articles/quickstart/native/react-native-expo/00-login.md new file mode 100644 index 0000000000..729420b8ab --- /dev/null +++ b/articles/quickstart/native/react-native-expo/00-login.md @@ -0,0 +1,239 @@ +--- +title: Login +description: This tutorial demonstrates how to add user login to an Expo application using Auth0. +budicon: 448 +topics: + - quickstarts + - native + - react-native + - expo +github: + path: 00-Login-Expo +contentType: tutorial +useCase: quickstart +--- + + +This Quickstart is for the Expo framework. To integrate Auth0 into your React Native application, please refer to the [React Native Quickstart](https://auth0.com/docs/quickstart/native/react-native/interactive) + +::: warning +This SDK is not compatible with "Expo Go" app. It is compatible only with Custom Dev Client and EAS builds +::: + +<%= include('../_includes/_getting_started', { library: 'Expo'}) %> + +## Install Dependencies + +How to install the React Native Auth0 module. + +::: note +Please refer to the [official documentation](https://docs.expo.dev/) for additional details on Expo. +::: + +### Yarn + +```bash +yarn add react-native-auth0 +``` + +::: note +For further reference on yarn, check [their official documentation](https://yarnpkg.com/en/docs). +::: + +### npm + +```bash +npm install react-native-auth0 --save +``` + +The first step in adding authentication to your application is to provide a way for your users to log in. The fastest, most secure, and most feature-rich way to do this with Auth0 is to use the hosted [login page](/hosted-pages/login). + +
Universal Login
+ +## Integrate Auth0 in Your Application + +### Setup Auth0 Config Plugin + +The Auth0 package runs custom native code that needs to be configured at build time. We will use [Expo Config Plugin](https://docs.expo.dev/guides/config-plugins/) to achieve this. + +Add the `react-native-auth0` plugin to the [Expo config](https://docs.expo.dev/workflow/configuration/) file at `app.json` or `app.config.js`. + +```json +{ + "expo": { + ... + "plugins": [ + [ + "react-native-auth0", + { + "domain": "${account.namespace}", + "customScheme": "YOUR_CUSTOM_SCHEME" + } + ] + ] + } +} +``` + +::: note +The custom scheme should be a unique, all lowercase value with no special characters. +::: + +### Generate native source code + +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 + +? What would you like your iOS bundle identifier to be? > com.auth0samples +``` + +These values are found in the Expo config file at `app.json` or `app.config.js`. It will be used in the callback and logout URLs: + +```json +{ + ... + "android": { + "package": "YOUR_ANDROID_PACKAGE_NAME_IS_FOUND_HERE" + }, + "ios": { + "bundleIdentifier": "YOUR_IOS_BUNDLE_IDENTIFIER_IS_FOUND_HERE" + } + } +} +``` + +<%= include('../../../_includes/_callback_url') %> + +#### iOS callback URL + +```text +{YOUR_CUSTOM_SCHEME}://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback +``` + +Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. + +#### Android callback URL + +```text +{YOUR_CUSTOM_SCHEME}://${account.namespace}/android/{ANDROID_PACKAGE}/callback +``` + +Remember to replace `{ANDROID_PACKAGE}` with your actual application's package name. + +<%= include('../../../_includes/_logout_url') %> + +#### iOS logout URL + +```text +{YOUR_CUSTOM_SCHEME}://${account.namespace}/ios/{IOS_BUNDLE_IDENTIFIER}/callback +``` + +Remember to replace `{IOS_BUNDLE_IDENTIFIER}` with your actual application's bundle identifier name. + +#### Android logout URL + +```text +{YOUR_CUSTOM_SCHEME}://${account.namespace}/android/{ANDROID_PACKAGE}/callback +``` + +Remember to replace `{ANDROID_PACKAGE}` with your actual application's package name. + +## Add login to your app + +First, import the `useAuth0` hook and the `Auth0Provider` component from the `react-native-auth0` package. + +```js +import {useAuth0, Auth0Provider} from 'react-native-auth0'; +``` + +Next, wrap your application in the `Auth0Provider` component, providing your Auth0 domain and Client ID values: + +```js +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: + +```js +const LoginButton = () => { + const {authorize} = useAuth0(); + + const onPress = async () => { + try { + await authorize({scope: 'openid profile email'}, {customScheme: '{YOUR_CUSTOM_SCHEME}'}); + } catch (e) { + console.log(e); + } + }; + + return