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. React
React Native
Swift
Android
Unity
Flutter
To authenticate your users with Privy’s out of the box UIs, check out UI components here. 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'.
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.
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
The user object returned after successful login.
Whether the user is a new user or an existing user.
Whether the user was already authenticated before the OAuth flow.
The login method used (‘google’, ‘apple’, etc.).
The linked account if the user was already authenticated.
onError
onError: (error: Error) => void
Parameters
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
