Logging users in

To have your user login to your app, use the login method from the usePrivy hook. When invoked, this method will open the Privy modal and kick off the Privy authentication flow.

Sample login flow with MetaMask.

From there, users can choose to login to your app with their:

wallet, by signing a SIWE challenge first. This will automatically prompt the user to connect their wallet first, if they have not connected one already.
email, by entering a verification code sent to them
SMS, by entering a verification code sent to them
Google, Twitter, Discord, Github, or Apple accounts via the OAuth 2.0 protocol

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

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

function LoginButton() {
  const { login } = usePrivy();
  return <button onClick={login}>Log in</button>;
}

tip

If your app uses embedded wallets, you can automatically prompt users to create their embedded wallet when they first login to your app.

You can configure which login methods you'd like to present your users in the config property of the PrivyProvider.

Configuring login methods for your app
<PrivyProvider
  appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
  config={{
    appearance: {
      // This configures your login modal to show wallet login options above other options.
      showWalletLoginFirst: true,
    },
    // This configures wallet, email, Google, and Twitter login for your app.
    loginMethods: ['wallet', 'email', 'google', 'twitter']
  }}
>

Specifically, in your config object, include a loginMethods array with the login methods that'd you want for your app. The supported loginMethods are 'wallet', 'email', 'sms', 'google', 'twitter', 'discord', 'github', and 'apple'.

If you'd like to cater more to native or newcomer users, you can set the appearance.showWalletLoginFirst boolean in the config object to toggle whether to show wallet login options above or below other options.

Configure your app with the login methods best suited for your users.

Note that these preferences will only apply to the login modal that appears when login is invoked. Even if you haven't enabled a given login method for your app, you can still prompt a user to link that type of account using the respective link- call, after they've logged in.

note

Due to issues with Twitter's mobile app, mobile users are currently unable to authenticate with their Twitter accounts on third-party sites. To prevent users from encountering this error, Privy automatically disables login with Twitter on mobile. Your users will still have the option to login with Twitter on desktop.

We are following this issue and will re-enable login with Twitter on mobile devices once the bug is resolved. Please see these issues on Twitter's Developer Forum [1, 2] for more information.

Logging users in

Configuring login methods for your app​

Configuring login methods for your app