thirdwebDocs
GitHub

useLogin

Defined in

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

Requires the authConfig prop to be configured on the ThirdwebProvider

Example

import { useLogin } from "@thirdweb-dev/react";
 
function App() {
  const { isLoading, login } = useLogin();
 
  return (
    <button onClick={() => login()}>
      {isLoading ? "Loading..." : "Sign in with Ethereum"}
    </button>
  );
}
function useLogin(): {
  isLoading: boolean;
  login: () => Promise<any>;
};

Returns

let returnType: { isLoading: boolean; login: () => Promise<any> };

A function to invoke to login with the connected wallet, and an isLoading state that indicates if the login request is in progress

login

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();
 
  const loginOptions = {
    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
  };
 
  return (
    <Web3Button action={() => login(loginOptions)}>Login</Web3Button>
  );
}