Using Web3Auth MPC Core Kit SDK
This guide will help you make a react application using Web3Auth tKey MPC SDK, covering the basic functionality 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.
- Ideal to know 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.
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 the
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 at 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 the
Create
button to create your verifier. It may take up to 10-20 minutes to deploy the 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. The 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 initialized 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 initialized 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 web3authProvider = 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 the noncustodiality 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, the 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, that 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 a 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 accounts. From a general password login to using a 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 check 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 Support Portal