Custom auth UI – whitelabel login

All of Privy’s authentication flows can be whitelabeled, from email and SMS passwordless flows to social logins and passkeys.

To whitelabel Privy’s passwordless email flow, use the useLoginWithEmail hook. Then, call sendCode and loginWithCode with the desired email address.

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

const {sendCode, loginWithCode} = useLoginWithEmail();
sendCode({email: '[email protected]'});
loginWithCode({code: '123456'});

Learn more about email authentication and tracking login flow state.

SMS

To whitelabel the passwordless SMS flow, use the useLoginWithSms hook. Then, call sendCode and loginWithCode with the desired phone number.

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

const {sendCode, loginWithCode} = useLoginWithSms();
sendCode({phoneNumber: '+1234567890'});
loginWithCode({code: '123456'});

Learn more about SMS authentication and tracking login flow state.

To whitelabel social login, use the useLoginWithOAuth hook and call initOAuth with your desired social login provider.

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

const {initOAuth} = useLoginWithOAuth();
initOAuth({provider: 'google'});

Learn more about social logins and tracking login flow state.

Passkeys

To whitelabel passkeys, use the useLoginWithPasskey hook and call loginWithPasskey.

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

const {loginWithPasskey} = useLoginWithPasskey();
loginWithPasskey();

To sign up with a passkey:

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

const {signupWithPasskey} = useSignupWithPasskey();
signupWithPasskey();

To link a passkey to an existing user:

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

const {linkWithPasskey} = useLinkWithPasskey();
linkWithPasskey();

Learn more about passkeys and tracking login flow state.

To whitelabel the Telegram login flow, use the useLoginWithOAuth hook and call initOAuth with the 'telegram' provider.

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

const {initOAuth} = useLoginWithOAuth();
initOAuth({provider: 'telegram'});

Learn more about Telegram authentication and tracking login flow state.

MFA

To whitelabel MFA with SMS, TOTP, or passkeys, follow the custom UI guide.

Authentication

Using Privy authentication

Using your own authentication

Whitelabel