useUser

Hook for retrieving information about the user from the authentication service.

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

Usage

Call the useUser hook to get the user data.

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

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

  return (
    <Web3Button
      contractAddress="{{contract_address}}"
      action={() => {
        if (isLoggedIn) {
          // Do something with user
        }
      }}
    >
      {isLoggedIn ? "Logged In" : "Log In"}
    </Web3Button>
  );
}

Configuration

The useUser hook will return a user object which is of type UserWithData.

export interface UserWithData<
  TData extends Json = Json,
  TContext extends Json = Json
> extends User<TContext> {
  data?: TData;
}

export type User<TContext extends Json = Json> = {
  address: string;
  session?: TContext;
};

The User type contains an address and an optional session which can contain any data that you have associated with the user's session.

The UserWithData type extends User and adds an optional data property which can contain any data that you have associated with the user's account.

You can access this data in your app and use it to provide a custom experience.

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

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

  return (
    <Web3Button
      contractAddress="{{contract_address}}"
      action={() => {
        if (isLoggedIn) {
          // Do something with user
          console.log(user.data);
        }
      }}
    >
      {isLoggedIn ? "Logged In" : "Log In"}
    </Web3Button>
  );
}