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, and Instagram.

Login with OAuth is the onboarding flow your users are used to, integrated into your application in just a few lines of code.

The React SDK supports OAuth login with Google, Apple, Twitter, GitHub, Discord, LinkedIn, Spotify, TikTok, and Instagram. For all other OAuth providers, you can use JWT-based authentication.

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'.

​
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!

Was this page helpful?