Edit this page

Web3 Modal Guide: Unstoppable Login

This is the basic installation guide for the web3modal library and is best used for single page applications (SPAs). For more information about this library, please see the associated github repo.

Web3 Modal with Unstoppable Domains

Web3 Modal with Unstoppable Domains

Step 1: Install the Libraries

Install with yarn or npm.

yarnnpm
Copy
Copied
yarn add web3modal @uauth/web3modal @uauth/js @walletconnect/web3-provider
Copy
Copied
npm install --save web3modal @uauth/web3modal @uauth/js @walletconnect/web3-provider

Step 2: Configure the web3modal Library

Next, configure the web3modal library:

Copy
Copied
import * as UAuthWeb3Modal from "@uauth/web3modal";
import UAuthSPA from "@uauth/js";
import WalletConnectProvider from "@walletconnect/web3-provider";
import Web3Modal from "web3modal";

// These options are used to construct the UAuthSPA instance.
export const uauthOptions: IUAuthOptions = {
  clientID: "uauth_client_id",
  redirectUri: "http://localhost:3000",

  // Must include both the openid and wallet scopes.
  scope: "openid wallet",
};

const providerOptions = {
  // Currently the package isn't inside the web3modal library. For now,
  // users must use this libary to create a custom web3modal provider.

  // All custom `web3modal` providers must be registered using the "custom-"
  // prefix.
  "custom-uauth": {
    // The UI Assets
    display: UAuthWeb3Modal.display,

    // The Connector
    connector: UAuthWeb3Modal.connector,

    // The SPA libary
    package: UAuthSPA,

    // The SPA libary options
    options: uauthOptions,
  },

  // For full functionality we include the walletconnect provider as well.
  walletconnect: {
    package: WalletConnectProvider,
    options: {
      infuraId: "INFURA_ID",
    },
  },

  // Include any other web3modal providers here
};

const web3modal = new Web3Modal({ providerOptions });

// Register the web3modal so the connector has access to it.
UAuthWeb3Modal.registerWeb3Modal(web3modal);

export default web3modal;
info

Because pop-ups are a more integration friendly approach, the @uauth/web3modal library now uses them by default. If you want the "old" redirect functionality, you need to set shouldLoginWithRedirect: true in your IUAuthOptions and create a callback page

Step 3: Unstoppable Login

Once configured, the web3modal library can be used normally.

warning

Unstoppable Login can be integrated with any EVM-compatible DApp (as well as Solana DApps). However, domains minted on testnets (e.g. Mumbai or Goerli) are not supported.

Copy
Copied
import web3modal from './web3modal'
import Web3 from 'web3'

async function handleLogin() {
  const provider = await web3modal.connect()
}

function handleLogout() {
  if (web3modal.cachedProvider === 'custom-uauth') {
    await uauth.logout()
  }
  web3modal.clearCachedProvider()
}

// Save provider in state
Congratulations!

You have implemented Unstoppable Login with web3modal.

Next to Display the User's Domain