OAuth

To authenticate your users with a social (OAuth) provider, use the useLoginWithOAuth hook.

Use the initOAuth function returned from the useLoginWithOAuth hook to begin an OAuth flow. As an argument, it takes an object with a provider key, which can be one of: 'google', 'discord', 'twitter', 'github', 'spotify', 'instagram', 'tiktok', 'linkedin', 'apple'.

TIP

Before using theuseLoginWithOAuth hook, ensure any OAuth provider you wish to use is enabled in Socials tab of the Login Methods page on the the Privy dashboard, learn more.

Example usage

As an example, you might set up a LoginWithSocial component for your app that uses these methods, like below:

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

export default function LoginWithSocial() {
  const {
    state,
    // When the OAuth provider redirects back to your app, the `loading`
    // value can be used to show an intermediate state while login completes.
    loading,
    initOAuth,
  } = useLoginWithOAuth();

  const handleInitOAuth = async () => {
    try {
      // The user will be redirected to OAuth provider's login page.
      // If the login is successful, they will then be redirected back to your app.
      await initOAuth({provider: 'google'});
    } catch (err) {
      // Handle errors due to network availability, captcha failure, or input validation here
    }
  };

  return <button onClick={handleInitOAuth}>Log in with Google</button>;
}

TIP

Note that initOAuth returns a Promise<void> and can be awaited, but any values then updated in useState will be lost on redirect.

Tracking login flow state

The state variable returned from the useLoginWithOAuth hook will always be one of the following values.

type OAuthFlowState =
  | {status: 'initial'}
  | {status: 'loading'}
  | {status: 'done'}
  | {status: 'error'; error: Error | null};

Learn more about conditional rendering with the state variable in the state guide.