Using Web3Auth MPC Core Kit SDK

This guide will help you make a react application using Web3Auth tKey MPC SDK, covering the basic functionality on how to use it.

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

Quick Start​

npx degit Web3Auth/web3auth-core-kit-examples/mpc-core-kit/mpc-core-kit-react-popup-example mpc-core-kit-react-popup-example && cd mpc-core-kit-react-popup-example && npm install && npm start

Prerequisites​

• A basic knowledge of JavaScript and React.
• Ideal to have a knowledge about service workers in React.
• A Google Developer account to be used as Login provider for Web3Auth Custom Authentication.
• Create a Web3Auth account on the Web3Auth Dashboard

Understanding the Web3Auth MPC Core Kit SDK​

With the 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.

Setup​

Setup your Google App​

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

2. Add your application's redirect URI into the "Authorized redirect URIs" field. This is the URL that Google will redirect to after authentication. http://localhost:3000/serviceworker/redirect

   

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

Setup your Web3Auth Dashboard​

• 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-tkey-w3a
  • Select environment: Please note the verifier will be deployed on sapphire environment, which is currently not available for public deployments directly. Please create a sample testnet verifier for your usecase and send us the details and we'll deploy it for you. Please contact us on https://web3auth.io/community
  • Select Google from the Login Provider.
  • Paste the Client ID from the Google App(above) to the Client ID field.
  • Click on Create button to create your verifier. It may take up to 10-20 minutes to deploy verifier on testnet. You'll receive an email once it's complete.

• You will require the verifierName of the newly created verifier.

Setting up your React Project​

We will need to use service workers while implementing the MPC Core Kit SDK to handle the redirect login flow. This can be done by using a progressive react application.

For a new project, get started with the following command:

npx create-react-app mpc-core-kit-demo --template cra-template-pwa-typescript
cd mpc-core-kit-demo

For an existing project, add a service worker.

Setting up the service worker​

Further, we need to setup the service worker according to our needs of the project, i.e handling the redirect login flow. Service worker basically sits between the frontend application, browser and the network. For the simplicity of this guide, we have added a boilerplate code. The easiest way to do that is as follows

mkdir public/serviceworker
wget https://github.com/Web3Auth/web3auth-core-kit-examples/blob/main/mpc-core-kit/mpc-core-kit-react-popup-example/public/serviceworker/sw.js -O public/serviceworker/sw.js

For polyfill issues and BigInt issue, please checkout the troubleshooting page.

For this guide, we'll be using a React application to demonstrate how the Web3Auth MPC SDK works. You can use any other framework of your choice using any other Web3Auth Guides / Examples. Just modify the functions to make it work.

Installation​

We need to add the @web3auth/mpc-core-kit package

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

yarn add @web3auth/mpc-core-kit

pnpm add @web3auth/mpc-core-kit

Web3 Libraries​

According to your preference, you can choose to install the web3 or ethers libraries, to talk to 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 2 step process where we add all the config details for Web3Auth:

1. Instantiation
2. Initialization

Please make sure all of this is happening in your application constructor. This makes sure that Web3Auth is initialised when your application starts up.

Importing the packages​

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

Instantiate the Web3Auth SDK​

import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CHAIN_NAMESPACES } from "@web3auth/base";

const coreKitInstance = new Web3AuthMPCCoreKit({
  web3AuthClientId: "BILuyqFCuDXAqVmAuMbD3c4oWEFd7PUENVPyVC-zmsF9euHAvUjqbTCpKw6gO05DBif1YImIVtyaxmEbcLLlb6w",
  web3AuthNetwork: WEB3AUTH_NETWORK.DEVNET,
  uxMode: "popup",
});

Here, we're 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 initialised them for the ethereum chain for this guide.

Additionally, sometimes you might face clogging in the network, due to the fact that 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.

Authentication​

Logging in​

Once initialized, you can use the connect() function to authenticate the user when they click the login button.

const provider = await coreKitInstance.connect({
  subVerifierDetails: {
    typeOfLogin: "google",
    verifier: "google-tkey-w3a", // you verifier name
    clientId: "774338308167-q463s7kpvja16l4l0kko3nb925ikds2p.apps.googleusercontent.com", // your client id recieved from google
  },
});

When connecting, your connect 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 Web3Auth network, but are fetched from the id token you received from AWS Cognito and lives 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();

Logout​

await coreKitInstance.logout();

Backup Share​

To enable non custodiality of the setup, one of the shares is automatically stored in the user's device. This share can be deleted by the user by mistake or by the user's device being compromised. If that happens, user can lose access to the account. To avoid this, we can export a backup share for the user and ask them to input it whenever they want to recover their account.

Export Backup Share​

Returns the Backup Mnemonic Share, which can be used to recover the User's account.

await coreKitInstance.exportBackupShare();

Input Backup Share​

Inputs the Backup Mnemonic Share to recover the User's account.

await coreKitInstance.inputBackupShare(seedPhrase);

Security Question Share​

A security question share can be used to easily recover user's account. Since this share can take any question and password, you can innovatively use this to create any flow for your users to recover their account. From a general password login to using mobile OTP based login and associating a certain parameter on successful authentication, you can use this share to create any flow you want.

Add Security Question Share​

Add a new Security Question Share to the user's account.

await coreKitInstance.addSecurityQuestionShare("What is your password?", password);

Recover Security Question Share​

Recover the User's account using the Security Question Share.

await coreKitInstance.recoverSecurityQuestionShare("What is your password?", password);

Change Security Question Share​

Changes the Security Question Share of the User's account. This helps you change the password if the user has lost it somehow. However, this function can only be used if the user has already logged in within the application while meeting the minimum share threshold.

await coreKitInstance.changeSecurityQuestionShare("What is your password?", password);

Delete Security Question Share​

Deletes the Security Question Share of the User's account. This function can only be used if the user has already logged in within the application while meeting the minimum share threshold.

await coreKitInstance.deleteSecurityQuestionShare("What is your password?");

Interacting with Blockchain​

Once you are done with the setting of the web3 provider, you can use it to make blockchain calls. This can be used with any EVM compatible chain

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 Web3Auth's Community Portal