User Pill

Privy provides a UserPill component to easily embed in your application. Users can login or connect their wallet from the user pill. Once authenticated, users can interact with the pill to quickly view their account information and use their wallets.

Usage

To use the user pill component, import from the @privy-io/react-auth package:

import {UserPill} from '@privy-io/react-auth/ui';

Then, embed the user pill within any component wrapped by your PrivyProvider:

import {UserPill} from '@privy-io/react-auth/ui';

function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      ...
      <UserPill />
      ... 
    </div>
  )
}

You can also customize the user pill by passing the props describing the desired action, label, and size for the component. See more on these props below.

import {UserPill} from '@privy-io/react-auth/ui';

const logoImageElement = (
  <Image
    className="h-8 w-8 rounded-full"
    src="/images/logo.png"
    alt="logo placeholder"
    height={32}
    width={32}
  />
);

function Page() {
  return (
    <div>
      <h1>Dashboard</h1>
      ...
      <UserPill
        action={{type: 'login', options: {loginMethods: ['email']}}} 
        label={logoImageElement} 
        size={32} 
      />
      ...
    </div>
  );
}

Customizing via props

Privy allows you to easily customize the user pill within your app by passing action, label, and/or size props on the component.

Prop	Type	Description
action	See below	The action users take from the user pill.
label	React.ReactNode	The label for the user pill icon. This can be customized by passing any React.ReactNode element.s
size	number	The size (in pixels) of the pill button.
expanded	boolean	If true, displays button as a rounded box. When authenticated, contains user information. If false, displays button as an avatar in a circle.

Action prop

The action prop describes the action the user can take from the UserPill component. This prop is an object with a type and options field.

You can set the type to:

• 'connectWallet' to guide the user to connect their wallet. If type: 'connectWallet' is set, you may set options: {suggestedAddress?: string} to suggest a specific address for the user to connect.

• 'login' to guide the user to login to your application with any of your configured login methods. If type: 'login' is set, you may set options to an object containing loginMethods and/or prefill. The loginMethods field contains an array of the login methods to use in the pill and the prefill field contains an email address or phone number to prefill into the Privy login modal.

Concretely, this type looks like

type Action =
  | {
      type: 'login';
      // Prompt the user to login
      options?: {
        loginMethods?: [string];
        prefill?: {
          type: 'email' | 'phone';
          value: string;
        };
      };
    }
  | {
      type: 'connectWallet';
      // Prompt the user to connect their wallet
      options?: {suggestedAddress?: string};
    };