From 020e6b2814959fce10f67567930c7d8b859f9fb1 Mon Sep 17 00:00:00 2001 From: Mohammad Shahbaz Alam Date: Fri, 29 Sep 2023 16:25:09 +0800 Subject: [PATCH] Update AuthProvider section for Firebase and Cognito --- .../federated-identity-providers.mdx | 32 ++++++++++++++++--- src/common/docs/_federated-providers.mdx | 6 ++-- src/common/guides/_instantiation-web3auth.mdx | 20 ++++++++---- .../_openlogin-config-code-firebase.mdx | 11 ++++--- .../guides/_setup-aws-cognito-verifier.mdx | 24 ++++++++++++++ .../guides/_setup-firebase-verifier.mdx | 25 +++++++++++++++ .../guides/_setup-web3auth-dashboard.mdx | 24 ++++++++------ src/pages/content-hub/guides/cognito.mdx | 31 ++++++------------ src/pages/content-hub/guides/firebase.mdx | 30 ++++++----------- 9 files changed, 132 insertions(+), 71 deletions(-) create mode 100644 src/common/guides/_setup-aws-cognito-verifier.mdx create mode 100644 src/common/guides/_setup-firebase-verifier.mdx diff --git a/docs/auth-provider-setup/federated-identity-providers.mdx b/docs/auth-provider-setup/federated-identity-providers.mdx index eec59529c..3e007fe7c 100644 --- a/docs/auth-provider-setup/federated-identity-providers.mdx +++ b/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 + + + +:::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 + + + +:::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. + +::: diff --git a/src/common/docs/_federated-providers.mdx b/src/common/docs/_federated-providers.mdx index f73546670..1c31a1b2f 100644 --- a/src/common/docs/_federated-providers.mdx +++ b/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", }, ], }, diff --git a/src/common/guides/_instantiation-web3auth.mdx b/src/common/guides/_instantiation-web3auth.mdx index 8a181dd20..2ea0d83f5 100644 --- a/src/common/guides/_instantiation-web3auth.mdx +++ b/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. diff --git a/src/common/guides/_openlogin-config-code-firebase.mdx b/src/common/guides/_openlogin-config-code-firebase.mdx index a7b7c6b57..05a2bc82c 100644 --- a/src/common/guides/_openlogin-config-code-firebase.mdx +++ b/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); diff --git a/src/common/guides/_setup-aws-cognito-verifier.mdx b/src/common/guides/_setup-aws-cognito-verifier.mdx new file mode 100644 index 000000000..d04922faf --- /dev/null +++ b/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. diff --git a/src/common/guides/_setup-firebase-verifier.mdx b/src/common/guides/_setup-firebase-verifier.mdx new file mode 100644 index 000000000..ed63815f6 --- /dev/null +++ b/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. diff --git a/src/common/guides/_setup-web3auth-dashboard.mdx b/src/common/guides/_setup-web3auth-dashboard.mdx index adc6100de..1b9788f9a 100644 --- a/src/common/guides/_setup-web3auth-dashboard.mdx +++ b/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) diff --git a/src/pages/content-hub/guides/cognito.mdx b/src/pages/content-hub/guides/cognito.mdx index 8566a480d..cee584cb5 100644 --- a/src/pages/content-hub/guides/cognito.mdx +++ b/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"; - -- 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. + - ![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. + ## 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& diff --git a/src/pages/content-hub/guides/firebase.mdx b/src/pages/content-hub/guides/firebase.mdx index 1b72b2f05..41f5d0ab1 100644 --- a/src/pages/content-hub/guides/firebase.mdx +++ b/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 - - -- 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/`. - - aud: `` - - 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. + - ![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. + ## 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 }, }); ```