Google Social Login with Web3Auth

Guide

Using Google Login with Web3Auth

Create a Google app

1. Follow Google’s instructions to set up an OAuth 2.0 app.

2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.

   • https://auth.web3auth.io/auth

   

3. Obtain the OAuth Client ID from your App on the Google Developer dashboard

Set up Google

1. Create a verifier for your Google application by first clicking on Social Login Provider and then selecting Google as the Login provider from the dropdown list.

   

2. Paste the Client ID from the Google App(above) to the Client ID field and click on Create.

   

   note

   Google Client ID is the OAuth Client ID obtained from the Google Developer dashboard and it's a required field.

Example

Modal SDK

import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

// Create OpenloginAdapter instance once you have created Web3Auth instance
const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    loginConfig: {
      // Google login
      google: {
        verifier: "w3a-google-demo", // Pass the Verifier name here
        typeOfLogin: "google", // Pass on the login provider of the verifier you've created
        clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google `Client ID` here
      },
    },
  },
});

// Configure the adapter with Web3Auth
web3authInstance.configureAdapter(openloginAdapter);

// Initialize Modal
await web3authInstance.initModal();

// Login with Google
await web3authInstance.connect();

No Modal SDK

import { OpenloginAdapter } from "@web3auth/openlogin-adapter";

// Create OpenloginAdapter instance once you have created Web3AuthNoModal instance const
openloginAdapter = new OpenloginAdapter({ adapterSettings: { uxMode: "redirect", loginConfig: { //
focus-start google: { verifier: "w3a-google-demo", // Pass the Verifier name here typeOfLogin:
"google", // Pass on the login provider of the verifier you've created clientId:
"519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // Pass on the Google
`Client ID` here }, // focus-end }, }, });

// Configure the adapter with Web3AuthNoModal
web3authNoModalInstance.configureAdapter(openloginAdapter);

// Initialize await web3authNoModalInstance.init();

// Login with Google await web3authNoModalInstance.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "google", });