Edit this page

Web3 React Guide: Unstoppable Login

This is the basic installation guide for the web3-react framework and is best used for React-based single page applications (SPAs). For more information about the UAuth middleware package for web3-react, see the reference and source code on github.

warning

This guide is for @uauth/web3-react version 2.4.1-rc.0 and later, which uses the latest v8 beta branch of web3-react.

Tutorial: Integrating Login With Popup

Step 1: Install the Libraries

Install web3-react and the connectors for MetaMask, WalletConnect, and UAuth with yarn or npm.

yarnnpm
Copy
Copied
yarn add @web3-react/core@beta @web3-react/metamask@beta @web3-react/walletconnect@beta @walletconnect/ethereum-provider @uauth/web3-react@2.4.1-rc.0
Copy
Copied
npm install --save @web3-react/core@beta @web3-react/metamask@beta @web3-react/walletconnect@beta @walletconnect/ethereum-provider @uauth/web3-react@2.4.1-rc.0

Step 2: Configure the web3-react Library

Next, configure the MetaMask, WalletConnect, and UAuth connectors for web3-react.

Copy
Copied
import { initializeConnector } from "@web3-react/core";
import { MetaMask } from "@web3-react/metamask";
import { WalletConnect } from "@web3-react/walletconnect";
import UAuth from "@uauth/js";
import { UAuthConnector } from "@uauth/web3-react";

UAuthConnector.registerUAuth(UAuth);

const metaMask = initializeConnector((actions) => new MetaMask({ actions }));

const walletConnect = initializeConnector(
  (actions) =>
    new WalletConnect({
      actions,
      options: {
        rpc: {
          1: `https://mainnet.infura.io/v3/${process.env.REACT_APP_INFURA_ID}`,
        },
        qrcode: true,
      },
    })
);

const uauth = initializeConnector(
  (actions) =>
    new UAuthConnector({
      actions,
      options: {
        // These values can be copied from your dashboard client configuration
        clientID: process.env.REACT_APP_CLIENT_ID,
        redirectUri: process.env.REACT_APP_REDIRECT_URI,
        // Scope must include openid and wallet
        scope: "openid wallet",

        // Injected/metamask and walletconnect connectors are required
        connectors: { injected: metaMask[0], walletconnect: walletConnect[0] },
      },
    })
);

const connectors = {
  UAuth: uauth,
  MetaMask: metaMask,
  WalletConnect: walletConnect,
};

export default connectors;
connectors.js
info

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

Step 3: Unstoppable Login

Once the connector is configured, you can call the activate() method to trigger UAuth login. The example App component below creates a button to acivate and deactive the connector and displays a simple connection and error state.

Copy
Copied
import { useState } from "react";
import connectors from "./connectors.js";

function App() {
  const connector = connectors["UAuth"][0];

  // Get web3-react hooks from UAuthConnector
  const { useIsActivating, useIsActive } = connectors["UAuth"][1];
  const isActivating = useIsActivating();
  const isActive = useIsActive();

  const [connectionStatus, setConnectionStatus] = useState("Disconnected");
  const [error, setError] = useState();

  // Handle connector activation and update connection/error state
  const handleToggleConnect = () => {
    setError(undefined); // Clear error state

    if (isActive) {
      if (connector?.deactivate) {
        void connector.deactivate();
      } else {
        void connector.resetState();
      }
      setConnectionStatus("Disconnected");
    } else if (!isActivating) {
      setConnectionStatus("Connecting...");

      // Activate the connector and update states
      connector
        .activate(1)
        .then(() => {
          setConnectionStatus("Connected");
        })
        .catch((e) => {
          connector.resetState();
          setError(e);
        });
    }
  };

  return (
    <>
      <h1>Unstoppable Login</h1>
      <h3>
        Status - {error?.message ? "Error: " + error.message : connectionStatus}
      </h3>

      <button onClick={handleToggleConnect} disabled={false}>
        {isActive ? "Disconnect" : "Connect"}
      </button>
    </>
  );
}

export default App;
App.jsx
Congratulations!

You have implemented Unstoppable Login with web3-react.

Next to Display the User's Domain