Skip to main content

Creating a Multichain Connection with Web3Auth and React PnP no-modal SDK

multichainpolkadotEVMcosmosno-modalWeb3Auth Team | February 9, 2024

This guide will cover the basics of how to integrate Web3Auth with different blockchains at the same time. In this demo, you will be able to authenticate with different social logins and get different addresses from each blockchain. Of course, you can interact and sign transactions with any of them.

You will be able to make calls like get the user's account, fetch balance, sign transaction, send transaction, read from and write to smart contracts, etc.

The Web3Auth Web SDK is designed to support any blockchain that follows the secp256k1 & ed25519 curves. This means it works seamlessly with all EVMs such as Ethereum, Polygon, Binance Smart Chain, and others. Additionally, it supports non-EVM blockchains like Aptos, Cosmos, Polkadot, Solana, Tezos, Bitcoin, among many others. The SDK is not limited to these examples and is capable of integrating with any blockchain that adheres to these cryptographic standards, offering a wide range of compatibility to suit various needs and preferences in the blockchain ecosystem.

Quick Start

You can run the following command or you can check the full example in our Github.

npx degit Web3Auth/web3auth-pnp-examples/web-no-modal-sdk/blockchain-connection-examples/multi-chain-no-modal-example/ w3a-multi-chain-no-modal-demo && cd w3a-multi-chain-no-modal-demo && npm install && npm run start

Prerequisites

  • For Web Apps: A basic knowledge of JavaScript is required to use Web3Auth SDK.

  • For Mobile Apps: For the Web3Auth Mobile SDKs, you have a choice between iOS, Android, React Native & Flutter. Please refer to the Web3Auth SDK Reference for more information.

  • Create a Web3Auth account on the Web3Auth Dashboard

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 Web3Auth's documentation page for detailed instructions on setting up the Web3Auth Dashboard.

Using the Web3Auth Plug and Play No Modal SDK

To use the Web3Auth Plug and Play No Modal SDK, you need to add the dependency of the respective platform SDK of Web3Auth to your project. To learn more about the available SDKs, please have a look at this documentation page.

For this guide, we will discuss the Web3Auth Plug and Play No Modal SDK and the different blockchain providers.

Setting up your base project for using Web3 libraries:

If you are starting from scratch, to set up this project locally, you will need to create a base Web application, where you can install the required dependencies. However, while working with Web3, there are a few base libraries, which need additional configuration. This is because certain packages are not available in the browser environment, and we need to polyfill them manually. You can follow this documentation where we have mentioned the configuration changes for some popular frameworks for your reference.

Installation

We need many dependencies to make this work::


npm install @web3auth/base @web3auth/no-modal @web3auth/openlogin-adapter @web3auth/ethereum-provider @web3auth/solana-provider @polkadot/api @polkadot/util-crypto @taquito/signer @taquito/taquito @taquito/utils @tezos-core-tools/crypto-utils @starkware-industries/starkware-crypto-utils web3 ethers

Instantiating Web3Auth

Import the required modules for web3auth and any providers you want to use.


import { Web3AuthNoModal } from "@web3auth/no-modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS } from "@web3auth/base";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { web3AuthConfig, openloginAdapterConfig } from "./config/web3auth";

import StartkNetRPC from "./RPC/startkNetRPC"; // for using starkex
import EthereumRPC from "./RPC/ethRPC-web3"; // for using web3.js
import SolanaRPC from "./RPC/solanaRPC"; // for using solana
import TezosRPC from "./RPC/tezosRPC"; // for using tezos
import PolkadotRPC from "./RPC/polkadotRPC"; // for using polkadot

Call init when the app is loaded, it will initialize the Web3Auth instance. Also don't forget to properly configure the clientId, web3AuthConfig and openloginAdapterConfig objects in the config directory.

const init = async () => {
try {
const web3auth = new Web3AuthNoModal(web3AuthConfig);
setWeb3auth(web3auth);

const openloginAdapter = new OpenloginAdapter(openloginAdapterConfig);
web3auth.configureAdapter(openloginAdapter);

await web3auth.init();

setProvider(web3auth.provider);
if (web3auth.connected) {
setLoggedIn(true);
}
} catch (error) {
console.error(error);
}
};

Login with Web3Auth

You must call this function to start the login process. You can change the loginProvider to any of the available social logins.

const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "google",
});

Get Public Addresses from different blockchains

For each blockchain you want to connect to, you need to call the getAccounts function. Every RPC Class blockchain, except Ethereum you would need to provide the private key to get the public address.

EVM (Ethereum)


const rpcETH = new EthereumRPC(provider!);
const address = await rpcETH.getAccounts();

Solana

    const rpcETH = new EthereumRPC(provider!);
const privateKey = await rpcETH.getPrivateKey();

// Get user's Solana public address
const solanaRPC = new SolanaRPC(privateKey);
const solana_address = await solanaRPC.getAccounts();

Tezos

    const rpcETH = new EthereumRPC(provider!);
const privateKey = await rpcETH.getPrivateKey();

// Get user's Tezos public address
const tezosRPC = new TezosRPC(privateKey);
const tezos_address = await tezosRPC.getAccounts();

StarkEx and StarkNet

    const rpcETH = new EthereumRPC(provider!);
const privateKey = await rpcETH.getPrivateKey();

// Get user's starkNet public address
const starkNetRPC = new StartkNetRPC(privateKey);
const stark_address = await starkNetRPC.getAccounts();

Polkadot

    const rpcETH = new EthereumRPC(provider!);
const privateKey = await rpcETH.getPrivateKey();

// Get user's Polkadot public address
const polkadotRPC = new PolkadotRPC(privateKey);
const polkadot_address = await polkadotRPC.getAccounts();

Get all the public wallets

As you can see in the full example, we get the public address from each blockchain (and also the balance). In this case, It's clear that you can interact with different blockchains at the same time.

In Web3auth we have several examples of how to interact with any blockchain.

We also have some examples of how to interact with Cosmos, Aptos, Algorand, Polkadot, Tezos, StarkNet and XRPL.

Conclusion

This guide has walked you through the seamless process of creating a multichain connection using Web3Auth and the React PnP no-modal SDK. By integrating Web3Auth, developers are empowered to build applications that are not only blockchain-agnostic but also user-friendly, leveraging social logins for authentication across multiple blockchains.

The provided examples and code snippets have shown how to initialize Web3Auth, configure adapters, and retrieve public addresses for different blockchains, highlighting the flexibility and power of Web3Auth in handling diverse blockchain technologies. With this knowledge, developers can now extend their applications to support a wide range of blockchains.

As the blockchain ecosystem continues to evolve, tools like Web3Auth will play a crucial role in simplifying access and interaction with blockchain technologies.

If you want to interact with a specific blockchain and you are having trouble with the code, please contact us in our community.

References