Merge branch 'master' into rn-docs-update

docs/auth-provider-setup/federated-identity-providers.mdx

@@ -5,6 +5,9 @@ description: "Federated / Identity Providers | Documentation - Web3Auth"
 image: "images/docs-meta-cards/documentation-card.png"
 ---
 
+import SetupAWSCognitoVerifier from "@site/src/common/guides/_setup-aws-cognito-verifier.mdx";
+import SetupFirebaseVerifier from "@site/src/common/guides/_setup-firebase-verifier.mdx";
+
 Federated / Identity providers enable you to use some implicit and authorization code grants. You could also use social providers on top of Federated
 / Identity providers to select other Social providers (e.g.: Twitter, Apple, GitHub, LinkedIn, WeChat etc.) that are not natively supported by us.
 Note: This will require you to register an app with the Federated / Identity Providers.
@@ -13,8 +16,6 @@ Note: This will require you to register an app with the Federated / Identity Pro
 
 ## Auth0
 
-- [Using Custom Authentication with Auth0](/content-hub/guides/auth0)
-
 ### Set up Auth0 Verifier
 
 1. Create a verifier for your Auth0 application by selecting `Auth0` as the Login provider from this modal.
@@ -29,10 +30,33 @@ Note: This will require you to register an app with the Federated / Identity Pro
 
 4. Click on the `Create` button to create your Auth0 verifier.
 
+:::info Guide
+
+Check out the [**Auth0 guide**](/content-hub/guides/auth0) to learn more about how to set up the Auth0 verifier and use it with Web3Auth.
+
+:::
+
 ## AWS Cognito
 
-- [Using Custom Authentication with AWS Cognito](/content-hub/guides/cognito)
+### Set up AWS Cognito Verifier
+
+<SetupAWSCognitoVerifier />
+
+:::info Guide
+
+Check out the [** AWS Cognito guide**](/content-hub/guides/cognito) to learn more about how to set up the AWS Cognito verifier and use it with
+Web3Auth.
+
+:::
 
 ## Firebase
 
-- [Using Custom Authentication with Firebase](/content-hub/guides/firebase)
+### Setup Firebase Verifier
+
+<SetupFirebaseVerifier />
+
+:::info Guide
+
+Check out the [**Firebase guide**](/content-hub/guides/firebase) to learn more about how to set up the Firebase verifier and use it with Web3Auth.
+
+:::

src/common/docs/_federated-providers.mdx

@@ -9,19 +9,19 @@ export const tileGroupsDataFederated = [
         key: "auth0",
         title: "Auth0",
         icon: "logo-auth0.png",
-        path: "/content-hub/guides/auth0",
+        path: "/auth-provider-setup/federated-identity-providers#auth0",
       },
       {
         key: "aws-cognito",
         title: "AWS Cognito",
         icon: "logo-aws-cognito.png",
-        path: "/content-hub/guides/cognito",
+        path: "/auth-provider-setup/federated-identity-providers#aws-cognito",
       },
       {
         key: "firebase",
         title: "Firebase",
         icon: "logo-firebase.png",
-        path: "/content-hub/guides/firebase",
+        path: "/auth-provider-setup/federated-identity-providers#firebase",
       },
     ],
   },

src/common/guides/_instantiation-web3auth.mdx

@@ -4,6 +4,7 @@
 import { WALLET_ADAPTERS, CHAIN_NAMESPACES, IProvider } from "@web3auth/base";
 import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 ```
 
 Alongside the `Web3Auth` and `OpenloginAdapter` you need the above mentioned packages from `@web3auth/base` for different initialisations mentioned
@@ -15,19 +16,26 @@ further in this guide.
 import { Web3AuthNoModal } from "@web3auth/no-modal";
 import { CHAIN_NAMESPACES } from "@web3auth/base";
 
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0x1",
+  rpcTarget: "https://rpc.ankr.com/eth",
+  displayName: "Ethereum Mainnet",
+  blockExplorer: "https://etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+};
+
 const web3auth = new Web3AuthNoModal({
   clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
   web3AuthNetwork: "sapphire_mainnet",
-  chainConfig: {
-    chainNamespace: CHAIN_NAMESPACES.EIP155, // SOLANA, OTHER
-    chainId: "0x1",
-  },
+  chainConfig,
 });
 ```
 
 Here, we're using the `chainConfig` property to set the chainId and chainNamespace. The `chainId` and `chainNamespace` are the id and the namespace
-respectively of the chain you're connecting to. We've initialised them for EVM for this guide. You can find the list of available providers
+respectively of the chain you're connecting to. We've initialized them for EVM for this guide. You can find the list of available providers
 [here](/sdk/helper-sdks/providers/) to select from.
 
 Additionally, sometimes you might face clogging in the network, due to the fact that the test network is a bit clogged at that point. To avoid this,
