Privy offers the ability to sign up and log users in using OAuth providers. Users can sign in with familiar flows on Google, Apple, Twitter, Github, Discord, LinkedIn, TikTok, Spotify, Instagram, and LINE.
Google OAuth login may not work in in-app browsers (IABs), such as those embedded in social apps, due to Google’s restrictions in these environments. Other OAuth providers are generally unaffected.
Enable your desired OAuth login method in the Privy Dashboard before implementing this feature.
Login with OAuth is the onboarding flow your users are used to, integrated into your application in just a few lines of code.
The SDK supports OAuth login with . For all other OAuth providers, you can use JWT-based authentication.
To authenticate your users with Privy’s out of the box UIs, check out UI components here.
Use initOAuth from the useLoginWithOAuth hook to trigger the OAuth login flow.
initOAuth: ({ provider: OAuthProviderType, disableSignup?: boolean }) => Promise<void>
​
provider
OAuthProviderType
required
The OAuth provider to use for authentication. Valid values are: 'google', 'apple', 'twitter', 'github', 'discord', 'linkedin', 'spotify', 'tiktok', 'instagram', 'line'.
​
disableSignup
boolean
If set to true, the OAuth flow will only allow users to log in with existing accounts and prevent new account creation.

​
Usage

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

export default function LoginWithOAuth() {
  const { state, loading, initOAuth } = useLoginWithOAuth();

  const handleLogin = async () => {
      try {
          // The user will be redirected to OAuth provider's login page
          await initOAuth({ provider: 'google' });
      } catch (err) {
          // Handle errors (network issues, validation errors, etc.)
          console.error(err);
      }
  };

  return (
      <div>
          <button onClick={handleLogin} disabled={loading}>
              {loading ? 'Logging in...' : 'Log in with Google'}
          </button>
      </div>
  );
}

​
Tracking Flow State

Track the state of the OAuth flow via the state variable returned by the useLoginWithOAuth hook.
state:
| {status: 'initial'}
| {status: 'loading'}
| {status: 'done'}
| {status: 'error'; error: Error | null};
​
status
'initial' | 'loading' | 'done' | 'error'
The current state of the OAuth flow.
​
error
Error | null
The error that occurred during the OAuth flow (only present when status is ‘error’).

​
Callbacks

You can optionally pass callbacks to the useLoginWithOAuth hook to run custom logic after a successful login or to handle errors.

​
onSuccess

onSuccess: ({user, isNewUser, wasAlreadyAuthenticated, loginMethod, linkedAccount}) => void

​
Parameters

​
user
User
The user object returned after successful login.
​
isNewUser
boolean
Whether the user is a new user or an existing user.
​
wasAlreadyAuthenticated
boolean
Whether the user was already authenticated before the OAuth flow.
​
loginMethod
string
The login method used (‘google’, ‘apple’, etc.).
​
linkedAccount
LinkedAccount
The linked account if the user was already authenticated.

​
onError

onError: (error: Error) => void

​
Parameters

​
error
Error
The error that occurred during the OAuth flow.

​
Example with Callbacks

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

export default function LoginWithOAuth() {
    const { initOAuth } = useLoginWithOAuth({
        onSuccess: ({ user, isNewUser }) => {
            console.log('User logged in successfully', user);
            if (isNewUser) {
                // Perform actions for new users
            }
        },
        onError: (error) => {
            console.error('Login failed', error);
        }
    });

    return (
        <button onClick={() => initOAuth({ provider: 'google' })}>
            Log in with Google
        </button>
    );
}

​
Security

We recommend configuring allowed OAuth redirect URLs to restrict where users can be redirected after they log in with an external OAuth provider. Learn more here!

​
Accessing OAuth tokens

For any OAuth login method for which you configure your own credentials, you are able to have the user’s OAuth and Refresh access tokens accessible to your app by toggling Return OAuth tokens and making use of the useOAuthTokens hook.

​
Resources

React starter repo

Get started with React and Privy.

Next.js starter repo

Get started with Next.js and Privy.

Whitelabel starter repo

Get started with a whitelabel Privy integration.