Modularized RN bare guides

Web3Auth · Oct 19, 2023 · 234750e · 234750e
1 parent 32618d2
commit 234750e
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 210 deletions.
diff --git a/src/common/guides/_rn-android-config.mdx b/src/common/guides/_rn-android-config.mdx
@@ -0,0 +1,46 @@
+- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
+
+```gradle title="android/build.gradle"
+buildToolsVersion = "31.0.0"
+minSdkVersion = 21
+# highlight-next-line
+compileSdkVersion = 31
+# highlight-next-line
+targetSdkVersion = 31
+```
+
+- Add the intent filter with the `scheme` defined in your `AndroidManifest.xml`
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+<intent-filter>
+  <action android:name="android.intent.action.VIEW" />
+  <category android:name="android.intent.category.DEFAULT" />
+  <category android:name="android.intent.category.BROWSABLE" />
+  # replace with your own scheme
+  # highlight-next-line
+  <data android:scheme="web3authrnexample" />
+</intent-filter>
+```
+
+- SDK version 31 requires you to explicitly define `android:exported="true"` in `AndroidManifest.xml`, and check whether it is correctly present or
+  not.
+
+```xml title="android/app/src/main/AndroidManifest.xml"
+<activity
+  android:name=".MainActivity"
+  android:label="@string/app_name"
+  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+  android:launchMode="singleTask"
+  android:windowSoftInputMode="adjustResize"
+# highlight-next-line
+  android:exported="true">
+```
+
+- Your `redirectUrl` is your defined scheme following some identifier or your choice. For example, if your scheme is `web3authrnexample`, you can
+  define your `redirectUrl` as `web3authrnexample://openlogin`. Make sure you register this `redirectUrl` in the
+  [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+
+```tsx title="App.js"
+const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme
+const resolvedRedirectUrl = `${scheme}://openlogin`;
+```
diff --git a/src/common/guides/_rn-bare-prerequisites.mdx b/src/common/guides/_rn-bare-prerequisites.mdx
@@ -0,0 +1,5 @@
+- React Native Release 0.71 and above (for Bare React Native Workflow)
+
+- iOS Platform Target Version 14 and above
+
+- Android Target SDK Version 31 and above
diff --git a/src/pages/content-hub/guides/react-native-auth0.mdx b/src/pages/content-hub/guides/react-native-auth0.mdx
@@ -13,12 +13,14 @@ communityPortalTopicId: 58
 import Auth0Prerequisites from "@site/src/common/guides/_auth0-prerequisites.mdx";
 import Auth0Setup from "@site/src/common/guides/_auth0-setup.mdx";
 import Auth0VerifierSetup from "@site/src/common/guides/_auth0-verifier-setup.mdx";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import RNAndroidConfig from "@site/src/common/guides/_rn-android-config.mdx";
+import RNBarePreRequisites from "@site/src/common/guides/_rn-bare-prerequisites.mdx";
 import SetupWeb3AuthDashboard from "@site/src/common/guides/_setup-web3auth-dashboard.mdx";
 import Web3AuthPrerequisites from "@site/src/common/guides/_web3auth-prerequisites.mdx";
 import ReactNativeResponse from "@site/src/common/sdk/pnp/react-native/_get-user-info.mdx";
 import SEO from "@site/src/components/SEO";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 <SEO
   title="Using Auth0 with Web3Auth React Native SDK"
@@ -54,18 +56,14 @@ When integrating Web3Auth React Native SDK with Auth0 the flow looks something l
 
 - When a user logs in with `Auth0`, Auth0 sends a JWT `id_token` to the app. This JWT token is sent to the Web3Auth SDK's login function.
 
-- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self custodial way, resulting in
+- Finally, on successful validation of the JWT token, Web3Auth SDK will generate a private key for the user, in a self-custodial way, resulting in
   easy onboarding for your user to the application.
 
 ## Prerequisites
 
 <Web3AuthPrerequisites />
 
-- React Native Release 0.71 and above (for Bare React Native Workflow)
-
-- iOS Platform Target Version 14 and above
-
-- Android Target SDK Version 31 and above
+<RNBarePreRequisites />
 
 <Auth0Prerequisites />
 
@@ -97,51 +95,7 @@ When integrating Web3Auth React Native SDK with Auth0 the flow looks something l
 
 <TabItem value="android">
 
-- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
-
-```gradle title="android/build.gradle"
-buildToolsVersion = "31.0.0"
-minSdkVersion = 21
-# highlight-next-line
-compileSdkVersion = 31
-# highlight-next-line
-targetSdkVersion = 31
-```
-
-- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-<intent-filter>
-  <action android:name="android.intent.action.VIEW" />
-  <category android:name="android.intent.category.DEFAULT" />
-  <category android:name="android.intent.category.BROWSABLE" />
-  # replace with your own scheme
-  # highlight-next-line
-  <data android:scheme="web3authrnexample" />
-</intent-filter>
-```
-
-- SDK version 31 requires you to explicitly define `android:exported="true"` in `AndroidManifest.xml`, check whether it is correctly present or not.
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-<activity
-  android:name=".MainActivity"
-  android:label="@string/app_name"
-  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
-  android:launchMode="singleTask"
-  android:windowSoftInputMode="adjustResize"
-# highlight-next-line
-  android:exported="true">
-```
-
-- Your `redirectUrl` is your defined scheme following some identifier or your choice. For example, if your scheme is `web3authrnexample`, you can
-  define your `redirectUrl` as `web3authrnexample://openlogin`. Make sure you register this `redirectUrl` in the
-  [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
-
-```tsx title="App.js"
-const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme
-const resolvedRedirectUrl = `${scheme}://openlogin`;
-```
+<RNAndroidConfig />
 
 </TabItem>
 
@@ -171,7 +125,7 @@ cd ios && pod install && cd ..
 To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available
 SDKs, please have a look at this [documentation page](/sdk).
 
-For this guide here, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).
+For this guide, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).
 
 ### Installation
 
@@ -183,19 +137,19 @@ npm install --save @web3auth/react-native-sdk
 
 ### Adding a Web Browser Module
 
-We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the native APIs, and there are different extra
-installation steps depending on whether you are using the bare workflow or managed workflow. Since we're using the SDK with a bare workflow React
-Native app, you have to install a `WebBrowser` implementation made by us as a porn from the Expo Web Browser Module.
+We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the native APIs, and different extra installation steps
+depending on whether you are using the bare workflow or managed workflow. Since we're using the SDK with a bare workflow React Native app, you have to
+install a `WebBrowser` implementation made by us as a porn from the Expo Web Browser Module.
 
 ##### [`@toruslabs/react-native-web-browser`](https://github.com/torusresearch/react-native-web-browser)
 
 ```bash npm2yarn
 npm install --save @toruslabs/react-native-web-browser
 ```
 
-### Adding a `EncryptedStorage` Module
+### Adding an `EncryptedStorage` Module
 
-We will also require a `EncryptedStorage` implementation to allow for session management without storing the private key on the device.
+We will also require an `EncryptedStorage` implementation to allow for session management without storing the private key on the device.
 
 ```bash npm2yarn
 npm install --save react-native-encrypted-storage

diff --git a/src/pages/content-hub/guides/react-native-firebase.mdx b/src/pages/content-hub/guides/react-native-firebase.mdx
@@ -14,13 +14,15 @@ import FirebaseAndroidSetup from "@site/src/common/guides/_firebase-android-setu
 import FirebasePrerequisites from "@site/src/common/guides/_firebase-prerequisites.mdx";
 import FirebaseSetup from "@site/src/common/guides/_firebase-setup.mdx";
 import FirebaseVerifierSetup from "@site/src/common/guides/_firebase-verifier-setup.mdx";
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import FirebaseWorking from "@site/src/common/guides/_firebase-working.mdx";
+import RNAndroidConfig from "@site/src/common/guides/_rn-android-config.mdx";
+import RNBarePreRequisites from "@site/src/common/guides/_rn-bare-prerequisites.mdx";
 import SetupWeb3AuthDashboard from "@site/src/common/guides/_setup-web3auth-dashboard.mdx";
 import Web3AuthPrerequisites from "@site/src/common/guides/_web3auth-prerequisites.mdx";
 import ReactNativeResponse from "@site/src/common/sdk/pnp/react-native/_get-user-info.mdx";
 import SEO from "@site/src/components/SEO";
-import FirebaseWorking from "@site/src/common/guides/_firebase-working.mdx";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 
 <SEO
   title="Using Firebase with Web3Auth React Native SDK"
@@ -58,11 +60,7 @@ When integrating Web3Auth React Native SDK with Firebase the flow looks somethin
 
 <Web3AuthPrerequisites />
 
-- React Native Release 0.71 and above (for Bare React Native Workflow)
-
-- iOS Platform Target Version 14 and above
-
-- Android Target SDK Version 31 and above
+<RNBarePreRequisites />
 
 <FirebasePrerequisites />
 
@@ -95,46 +93,7 @@ When integrating Web3Auth React Native SDK with Firebase the flow looks somethin
 
 <TabItem value="android">
 
-- Make sure that the minimum SDK compile version in `build.gradle` is 31 or more.
-
-```gradle title="android/build.gradle"
-buildToolsVersion = "31.0.0"
-minSdkVersion = 21
-# highlight-next-line
-compileSdkVersion = 31
-# highlight-next-line
-targetSdkVersion = 31
-```
-
-- Add the intent filter with `scheme` defined in your `AndroidManifest.xml`
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-<intent-filter>
-  <action android:name="android.intent.action.VIEW" />
-  <category android:name="android.intent.category.DEFAULT" />
-  <category android:name="android.intent.category.BROWSABLE" />
-  # replace with your own scheme
-  # highlight-next-line
-  <data android:scheme="web3authrnexample" />
-</intent-filter>
-```
-
-- SDK version 31 requires you to explicitly define `android:exported="true"` in `AndroidManifest.xml`, check whether it is correctly present or not.
-
-```xml title="android/app/src/main/AndroidManifest.xml"
-<activity
-  android:name=".MainActivity"
-  android:label="@string/app_name"
-  android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
-  android:launchMode="singleTask"
-  android:windowSoftInputMode="adjustResize"
-# highlight-next-line
-  android:exported="true">
-```
-
-- Your `redirectUrl` is your defined scheme following some identifier or your choice. For example, if your scheme is `web3authrnexample`, you can
-  define your `redirectUrl` as `web3authrnexample://openlogin`. Make sure you register this `redirectUrl` in the
-  [Web3Auth Developer Dashboard](https://dashboard.web3auth.io).
+<RNAndroidConfig />
 
 ```tsx title="App.js"
 const scheme = "web3authrnbareexample"; // Or your desired app redirection scheme
@@ -169,7 +128,7 @@ cd ios && pod install && cd ..
 To use the Web3Auth SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To know more about the available
 SDKs, please have a look at this [documentation page](/sdk).
 
-For this guide here, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).
+For this guide, we will be talking through the [Web3Auth React Native SDK](/sdk/pnp/react-native).
 
 ### Installation
 
@@ -181,33 +140,33 @@ npm install --save @web3auth/react-native-sdk
 
 ### Adding a Web Browser Module
 
-We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the native APIs, and there are different extra
-installation steps depending on whether you are using the bare workflow or managed workflow. Since we're using the SDK with a bare workflow React
-Native app, you have to install a `WebBrowser` implementation made by us as a porn from the Expo Web Browser Module.
+We will also require a `WebBrowser` implementation to allow our JS-based SDK to interact with the native APIs, and different extra installation steps
+depending on whether you are using the bare workflow or managed workflow. Since we're using the SDK with a bare workflow React Native app, you have to
+install a `WebBrowser` implementation made by us as a port from the Expo Web Browser Module.
 
 ##### [`@toruslabs/react-native-web-browser`](https://github.com/torusresearch/react-native-web-browser)
 
 ```bash npm2yarn
 npm install --save @toruslabs/react-native-web-browser
 ```
 
-### Adding a `EncryptedStorage` Module
+### Adding an `EncryptedStorage` Module
 
-We will also require a `EncryptedStorage` implementation to allow for session management without storing the private key on the device.
+We will also require an `EncryptedStorage` implementation to allow for session management without storing the private key on the device.
 
 ```bash npm2yarn
 npm install --save react-native-encrypted-storage
 ```
 
 ### Initialization
 
-After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two step process,
+After Installation, the next step to use Web3Auth is to Initialize the SDK. The Initialization is a two-step process,
 
 - [Importing Required Packages](#importing-required-packages)
 - [Instantiating Web3Auth](#instantiating-web3auth)
 
 Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project.
-Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customise your Web3Auth Instance.
+Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customize your Web3Auth Instance.
 
 #### Importing `Web3Auth`
 
@@ -237,19 +196,13 @@ We need `clientId` and target Web3Auth `network` to initialize the `web3auth` ob
 
 - You can get your `clientId` from registering (above) on the Developer Dashboard.
 
-- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `TESTNET` network. For production
-  usage, you can use the `CYAN`, `MAINNET`, & `AQUA` networks.
-
-  :::danger
-
-  Please don't use the `TESTNET` network for production usage. You may end up losing user keys.
-
-  :::
+- `network` signifies the network on which the deployed Web3Auth nodes are running. For testing purposes, we have a `Sapphire Devnet` network. For
+  production usage, you can use the `Sapphire Mainnet` network.
 
 ```tsx
 const web3auth = new Web3Auth(WebBrowser, EncryptedStorage, {
   clientId,
-  network: OPENLOGIN_NETWORK.CYAN, // MAINNET, AQUA,  CYAN or TESTNET
+  network: OPENLOGIN_NETWORK.SAPPHIRE_MAINNET, // SAPPHIRE_MAINNET or SAPPHIRE_DEVNET
   loginConfig: {
     // Add login configs corresponding to the provider
     // For firebase/ cognito & other providers, you need to pass the JWT token
@@ -287,7 +240,7 @@ async function signInWithFirebase() {
     });
     // Check if your device supports Google Play
     await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
-    // Get the users ID token
+    // Get the user's ID token
     const { idToken } = await GoogleSignin.signIn();
     // Create a Google credential with the token
     const googleCredential = auth.GoogleAuthProvider.credential(idToken);
@@ -303,8 +256,8 @@ async function signInWithFirebase() {
 
 #### Logging in with Web3Auth
 
-Once initialized, you can use the `login` function of `web3auth` to navigate user to the login process. For each login method, you have to select the
-`loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.
+Once initialized, you can use the `login` function of `web3auth` to navigate the user to the login process. For each login method, you have to select
+the `loginProvider` such as `google`, `facebook`, `twitch`, `jwt`, `email_passwordless` etc.
 
 :::info JWT
 
@@ -323,11 +276,11 @@ const idToken = await loginRes.user.getIdToken(true);
 
 await web3auth.login({
   redirectUrl: resolvedRedirectUrl,
-  mfaLevel: "default", // Pass on the mfa level of your choice: default, optional, mandatory, none
+  mfaLevel: "default", // Pass on the MFA level of your choice: default, optional, mandatory, none
   loginProvider: "jwt",
   extraLoginOptions: {
     id_token: "YOUR_JWT_ID_TOKEN", // Please replace with your JWT ID token, generated from Firebase Login
-    verifierIdField: "sub", // same as your JWT Verifier ID on dashboard
+    verifierIdField: "sub", // same as your JWT Verifier ID on the dashboard
   },
 });
 ```
@@ -352,7 +305,7 @@ If you wish you **[add Multi Factor Authentication](/sdk/pnp/react-native/mfa)**
 var userInfo = web3auth.userInfo();
 ```
 
-Using the `web3Auth.login()` function, you can get the details of the logged in user. Please note that these details are not stored anywhere in
+Using the `web3Auth.login()` function, you can get the details of the logged-in user. Please note that these details are not stored anywhere in
 Web3Auth network.
 
 #### Sample userInfo
@@ -375,13 +328,13 @@ web3auth.logout();
 
 ## Interacting with the Blockchain
 
-Once a user logs in, the user can ccess the private key by `web3auth.privKey()`. For EVM Blockchains, the `secp256k1` private key is used to sign
+Once a user logs in, the user can access the private key by `web3auth.privKey()`. For EVM Blockchains, the `secp256k1` private key is used to sign
 transactions. We can get an `ed25519` compatible private key for other blockchains using `web3auth.ed25519Key()`. Similar to how we're using this
 private key in the `ethers.js` library in this example, you can connect to any other blockchain of your choice.
 
 :::info connect any blockchain
 
-Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM based
+Please go through the [Connect Blockchain](/connect-blockchain/ethereum/react-native) Documentation, which contains all the details of the EVM-based
 blockchain you have selected here.
 
 :::