Skip to main content

Quick Start

1. Select the Web3Auth Product you would like to build upon

Plug and Play

Use pre configured UX flows and integrate your Web3Auth instance quickly.

Core Kit

Build on top of the Web3Auth infrastructural layer and build your own UX flows.

2. Select which SDK and platform you intend to use

Select which SDK to use

Select a framework



Integrate Web3Auth Plug and Play Web Modal SDK in 4 simple steps in your React App

1. Install Web3Auth​

Install the Web3Auth package in your React project.

npm install --save @web3auth/modal

2. Get your Client ID from the Web3Auth Dashboard​

Visit the Web3Auth Dashboard and create a new project. Use the Client ID of the project to start your integration.

3. Initialize Web3Auth for your preferred blockchain​

Web3Auth needs to be initialized as soon as your app loads up to enable the user to log in. Preferably done within a constructor, initialization is the step where you can pass on all the configurations for Web3Auth you want. A simple integration for some of the popular blockchains will look like this:

import { Web3Auth } from "@web3auth/modal";

// Initialize within useEffect()
const web3auth = new Web3Auth({
  clientId: "BPi5PB_UiIZ-cPz1GtV5i1I2iOSOHuimiXBI0e-Oe_u6X3oVAbCiAZOTEBtTXw4tsluTITPqA8zMsfxIKMjiqNQ", // Get your Client ID from the Web3Auth Dashboard
  web3AuthNetwork: "sapphire_mainnet", // Web3Auth Network
  chainConfig: {
    chainNamespace: "eip155",
    chainId: "0x1",
    rpcTarget: "https://rpc.ankr.com/eth",
    displayName: "Ethereum Mainnet",
    blockExplorer: "https://goerli.etherscan.io",
    ticker: "ETH",
    tickerName: "Ethereum",
  },
});

await web3auth.initModal();

4. Login your User​

Once you're done initializing, just create a button that triggers to open the login modal for the user on their request. Logging in is as easy as:

await web3auth.connect();
caution

If you're new to Web3 development, you might be facing certain issues with Webpack while configuring your application.

Please follow the below steps to troubleshoot your application.

&. Troubleshoot Webpack in React​

  • Install react-app-rewired into your application
npm install --save-dev react-app-rewired
  • Check for the missing libraries in your build and included packages, and accordingly polyfill them. For Web3Auth, you just need to polyfill the buffer and process libraries
npm install --save-dev buffer process
  • Create config-overrides.js in the root of your project folder with the content:
const webpack = require("webpack");

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: false, // require.resolve("crypto-browserify") can be polyfilled here if needed
    stream: false, // require.resolve("stream-browserify") can be polyfilled here if needed
    assert: false, // require.resolve("assert") can be polyfilled here if needed
    http: false, // require.resolve("stream-http") can be polyfilled here if needed
    https: false, // require.resolve("https-browserify") can be polyfilled here if needed
    os: false, // require.resolve("os-browserify") can be polyfilled here if needed
    url: false, // require.resolve("url") can be polyfilled here if needed
    zlib: false, // require.resolve("browserify-zlib") can be polyfilled here if needed
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  config.ignoreWarnings = [/Failed to parse source map/];
  config.module.rules.push({
    test: /\.(js|mjs|jsx)$/,
    enforce: "pre",
    loader: require.resolve("source-map-loader"),
    resolve: {
      fullySpecified: false,
    },
  });
  return config;
};
  • Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

The missing Nodejs polyfills should be included now and your app should be functional with web3.

caution

There might be a possibility that you might need to polyfill more libraries, in case you're using any other blockchain library alongside Web3Auth that requires them. Generally the libraries like crypto-browserify, stream-browserify, browserify-zlib, assert, stream-http, https-browserify, os-browserify, url are the ones that might be required. crypto-browserify and stream-browserify being the most common polyfills.

note

If you're using craco, similar changes need to be made to craco.config.js