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.
Read more about how the SDK works in MPC Core Kit SDK Reference.
This SDK is production ready, however, this works in the 2/2 recovery flow. This means that the backup/ recovery shares are copies of the device share, making the user hold only one of the shares is any case.
Web3Auth MPC Core Kit Web SDK is designed in a way to make it easier for you to integrate Web3Auth MPC. Without the social login share, it is not possible for you to sign signatures. Hence, the 2/2 flow is allows you the same experience as a 2/3 or 2/4 flow. You can generate as many backup shares as you want, but internally, they will be copies of the device share.
If you require the 2/3 flow for your application, you need to directly integrate the tKey MPC SDK. Here, there is one additional share which you can ask the user to safe gaurd, however the experience of using it will be the same. We are working on adding more features to this SDK and will be releasing them in the consecutive updates.
Setup
Setup your Google App
Follow Google’s instructions to set up an OAuth 2.0 app.
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
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.
- Choose a name of your choice for the verifier identifier.
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
- Yarn
- pnpm
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:
- Instantiation
- 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
You can checkout our Connect Blockchain documentation which has a detailed guide on how to connect to major blockchains out there.
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