Skip to main content

Authenticate

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";
useLogin
### 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>
  );
}

useLogout​

Hook for signing out of a wallet after a user has logged in using auth.

import { useLogout } from "@thirdweb-dev/react";
useLogout
### Usage

Call the logout function to have the user sign out.

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

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

function App() {
  const { logout, isLoading } = useLogout();

  return (
    <button onClick={() => logout()}>
      {isLoading ? "Logging out..." : "Logout"}
    </button>
  );
}

useUser​

Hook for retrieving information about the currently signed in user using auth.

Useful to get the user's address and session data, or undefined if no user is signed in.

import { useUser } from "@thirdweb-dev/react";
useUser
### Usage

Call the useUser hook to get the information about the currently signed in wallet.

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

function App() {
  const { user, isLoggedIn, isLoading } = useUser();
}

Return Value​

{
    user: {
      address: string;
      session?: Json;
    } | undefined;
    isLoggedIn: boolean;
    isLoading: boolean;
}