Skip to content

Commit

Permalink
google guide updated
Browse files Browse the repository at this point in the history
  • Loading branch information
ihsraham committed Oct 16, 2023
1 parent 41a79ce commit f737791
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 16 deletions.
4 changes: 2 additions & 2 deletions src/common/guides/_setup-web3auth-dashboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
- 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`,
- Select the Web3Auth Network as `Sapphire Devnet`. We recommend creating a project in the `sapphire_devnet` 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),
Expand Down
26 changes: 12 additions & 14 deletions src/pages/content-hub/guides/google.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import SEO from "@site/src/components/SEO";
slug="/content-hub/guides/google"
/>

This guide will cover the basics of how to set up your Web3Auth SDK and Google Login for the custom authentication and provide you the steps on how to
This guide will cover the basics of how to set up your Web3Auth SDK and Google Login for custom authentication and provide you the steps on how to
develop a basic web application on the Ethereum blockchain.

**Live Demo:** https://web3auth-core-google-demo.vercel.app
Expand All @@ -47,7 +47,7 @@ When integrating Web3Auth with Google Login the flow looks something like this:

- When a user logs in with `Google`, Google 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
Expand All @@ -61,11 +61,9 @@ When integrating Web3Auth with Google Login the flow looks something like this:
### Setup your Google App

1. Follow Google’s instructions to [set up an OAuth 2.0 app.](https://support.google.com/cloud/answer/6158849?hl=en)
2. Paste the following as Redirect URI into the "Authorized redirect URIs" field.
2. Paste the following as a Redirect URI into the "Authorized redirect URIs" field.

- https://testing.openlogin.com/auth (for Web3Auth testnet used in demo applications)

- https://app.openlogin.com/auth (for Web3Auth mainnet used in production applications)
- [https://auth.web3auth.io/auth](https://auth.web3auth.io/auth)

![Google OAuth2.0 App Dashboard](/content-hub/social-providers/google/google-app-redirect-uri.png)

Expand All @@ -79,12 +77,12 @@ When integrating Web3Auth with Google Login the flow looks something like this:
configuration:

- Choose a name of your choice for the verifier identifier. `eg. google-core-verifier`
- Select environment: `testnet`, `mainnet`, `aqua`, or `cyan` as per your requirement.
- Select `Google` from the **Login Provider**. ![Google - Login Providers list on Web3Auth Dashboard](/dashboard/verifiers/login-providers-list.png)
- Select environment: `Sapphire Devnet` or `Sapphire Mainnet` as per your requirement.
- Select `Google` from the **Login Provider**. ![Google - Login Providers list on Web3Auth Dashboard](/images/dashboard/create-verifier.png)
- Paste the **Client ID** from the Google App(above) to the `Client ID` field.
![Google Client ID on Web3Auth Dashboard](/dashboard/verifiers/google-verifier.png)
- 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.
![Google Client ID on Web3Auth Dashboard](/images/dashboard/create-verifier-google.png)
- Click on the `Create` button to create your verifier. It may take up to 10 minutes to deploy the verifier on _Sapphire Devnet_. You'll receive an
email once it's complete.

- You will require the `verifierName` of the newly created verifier and `clientId` of the Plug and Play Project.

Expand All @@ -93,7 +91,7 @@ When integrating Web3Auth with Google Login the flow looks something like this:
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 Google Login.

<SetupBaseProject />
Expand Down Expand Up @@ -145,8 +143,8 @@ const user = await web3auth.getUserInfo();
console.log("User info", user);
```

Using the `getUserInfo` function, you can get the details of the logged in user. Please note that these details are not stored anywhere in Web3Auth
network, but are fetched from the id_token you received from AWS Cognito and lives in the frontend context.
Using the `getUserInfo` function, you can get the details of the logged-in user. Please note that these details are not stored anywhere in Web3Auth
network, but are fetched from the id_token you received from AWS Cognito and live in the frontend context.

### Logout

Expand Down

0 comments on commit f737791

Please sign in to comment.