Andrew Mushel

Unstoppable Login: Web3 React

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.

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. For integrating Login with the previous v6 branch, see the v6 Web3 React guide.

Step 1: Install the Libraries

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

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

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.

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

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: Login with Unstoppable

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.

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>Login with Unstoppable</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 Login with Unstoppable with web3-react.

Next to Display the User's Domain