Privy supports easy onboarding with an out-of-the-box user interface to log users in.

The fastest way to integrate Privy is with the Privy login modal. Your application can integrate this modal in just a few lines of code and easily toggle on login methods for your application in the Privy dashboard.

You can also design your own login UIs, and integrate with Privy’s authentication APIs to offer a login experience that feels seamless within your application.

Configure your login methods in the Privy Dashboard before using the UI components.

Privy’s UIs are highly-customizable to seamlessly match the branding and design system of your app. Learn more about customizing the login modal.

To have users login to your app with Privy’s UIs, use the login method from the useLogin hook.

login: ({ loginMethods: PrivyClientConfig['loginMethods'], prefill?: { type: 'email' | 'phone', value: string }, disableSignup?: boolean, walletChainType?: 'ethereum-only' | 'solana-only' | 'ethereum-or-solana' }) => PrivyUser;

Usage

import { useLogin, usePrivy } from '@privy-io/react-auth';

function LoginButton() {
    const { ready, authenticated} = usePrivy();
    const { login } = useLogin();
    // Disable login when Privy is not ready or the user is already authenticated
    const disableLogin = !ready || (ready && authenticated);

    return (
        <button disabled={disableLogin} onClick={login}>
            Log in
        </button>
    );
}

Parameters

​
loginMethods
PrivyClientConfig['loginMethods']

Optionally specify which login methods to display in the modal.

​
prefill
{ type: 'email' | 'phone', value: string }

Optionally pre-fill the login modal with the user’s email or phone number.

​
disableSignup
boolean

Prevent users from signing up for your app. This is useful when you want to enforce that users can only log in with existing accounts.

​
walletChainType
'ethereum-only' | 'solana-only' | 'ethereum-or-solana'

Filter the login wallet options to only show wallets that support the specified chain type.

Callbacks

You can easily attach callbacks to the login method using the useLogin hook. This allows you to run custom logic when a user successfully logs in or when there’s an error.

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

function LoginButton() {
    const { login } = useLogin({
        onSuccess: (user) => {
            console.log('User logged in successfully', user);
            // Navigate to dashboard, show welcome message, etc.
        },
        onError: (error) => {
            console.error('Login failed', error);
            // Show error message
        }
    });

    return <button onClick={login}>Log in</button>;
}

Was this page helpful?