useLogin

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>
);
}