From 41a79ce64ede32e9542f20d399d883c55e29f8bf Mon Sep 17 00:00:00 2001 From: Maharshi Mishra Date: Sun, 15 Oct 2023 23:10:46 +0530 Subject: [PATCH] updated firebase guide --- src/common/guides/_installation-firebase.mdx | 18 ++++++++++++----- src/pages/content-hub/guides/firebase.mdx | 21 ++++++++++---------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/common/guides/_installation-firebase.mdx b/src/common/guides/_installation-firebase.mdx index c0439e4c4..15ac6a96e 100644 --- a/src/common/guides/_installation-firebase.mdx +++ b/src/common/guides/_installation-firebase.mdx @@ -4,7 +4,7 @@ import TabItem from "@theme/TabItem"; For this project, you need to add the following Web3Auth dependencies to your package.json ```shell -npm install --save @web3auth/no-modal @web3auth/openlogin-adapter @web3auth/base web3 firebase +npm install --save @web3auth/no-modal @web3auth/openlogin-adapter @web3auth/ethereum-provider @web3auth/base web3 firebase ``` #### Understanding the Dependencies @@ -31,16 +31,24 @@ npm install --save @web3auth/no-modal ##### `@web3auth/openlogin-adapter` -For using Custom Authentication, we need to use the **OpenLogin Adapter**, where we can initialise the authentication details. +For using Custom Authentication, we need to use the **OpenLogin Adapter**, where we can initialize the authentication details. ```shell npm install --save @web3auth/openlogin-adapter ``` +##### `@web3auth/ethereum-provider` + +For using the EVM compatible blockchains, we need to use the **Ethereum Provider** package, which will be used to connect to the blockchain. + +```shell +npm install --save @web3auth/ethereum-provider +``` + ##### `@web3auth/base` -Since we're using typescript, we need the **`@web3auth/base`** package to provide types of the different variables we'll be using throughout the app -building process. This reduces errors to a very large extent. +Since we're using typescript, we need the **`@web3auth/base`** package to provide the types of the different variables we'll be using throughout the +app building process. This reduces errors to a very large extent. ```shell npm install --save @web3auth/base @@ -70,7 +78,7 @@ npm install --save web3 ##### `firebase` -We will be installing `firebase` to enable Firebase auth in our application. If you're already using npm and a module bundler such as webpack or +We will be installing `firebase` to enable Firebase auth in our application. If you're already using npm and a module bundler such as Webpack or Rollup, you can run the following command to install the latest SDK: ```shell diff --git a/src/pages/content-hub/guides/firebase.mdx b/src/pages/content-hub/guides/firebase.mdx index 41f5d0ab1..caf300684 100644 --- a/src/pages/content-hub/guides/firebase.mdx +++ b/src/pages/content-hub/guides/firebase.mdx @@ -51,9 +51,9 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi -- A [Firebase](https://console.firebase.google.com) account to be used as Federated Identity Provider. +- A [Firebase](https://console.firebase.google.com) account to be used as a Federated Identity Provider. -- A [Google Developer](https://console.developers.google.com) account to be used as Identity provider for Firebase. +- A [Google Developer](https://console.developers.google.com) account to be used as an Identity provider for Firebase. ## Setup @@ -83,7 +83,7 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi ![Firebase Project - Set up auth 1](/content-hub/guides/firebase/firebase-setup-auth-1.svg) -- From **Sign-in method** tab, select any provider you wish to enanle. For the purpose of this guide, we'll be enabling **Google**. +- From the **Sign-in method** tab, select any provider you wish to enable. For this guide, we'll be enabling **Google**. ![Firebase Project - Set up auth 2](/content-hub/guides/firebase/firebase-setup-auth-2.svg) @@ -98,12 +98,12 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi ![Firebase Project - Set up web 1](/content-hub/guides/firebase/firebase-setup-web-1.svg) -- In the next screen, enter the **App nickname** and click on **Register** button to register the app for Web. +- In the next screen, enter the **App nickname** and click on the **Register** button to register the app for Web. ![Firebase Project - Set up web 2](/content-hub/guides/firebase/firebase-setup-web-2.svg) -- Next screen shows ways to add **Firebase** to your application. We will be using the config from here later in the guide. Please keep a note of the - `firebaseConfig` object. +- The next screen shows ways to add **Firebase** to your application. We will be using the config from here later in the guide. Please keep a note of + the `firebaseConfig` object. ![Firebase Project - Set up web 3](/content-hub/guides/firebase/firebase-setup-web-3.svg) @@ -122,7 +122,7 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi 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 Plug and Play No Modal SDK](/sdk/pnp/web/no-modal) and using the +For this guide, we will be talking through the [Web3Auth Plug and Play No Modal SDK](/sdk/pnp/web/no-modal) and using the [OpenLogin Provider](/sdk/pnp/web/adapters/openlogin) alongside it to enable Custom Authentication through Firebase. @@ -136,7 +136,8 @@ For this guide here, we will be talking through the [Web3Auth Plug and Play No M For this guide, we're only focusing on the Instantiation, Configuration for the Openlogin Adapter (the default adapter that enables social logins) and -Initialization of the Web3Auth SDK. To know more about the other things you can do with Web3Auth, checkout our [SDK Reference](/sdk/pnp/web/no-modal). +Initialization of the Web3Auth SDK. To know more about the other things you can do with Web3Auth, check out our +[SDK Reference](/sdk/pnp/web/no-modal). #### Instantiating Web3Auth @@ -175,10 +176,10 @@ makes sure that the Openlogin Adapter can connect to the correct verifier and Fi ### Authentication -Login is a two step process: +Login is a two-step process: 1. Firstly, we will login with **Firebase(Google)** to get the `idToken`. -2. Next, we will pass the received `idToken` to **web3auth** to login via Web3Auth SDK to generate the public-private key pair for easier onboarding +2. Next, we will pass the received `idToken` to **web3auth** to log in via Web3Auth SDK to generate the public-private key pair for easier onboarding to Web3. ##### Login with Firebase