useLogin

Hook to prompt the user to sign in with their wallet using auth.

Requires the authConfig prop to be configured on the ThirdwebProvider.

import { useLogin } from "@thirdweb-dev/react";

Usage

Call the login function to prompt the user to sign in with their wallet.

The isLoading boolean can be used to display a loading state on the UI while the user is signing in.

import { useLogin } from "@thirdweb-dev/react";

function App() {
  const { isLoading, login } = useLogin();

  return (
    <button onClick={() => login()}>
      {isLoading ? "Loading..." : "Sign in with Ethereum"}
    </button>
  );
}

Configuration

options (optional)

The login function accepts an optional LoginOptions object as an argument.

This configuration follows the EIP-4361 Sign in with Ethereum standard.

import { useLogin, Web3Button } from "@thirdweb-dev/react";

function App() {
  const { login, isLoading } = useLogin();

  return (
    <Web3Button
      action={() =>
        login({
          domain: "https://your-domain.com", // Your dapp domain
          statement: "My statement", // Text that the user will sign
          uri: "https://your-domain.com/login", // RFC 3986 URI referring to the resource that is the subject of the signing
          version: "1.0", // The current version of the message, which MUST be 1 for this specification.
          chainId: "mainnet", // Chain ID to which the session is bound
          nonce: "my-nonce", // randomized token typically used to prevent replay attacks
          expirationTime: new Date(2021, 1, 1), // When this message expires
          invalidBefore: new Date(2020, 12, 1), // When this message becomes valid
          resources: ["balance", "history", "info"], // A list of information or references to information the user wishes to have resolved
        })
      }
    >
      Login
    </Web3Button>
  );
}