Google Social Login with Web3Auth

info

Using Google with Web3Auth Guide

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

import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

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
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

// Initialize Modal
await web3auth.initModal();

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

NoModal

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    uxMode: "redirect",
    loginConfig: {
      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
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

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

Set up Google via Auth0

1. Create a verifier for your Auth0 application by selecting Auth0 as the Login provider from this modal.

2. Select Google as the Authentication Type based on the dropdown.

3. Enter the Auth0 Client ID and Auth0 Domain from your Auth0 application. See how to create a new Auth0 application here.

   

4. Add the Google Social Connection to your Auth0 application.

5. Click on the Create button to create Google Custom Authentication via Auth0 verifier.

Example

Modal

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

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a Plug n Play project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    uxMode: "popup",
    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
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

// Initialize Modal
await web3auth.initModal();

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

NoModal

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ";
// get it from https://dashboard.web3auth.io by creating a project.

const chainConfig = {
  chainNamespace: "eip155",
  chainId: "0x1",
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorerUrl: "https://etherscan.io",
  ticker: "ETH",
  tickerName: "Ethereum",
  logo: "https://images.toruswallet.io/ethereum.svg",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3auth = new Web3AuthNoModal({
  clientId,
  web3AuthNetwork: "sapphire_mainnet",
  privateKeyProvider: privateKeyProvider,
});

const openloginAdapter = new OpenloginAdapter({
  privateKeyProvider,
  adapterSettings: {
    loginConfig: {
      jwt: {
        verifier: "w3a-auth0-demo", // Pass the Verifier name here
        typeOfLogin: "jwt", // Pass on the login provider of the verifier you've created
        clientId: "hUVVf4SEsZT7syOiL0gLU9hFEtm2gQ6O", // Pass on the Auth0 `Client ID` here
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);

// Initialize
await web3auth.init();

// Login with Google
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    domain: "https://web3auth.au.auth0.com", // Pass on the Auth0 `Domain` here
    verifierIdField: "sub", // Pass on the field name of the `sub` field in the JWT
    connection: "google-oauth2", // Use this to skip Auth0 Modal for Google login
  },
});