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

You can easily configure the login methods your app shows to users; see here for instructions!

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

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

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 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, Twitter oauth is disabled on mobile by default. You can read more about these issues on Twitter's Developer Forum [1, 2].

You can override this option and re-enable Twitter login/linking on mobile from your Privy console. Go to your "Login methods" tab and from there scroll down to "Login Customization." You can "Enable Twitter on mobile" from there.

Logging users in

Configuring login methods for your app​

Configuring login methods for your app