Skip to main content

Step-by-Step Guide to Implement Web3Auth MPC SDK in React

webcorekitmpcgooglewhitelabelreactethereumWeb3Auth Team | May 15, 2023

This guide will help you create a React application using Web3Auth's MPC Core Kit SDK, covering the basic functionalities of how to use it.

Live Demo: https://w3a.link/mpc-example

Quick Start​

npx degit Web3Auth/web3auth-core-kit-examples/mpc-core-kit-web/implicit-flow-examples/mpc-core-kit-popup-flow-example w3a-mpc-core-kit-popup-flow-example && npm install && npm start

Prerequisites​

  • A basic knowledge of JavaScript and React.
  • A Web3Auth account on the Web3Auth Dashboard and a verifier.

Understanding the Web3Auth MPC Core Kit SDK​

With Web3Auth infrastructure, your key is divided into multiple parts and stored across your devices and our Auth Network. This ensures that your key is always available and never stored in a single place. While in the traditional Web3Auth SDK, your key was dynamically reconstructed in the frontend using threshold signatures, with the new Web3Auth MPC (Multi-Party Computation) architecture, it is never reconstructed. Instead, these partial keys are stored across different locations, and your device is used to make partial signatures for your message/transaction. These are finally returned to the frontend where using TSS (Threshold Signature Scheme), these signatures are combined to make a final signature. You can use this finally signed message/transaction to make a transaction on the blockchain.

tip

Read more about how the SDK works in the MPC Core Kit SDK Reference.

How to set up Web3Auth Dashboard​

If you haven't already, sign up on the Web3Auth platform. It is free and gives you access to the Web3Auth's base plan. After the basic setup, explore other features and functionalities offered by the Web3Auth Dashboard. It includes custom verifiers, whitelabeling, analytics, and more. Head to the Web3Auth's documentation page for detailed instructions on setting up the Web3Auth Dashboard.

How to set up a Verifier​

If you haven't already, sign up on the Web3Auth platform. It is free and gives you access to the Web3Auth's base plan. After the basic setup, you can create a custom verifier. Head to the Web3Auth's documentation page for detailed instructions on setting up a custom verifier.

Installation​

Let's start by adding the @web3auth/mpc-core-kit package.

npm install --save @web3auth/mpc-core-kit

Web3 Libraries​

Depending on your preference, you can choose to install the web3, ethers, or viem libraries to interact with the EVM-compatible blockchains under the hood.

We'll be using web3 for this guide.

npm install --save web3

Initialization​

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

  1. Instantiation
  2. Initialization

Ensure all of this happens in your application constructor. This ensures that Web3Auth is initialized when your application starts up.

Importing the Packages​

import { Web3AuthMPCCoreKit, WEB3AUTH_NETWORK } from "@web3auth/mpc-core-kit";
import { CHAIN_NAMESPACES } from "@web3auth/base";

Instantiate the SDK​

const coreKitInstance = new Web3AuthMPCCoreKit({
  web3AuthClientId:
    "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ",
  web3AuthNetwork: WEB3AUTH_NETWORK.MAINNET,
  setupProviderOnInit: false, // needed to skip the provider setup
  manualSync: true, // This is the recommended approach
});

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0x1", // Use 0xaa36a7 for Sepolia Testnet
  rpcTarget: "https://rpc.ankr.com/eth",
  displayName: "Ethereum Mainnet",
  blockExplorer: "https://etherscan.io/",
  ticker: "ETH",
  tickerName: "Ethereum",
};

const evmProvider = new EthereumSigningProvider({ config: { chainConfig } });
evmProvider.setupProvider(coreKitInstance);

Here, we're instantiating the Web3Auth MPC CoreKit SDK and using the chainConfig property to set the chainId and chainNamespace. The chainId and chainNamespace are the id and the namespace respectively of the EVM chain you're connecting to. We've initialized them for the Ethereum Mainnet chain for this guide.

Sometimes, you might face network congestion. To avoid this, you can use the rpcTarget property to specify the URL of the node you want to connect to.

Initialize the SDK​

await coreKitInstance.init();
// This will initialize the SDK

// Check the status of the SDK with
coreKitInstance.status;

Authentication​

Logging In​

Once initialized, you can use the loginWithOauth() or loginWithJWT() function to authenticate the user when they click the login button. Here, you can use a Single verifier or an Aggregate verifier to authenticate the user.

const web3authProvider = await coreKitInstance.loginWithOauth({
  subVerifierDetails: {
    typeOfLogin: "google",
    verifier: "w3a-google-demo", // your verifier name
    clientId: "519228911939-cri01h55lsjbsia1k7ll6qpalrus75ps.apps.googleusercontent.com", // your client id received from google
  },
});

When connecting, your loginWithOauth() function takes the arguments to connect to the loginProvider for the login.

Get the User Profile​

const user = await coreKitInstance.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 the Web3Auth network but are fetched from the ID token you received from AWS Cognito and live in the frontend context.

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

Get Key Details​

Returns the details of how the user's key is managed by the MPC Core Kit.

await coreKitInstance.getKeyDetails();

For more usage, please check the MPC Core Kit SDK Usage.

Logout​

await coreKitInstance.logout();

Interacting with Blockchain​

Once you have set up the web3 provider, you can use it to make blockchain calls. This can be used with any EVM-compatible chain.

tip

You can check our Connect Blockchain documentation, which has a detailed guide on how to connect to major blockchains.

Example Code​

The code for the application we developed in this guide can be found in the examples repository. Check it out and try running it locally yourself!

Questions?​

Ask us on the Web3Auth's Community Support Portal