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.