Skip to main content

How to use Google with Web3Auth SFA JS SDK

websingle factor authgooglecustom authenticationevmWeb3Auth Team | 14 November, 2023

This guide will cover the basics of how to set up your Web3Auth SDK and Google account for the integration and provide you with the links on how to develop a basic web application on the blockchain of your choice.

Quick Start​

npx degit Web3Auth/web3auth-core-kit-examples/single-factor-auth-web/sfa-web-google-example sfa-web-google-demo && cd sfa-web-google-demo && npm install && npm run start

How it works?​

Single Factor Auth SDKs allow for the integration of a single factor of authentication, such as social login, into your dApp. They are designed to be simple to use and can be integrated into your dApp with minimal effort, allowing you to directly use the Web3Auth Network for Wallet Management. This is one of the most common use cases of Web3Auth, however, it is semi-custodial in nature, since the key is custodial to the Auth Provider and the Web3Auth Network.

This diagram describes the relationship between the Web3Auth SDK and integrating application
  • The first step for the application is to get the user authenticated by a login provider(here, Google) and get the user's idToken.
  • Once the social login is successful, depending on whether the user has enabled Multi-Factor Authentication(MFA) or not, the key is generated.
  • If the user has not enabled MFA, we use the @web3auth/single-factor-auth SDK to retrieve the private key shares from the Web3Auth auth network nodes and reconstruct the private key.
  • If the user has enabled MFA, an error message is shown that the user has enabled MFA and in this case, they should be using the Web3Auth Plug and Play Web SDKs.

Prerequisites​

  • For Web Apps: A basic knowledge of JavaScript is required to use Web3Auth SDK.

  • For Mobile Apps: For the Web3Auth Mobile SDKs, you have a choice between iOS, Android, React Native & Flutter. Please refer to the Web3Auth SDK Reference for more information.

  • Create a Web3Auth account on the Web3Auth Dashboard

Setup your Google App​

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

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

    Google OAuth2.0 App Dashboard

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

Setup your Web3Auth Dashboard​

  • Create a Project from the Project Section of the Web3Auth Developer Dashboard.

    Plug n Play Project Creation on Web3Auth Dashboard

    • 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 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, Solana, XRPL & Casper).

    • 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

  • Create a Verifier from the Custom Auth Section of the Web3Auth Developer Dashboard with following configuration:

    • Choose a name of your choice for the verifier identifier. eg. google-core-verifier
    • Select environment: Sapphire Devnet or Sapphire Mainnet as per your requirement.
    • Select Google from the Login Provider. Google - Login Providers list on Web3Auth Dashboard
    • Paste the Client ID from the Google App(above) to the Client ID field. Google Client ID on Web3Auth Dashboard
    • 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 the clientId of the project.

Using the Web3Auth SFA JS SDK​

To use the Web3Auth SFA JS SDK, you need to add @web3auth/single-factor-auth to your project.

Setting up your base project for using Web3 libraries:​

If you are starting from scratch, to set up this project locally, you will need to create a base Web application, where you can install the required dependencies. However, while working with Web3, there are a few base libraries, which need additional configuration. This is because certain packages are not available in the browser environment, and we need to polyfill them manually. You can follow this documentation where we have mentioned the configuration changes for some popular frameworks for your reference.

Installation​

For this project, you need to add the following Web3Auth dependencies to your package.json

npm install --save @web3auth/single-factor-auth @web3auth/ethereum-provider @web3auth/base web3 @react-oauth/google

Understanding the Dependencies​

@web3auth/base​

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.

npm install --save @web3auth/base
@web3auth/ethereum-provider​

This package is used to provide the Ethereum provider to the Web3Auth SDK. This is required to interact with the blockchain.

npm install --save @web3auth/ethereum-provider
@web3auth/single-factor-auth​

This package is the core package for Single Factor Auth JS SDK.

npm install --save @web3auth/single-factor-auth
@react-oauth/google​

This package is used to provide the Google SDK to the app. This is required to retrieve the idToken from Google as the login provider.

npm install --save @react-oauth/google
web3​

This package is used to interact with the blockchain.

npm install --save web3

Wrapping component with GoogleOAuthProvider​

To use the Google SDK, we need to wrap our app with the GoogleOAuthProvider component. This component provides the Google clientId to the app.

import ReactDOM from "react-dom/client";
import App from "./App";
import { GoogleOAuthProvider } from "@react-oauth/google";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <GoogleOAuthProvider clientId="519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com">
    <App />
  </GoogleOAuthProvider>,
);

Initialization​

Once installed, your Web3Auth application needs to be initialized. Initialization is a multi-step process where we add all the config details for Web3Auth SDK:

Importing the packages​
import { Web3Auth } from "@web3auth/single-factor-auth";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { GoogleLogin, CredentialResponse, googleLogout } from "@react-oauth/google";
Instantiate the Web3Auth SFA JS SDK​
import { Web3Auth } from "@web3auth/single-factor-auth";
import { CHAIN_NAMESPACES } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { GoogleLogin, CredentialResponse, googleLogout } from "@react-oauth/google";

const clientId =
  "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ"; // get from https://dashboard.web3auth.io

const chainConfig = {
  chainId: "0x1",
  displayName: "Ethereum Mainnet",
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  tickerName: "Ethereum",
  ticker: "ETH",
  decimals: 18,
  rpcTarget: "https://rpc.ankr.com/eth",
  blockExplorerUrl: "https://etherscan.io",
};

