# Web3 React Guide: Unstoppable Login

This is the basic installation guide for the [web3-react](https://github.com/Uniswap/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](/identity/sdk-and-libraries/web3-react) and source code on [github](https://github.com/unstoppabledomains/uauth/tree/main/packages/web3-react).

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`.

figure
div
iframe
figcaption
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`.

yarn

```shell
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

```shell
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`.

figure

```javascript
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;
```

figcaption
code
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](/identity/sdk-and-libraries/web3-react#optionsshouldloginwithredirect).

## 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.

figure

```jsx
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;
```

figcaption
code
App.jsx
Congratulations!
You have implemented Unstoppable Login with web3-react.

div
[Next to **Display the User's Domain**](/identity/guides/display-users-domain)