Login with Privy UIs

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

Sample Privy login modal

---

To have users login to your app with Privy's UIs in your app, use the login method from the usePrivy hook.

const {login} = usePrivy();

When invoked, this method will open the Privy modal and kick off the Privy login flow. From there, users can login with any of the login methods you've configured for your app.

If a user is already authenticated when you call login method, Privy will throw an error indicating that the user is already logged in. If you'd like the logged in user to add a new account type, you can prompt them to link that account instead.

As an example, you might attach login as an event handler to a login button in your app:

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

function LoginButton() {
  const {ready, authenticated, login} = usePrivy();
  // 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>
  );
}

TIP

You can easily attach callbacks to login using the useLogin interface! Read more here.

TIP

If email or SMS authentication are enabled for your app, you can pre-fill the email or SMS inputs using an optional prefill property in your login call:

function onLogin() {
  // Pre-fill email
  login({prefill: {type: 'email', value: '[email protected]'}});
  // Pre-fill phone number
  login({prefill: {type: 'phone', value: '+15551232222'}});
}

Enforcing login vs. sign-up

Depending on how your app's authentication flow is set up, you may want to provide separate routes for signing up to your app (e.g. creating their account for the first time) and logging in as a returning user (e.g. logging into an existing account). You can distinguish login vs. sign-up flows by passing an optional disableSignup boolean to your login call like so:

<Button
  onPress={() =>
    login({
      //
    })
  }
>
  <Text>Login</Text>
</Button>