-we can use the property `rpcTarget` and pass over the url of the node you want to connect to.
+we can use the property `rpcTarget` and pass over the URL of the node you want to connect to.

src/common/guides/_openlogin-config-code-firebase.mdx

@@ -1,17 +1,18 @@
 ```tsx
+const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
+
 const openloginAdapter = new OpenloginAdapter({
   adapterSettings: {
-    clientId: "YOUR-WEB3AUTH-CLIENT-ID", //Optional - Provide only if you haven't provided it in the Web3Auth Instantiation Code
-    uxMode: "redirect",
+    uxMode: "redirect", // redirect or popup
     loginConfig: {
       jwt: {
-        name: "Name of your choice",
-        verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD",
+        verifier: "w3a-firebase-demo", // name of the verifier created on Web3Auth Dashboard
         typeOfLogin: "jwt",
-        clientId: "YOUR-WEB3AUTH-CLIENT-ID",
+        clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
       },
     },
   },
+  privateKeyProvider,
 });
 
 web3auth.configureAdapter(openloginAdapter);

src/common/guides/_setup-aws-cognito-verifier.mdx

@@ -0,0 +1,24 @@
+Create a AWS Cognito **Verifier** from the **Custom Authentication** tab of your Web3Auth Project.
+
+- Click on the `Custom Authentication` tab of your [Web3Auth Project](/dashboard-setup/projects-and-analytics#create-a-new-project).
+- Click on the `Create Verifier` button.
+- Enter a name of your choice for the verifier identifier. `eg. w3a-cognito-demo`
+- Select `Custom Providers` from **Choose a Login Provider** section.
+  ![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier-custom-jwt.png)
+- **JWKS Endpoint**: Enter `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}/.well-known/jwks.json` as the JWKS endpoint for the Cognito.
+- Now you have the option to paste a sample idToken(JWT) to get the fields for the JWT validation. This step is optional, but if you have a sample JWT
+  you can paste it here to get the fields for the JWT validation. You can also skip this step and fill in the fields manually.
+- The following are the JWT validation fields needed for the Cognito JWT validation:
+
+  - Type `iss` as a field and `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}` as a value.
+  - Next, type `aud` as a field and `APP_CLIENT_ID` as a value.
+
+  _**Note: Replace the `REGION`, `USER_POOL_ID` and `APP_CLIENT_ID` with your Cognito specific details.**_
+
+- Next, Select `Sub`, `Email` or a `Custom` value from the dropdown for the **JWT Verifier ID**. This is the field that will be used as the verifier
+  ID for the user, and it has to be unique for each user.
+- Finally, Click on the `Create` button to create your verifier.
+
+![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier-custom-jwt-filled.png)
+
+It may take up to 10 minutes to deploy the verifier on _sapphire_devnet_. You'll receive an email once it's complete.

src/common/guides/_setup-firebase-verifier.mdx

@@ -0,0 +1,25 @@
+Create a Firebase **Verifier** from the **Custom Authentication** tab of your Web3Auth Project.
+
+- Click on the `Custom Authentication` tab of your [Web3Auth Project](/dashboard-setup/projects-and-analytics#create-a-new-project).
+- Click on the `Create Verifier` button.
+- Enter a name of your choice for the verifier identifier. `eg. w3a-firebase-demo`
+- Select `Custom Providers` from **Choose a Login Provider** section.
+  ![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier-custom-jwt.png)
+- **JWKS Endpoint**: Enter `https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com` as the JWKS endpoint for the
+  Firebase.
+- Now you have the option to paste a sample idToken(JWT) to get the fields for the JWT validation. This step is optional, but if you have a sample JWT
+  you can paste it here to get the fields for the JWT validation. You can also skip this step and fill in the fields manually.
+- The following are the JWT validation fields needed for the Firebase JWT validation:
+
+  - Type `iss` as a field and `https://securetoken.google.com/FIREBASE-PROJECT-ID` as a value.
+  - Next, type `aud` as a field and `FIREBASE-PROJECT-ID` as a value.
+
+  **_Note: Replace the `FIREBASE-PROJECT-ID` with your Firebase Project ID._**
+
+- Next, Select `Sub`, `Email` or a `Custom` value from the dropdown for the **JWT Verifier ID**. This is the field that will be used as the verifier
+  ID for the user, and it has to be unique for each user.
+- Finally, Click on the `Create` button to create your verifier.
+
+![Verifier Modal on Web3Auth Dashboard](/images/dashboard/create-verifier-custom-jwt-filled.png)
+
+It may take up to 10 minutes to deploy the verifier on _sapphire_devnet_. You'll receive an email once it's complete.

src/common/guides/_setup-web3auth-dashboard.mdx

