Skip to content

Commit

Permalink
updated firebase guide
Browse files Browse the repository at this point in the history
  • Loading branch information
ihsraham committed Oct 15, 2023
1 parent d815804 commit 41a79ce
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 15 deletions.
18 changes: 13 additions & 5 deletions src/common/guides/_installation-firebase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down
21 changes: 11 additions & 10 deletions src/pages/content-hub/guides/firebase.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,9 @@ When integrating Web3Auth with Firebase, the login flow looks something like thi

<Web3AuthPrerequisites />

- 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

Expand Down Expand Up @@ -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)

Expand All @@ -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)

Expand All @@ -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.

<SetupBaseProject />
Expand All @@ -136,7 +136,8 @@ For this guide here, we will be talking through the [Web3Auth Plug and Play No M
<InitializationIntro />

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

Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 41a79ce

Please sign in to comment.