// Initialising Web3Auth Single Factor Auth SDK
const web3authSfa = new Web3Auth({
  clientId, // Get your Client ID from Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet", // Get your Network from Web3Auth Dashboard
  usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey.
});

// Initializing Ethereum Provider
const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

Here, we're using the chainConfig property to set the chainId and chainNamespace among other parameters. The chainId and chainNamespace are the id and the namespace 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 to select from.

Additionally, sometimes you might face clogging in the network because 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.

Initializing the Web3Auth SDK​

web3authSfa.init(privateKeyProvider);

Authentication​

Getting the idToken and initializing Web3Auth​

import { GoogleLogin, CredentialResponse, googleLogout } from "@react-oauth/google";

const onSuccess = async (response: CredentialResponse) => {
  try {
    const idToken = response.credential;
    setIdToken(idToken!);
    const { email } = parseToken(idToken);
    console.log(email);
    await web3authSfa.connect({
      verifier: "w3a-google-demo",
      verifierId: email,
      idToken: idToken!,
    });
  } catch (err) {
    // Single Factor Auth SDK throws an error if the user has already enabled MFA
    // One can use the Web3AuthNoModal SDK to handle this case
    setIsLoggingIn(false);
    console.error(err);
  }
};

Add this to your login page:

<GoogleLogin onSuccess={onSuccess} />
info

Since we are directly using Single Factor Auth SDK to log in, the Web3Auth getUserInfo function won't work. We need to get the user details directly from the idToken.

Get the User Profile​

import { safeatob } from "@toruslabs/openlogin-utils";

const parseToken = (token: any) => {
  try {
    const token = token.split(".")[1]; // payload
    return JSON.parse(safeatob(token));
  } catch (err) {
    console.error(err);
    return null;
  }
};

const userProfile = parseToken(idToken);

Logout​

Logging out your user is as simple as calling the logout function on the Web3Auth SDK.

await googleLogout();
await web3authSfa.logout();

Interacting with the Blockchain​

So if you have completed this far, it means that you have successfully authenticated your user. Now, you can use the provider returned by Web3Auth as web3auth.provider to interact with your blockchain. You can use the Provider SDKs to perform RPC Calls to your blockchain.

Web3Auth is chain agnostic, ie. depending on whatever blockchain or layer-2 you use, Web3Auth can easily support that. Web3Auth has native providers for EVM and Solana blockchains and for others, you can get the private key in the user scope and make RPC calls. For standardising the type of provider, Web3Auth Base provides a IProvider from which you can create your own provider.

  • Ethereum Provider gives you the capability of making RPC calls to the EVM compatible blockchains.
  • Solana Provider gives you the capability of making RPC calls to the Solana blockchain.
  • XRPL Provider gives you the capability of making RPC calls to the XRPL blockchain.
  • If you want to use any other chain except Solana or EVM chains, for ex: Starknet, you can specify the value of chainNamespace field as other in the Web3Auth SDK Constructor. Refer to: Using other blockchains

Get User Accounts​

const getAccounts = async () => {
  if (!provider) {
    console.log("provider not initialized yet");
    return;
  }
  const web3 = new Web3(provider as any);
  const userAccounts = await web3.eth.getAccounts();
  console.log(userAccounts);
};

View User Balance​

const getBalance = async () => {
  if (!provider) {
    console.log("provider not initialized yet");
    return;
  }
  const web3 = new Web3(provider as any);
  const accounts = await web3.eth.getAccounts();
  const balance = await web3.eth.getBalance(accounts[0]);
  console.log(web3.utils.fromWei(balance));
};

Sign Message​

const signMessage = async () => {
  if (!provider) {
    console.log("provider not initialized yet");
    return;
  }
  const web3 = new Web3(provider as any);
  // Get user's Ethereum public address
  const account = (await web3.eth.getAccounts())[0];

  // Message
  const message = "Hello MPC, Bye Bye SeedPhrase";

  const typedMessage = [
    {
      type: "string",
      name: "message",
      value: message,
    },
  ];
  const params = [JSON.stringify(typedMessage), account];
  const method = "eth_signTypedData";

  const signedMessage = await this.provider.request({
    method,
    params,
  });
  console.log(signedMessage);
};

Sign Transaction​

const signTransaction = async () => {
  if (!provider) {
    console.log("provider not initialized yet");
    return;
  }
  const web3 = new Web3(provider as any);
  const accounts = await web3.eth.getAccounts();

  const txRes = await web3.eth.signTransaction({
    from: accounts[0],
    to: accounts[0],
    value: web3.utils.toWei("0.0001"),
    chainId: 1, // change it to your specific chain id.
  });
  console.log(txRes.transactionHash);
};

Send Transaction​

const sendTransaction = async () => {
  if (!provider) {
    console.log("provider not initialized yet");
    return;
  }
  const web3 = new Web3(provider as any);
  const accounts = await web3.eth.getAccounts();

  const txRes = await web3.eth.sendTransaction({
    from: accounts[0],
    to: accounts[0],
    value: web3.utils.toWei("0.0001"),
    chainId: 1, // change it to your specific chain id.
  });
  console.log(txRes.transactionHash);
};

Example Code​

The code for the example can be found here.

Questions?​

Ask us on Web3Auth Community Portal.