@@ -1,13 +1,17 @@
-- Create a Project from the **Plug and Play** Section of the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/).
+- Create a Project from the **Project** Section of the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/).
 
-  ![Plug n Play Project Creation on Web3Auth Dashboard](/content-hub/guides/set-up-web3auth-dashboard/plugnplay-project.png)
+  ![Plug n Play Project Creation on Web3Auth Dashboard](/images/dashboard/create-project-name.png)
 
-  - Enter your desired Project name
-  - Select the Web3Auth Network as `testnet`. We recommend creating a project in tesnet network during development. And while moving to a production
-    environment, make sure to convert your project to `mainnet`, `aqua`, or `cyan` network, otherwise you'll end up losing users and keys.
-  - Select the blockchain(s) you'll be building this project on. For interoperability with Torus Wallet, you've an option of allowing the user's
-    private key to be used in other applications using Torus Wallet. We currently have this option across `EVM`, `Solana` and `Casper` blockchains.
-  - Finally, once you create the project, you've the option to whitelist your URLs for the project. **Please whitelist the domains where your project
-    will be hosted.**
+  - Enter your desired **Project name**.
+  - Select the **Product** you want to use. For this guide, we'll be using the **Plug n Play** product.
+  - Select the **Platform type** you want to use. For this guide, we'll be using the **Web Application** as the platform.
+  - Select the Web3Auth Network as `Sapphire Devnet`. We recommend creating a project in the `sapphire_devnet` or `tesnet` network during development.
+    While moving to a production environment, make sure to convert your project to `sapphire_mainnet` or any of the legacy mainnet network `mainnet`,
+    `aqua`, or `cyan` network. Otherwise, you'll end up losing users and keys.
+  - Select the blockchain(s) you'll be building this project on. For interoperability with Torus Wallets, you have the option of allowing the user's
+    private key to be used in other applications using Torus Wallets ([EVM](https://app.tor.us), [Solana](https://solana.tor.us),
+    [XRPL](https://xrpl.tor.us) & [Casper](https://casper.tor.us)).
+  - Finally, once you create the project, you have the option to whitelist your URLs for the project. **Please whitelist the domains where your
+    project will be hosted.**
 
-    ![Plug n Play Project - Whitelist](/content-hub/guides/set-up-web3auth-dashboard/plugnplay-whitelist.png)
+    ![Plug n Play Project - Whitelist](/images/dashboard/project-whitelist.png)

src/pages/content-hub/guides/cognito.mdx

@@ -24,6 +24,7 @@ import InitializationWeb3Auth from "@site/src/common/guides/_initialization-web3
 import InstantiationWeb3Auth from "@site/src/common/guides/_instantiation-web3auth.mdx";
 import InteractingWithBlockchain from "@site/src/common/guides/_interacting-with-blockchain.mdx";
 import OpenloginConfigCode from "@site/src/common/guides/_openlogin-config-code.mdx";
+import SetupAWSCognitoVerifier from "@site/src/common/guides/_setup-aws-cognito-verifier.mdx";
 
 <SEO
   title="Using AWS Cognito with Web3Auth"
@@ -87,7 +88,7 @@ For Authorization code flow, you will need an additional backend server to commu
 
 ## Setup
 
-### Setup your AWS Cognito
+### Setup AWS Cognito
 
 - Go to your AWS account and go to [AWS Cognito](https://console.aws.amazon.com/cognito/home) console. And Create a new user pool by following
   [this AWS Console guide](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-console.html).
@@ -144,29 +145,15 @@ For Authorization code flow, you will need an additional backend server to commu
 
 - Now lets configure Web3Auth using AWS Cognito app details.
 
-### Setup your Web3Auth Dashboard
+### Setup Web3Auth
 
-<SetupWeb3AuthDashboard />
-
-- Create a **Verifier** from the **Custom Auth** Section of the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/) with following
-  configuration:
+#### Setup Web3Auth Project
 
-  - Choose a name of your choice for the verifier identifier. `eg. aws-cognito-verifier`
-  - Select environment: `testnet`, `mainnet`, `aqua`, or `cyan` as per your requirement.
-  - Select `Custom` from the **Login Provider**.
-  - Select `Email` for the **JWT Verifier ID**.
-  - Your JWK endpoint endpoint for aws cognito will look something like this:
-    `https://cognito-idp.{region}.amazonaws.com/{userPoolId}/.well-known/jwks.json`. Get the `region` and `userPoolId` value from your AWS Cognito
-    console.
-  - JWT validation fields:
-    - iss: `https://cognito-idp.{region}.amazonaws.com/{userPoolId}`.
-    - aud: `App client id` the from AWS Cognito console.
-  - Click on `Create` button to create your verifier. It may take up to 10 minutes to deploy verifier on _testnet_. You'll receive an email once it's
-    complete.
+<SetupWeb3AuthDashboard />
 
-  ![Custom Authentication - Create AWS Cognito Verifier](/content-hub/guides/cognito/cognito-create-verifier.png)
+#### Setup Firebase Custom Authentication Verifier
 
-- You will require the `verifierName` of the newly created verifier and `clientId` of the Plug and Play Project.
+<SetupAWSCognitoVerifier />
 
 ## Using the Web3Auth SDK
 
@@ -209,7 +196,7 @@ the loginConfig object. This makes sure that the Openlogin Adapter can connect t
 Once initialized, you can use the `connectTo()` function to authenticate the user when they click the login button.
 
 ```tsx
-import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";
+import { WALLET_ADAPTERS } from "@web3auth/base";
 
 await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
   loginProvider: "jwt",
@@ -246,7 +233,7 @@ Logging out your user is as simple as calling the `logout` function.
 
 > Note: Currently, Web3Auth Plug and Play SDKs don't log out a user from AWS Cognito, so you can try calling this below endpoint to log out a user.
 
-```tsx
+```
 window.open("
     YOUR-COGNITO-DOMAIN/logout?
     client_id=YOUR-CLIENTID-FROM-AWS-COGNITO-DASHBOARD&

src/pages/content-hub/guides/firebase.mdx

@@ -18,6 +18,7 @@ import InstantiationWeb3Auth from "@site/src/common/guides/_instantiation-web3au
 import InteractingWithBlockchain from "@site/src/common/guides/_interacting-with-blockchain.mdx";
 import OpenloginConfigCodeFirebase from "@site/src/common/guides/_openlogin-config-code-firebase.mdx";
 import SetupBaseProject from "@site/src/common/guides/_setup-base-project.mdx";
+import SetupFirebaseVerifier from "@site/src/common/guides/_setup-firebase-verifier.mdx";
 import SetupWeb3AuthDashboard from "@site/src/common/guides/_setup-web3auth-dashboard.mdx";
 import Web3AuthPrerequisites from "@site/src/common/guides/_web3auth-prerequisites.mdx";
 import SEO from "@site/src/components/SEO";
@@ -56,7 +57,7 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi
 
 ## Setup
 
-### Setup your Firebase Project
+### Setup Firebase
 
 - Go to your [Firebase console](https://console.firebase.google.com) and create a Web App. Follow
   [this guide](https://firebase.google.com/docs/web/setup) on how to setup your Firebase Web App project.
@@ -106,27 +107,15 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi
 
   ![Firebase Project - Set up web 3](/content-hub/guides/firebase/firebase-setup-web-3.svg)
 
-### Setup your Web3Auth Dashboard
+### Setup Web3Auth
 
-<SetupWeb3AuthDashboard />
-
-- Create a **Verifier** from the **Custom Auth** Section of the [Web3Auth Developer Dashboard](https://dashboard.web3auth.io/) with following
-  configuration:
+#### Setup Web3Auth Project
 
-  - Choose a name of your choice for the verifier identifier. `eg. w3a-firebase-verifier`
-  - Select environment: `testnet`, `mainnet`,`aqua`, or `cyan` as per your requirement.
-  - Select `Custom` from the **Login Provider**.
-  - Select `Sub` for the **JWT Verifier ID**.
-  - Enter `https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com` as the JWK endpoint for Firebase's idToken.
-  - JWT validation fields:
-    - iss: `https://securetoken.google.com/<firebase-project-id>`.
-    - aud: `<firebase-project-id>`
-  - Click on `Create` button to create your verifier. It may take up to 10 minutes to deploy verifier on _testnet_. You'll receive an email once it's
-    complete.
+<SetupWeb3AuthDashboard />
 
-  ![Custom Authentication - Create Firebase Verifier](/content-hub/guides/firebase/firebase-custom-verifier.png)
+#### Setup Firebase Custom Authentication Verifier
 
-- You will require the `verifierName` of the newly created verifier and `clientId` of the Plug and Play Project.
+<SetupFirebaseVerifier />
 
 ## Using the Web3Auth SDK with Firebase
 
@@ -219,14 +208,13 @@ const idToken = await loginRes.user.getIdToken(true); // this idToken will be pa
 Once initialized, and `idToken` is obtained from **Firebase**, you can use the `connectTo()` function to authenticate the user with Web3Auth.
 
 ```tsx
-import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";
+import { WALLET_ADAPTERS } from "@web3auth/base";
 
 await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
   loginProvider: "jwt",
   extraLoginOptions: {
     id_token: idToken,
-    verifierIdField: "sub", // same as your JWT Verifier ID
-    domain: "https://YOUR-APPLICATION-DOMAIN" || "http://localhost:3000",
+    verifierIdField: "sub", // same as your JWT Verifier ID field
   },
 });
 ```