Modern Google Authentication for React Native
npm install @react-native-auth/google
$3- โ One Tap Sign-In (Credential Manager) - โ Account Chooser UI - โ Legacy OAuth Support |
$3- โ TurboModule (New Architecture) - โ Codegen Type Safety - โ Android Only (for now) |
oneTap() | One Tap / Credential Manager | Quick sign-in for returning users |
signIn() | Account Chooser UI | First-time sign-in, account selection |
legacySignIn() | Legacy OAuth with scopes | Advanced features (Drive, Calendar, etc.) |
signOut() | Sign out current user | Logout, clear session |
bash
Using npm
npm install @react-native-auth/google
Using yarn
yarn add @react-native-auth/google
`
---
โ๏ธ Setup
$3
Show details
Add to your android/gradle.properties:
`properties
newArchEnabled=true
kotlin.version=2.1.20
`
$3
Show details
$3
Go to Google Cloud Console and create/select your project.
$3
1. Navigate to APIs & Services โ Library
2. Search for "Google Sign-In API" or "Google Identity"
3. Click Enable
$3
You need TWO client IDs:
#### a) ๐ฑ Android Client ID
For app verification (SHA-1 fingerprint required)
1. Go to APIs & Services โ Credentials
2. Click Create Credentials โ OAuth 2.0 Client ID
3. Select Android
4. Fill in:
- Name: Your App (Android)
- Package name: com.yourapp (from android/app/build.gradle)
- SHA-1 fingerprint: Get it by running:
`bash
# Debug
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
# Release
keytool -list -v -keystore /path/to/release.keystore -alias your-alias
`
5. Click Create
#### b) ๐ Web Client ID
For authentication (USE THIS IN YOUR CODE)
1. Click Create Credentials โ OAuth 2.0 Client ID again
2. Select Web application
3. Fill in:
- Name: Your App (Web)
- Authorized redirect URIs: Leave empty
4. Click Create
5. Copy the Web Client ID โ xxxxx.apps.googleusercontent.com
> ๐ก Pro Tip: The Android Client ID verifies your app. The Web Client ID is used for authentication.
---
๐ Usage
$3
`typescript
import { oneTap, signIn, legacySignIn, signOut } from '@react-native-auth/google';
``
$3
Quick authentication for returning users with saved credentials.
`typescript
const CLIENT_ID = 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com';
try {
const result = await oneTap({ clientId: CLIENT_ID });
console.log('โ
Signed in:', result.idToken);
console.log('๐ง Email:', result.email);
} catch (error) {
console.error('โ Sign-in failed:', error);
}
`
$3
Display account picker UI for first-time users or account switching.
`typescript
const result = await signIn({
clientId: CLIENT_ID,
});
`
$3
Advanced authentication with custom OAuth scopes (Drive, Calendar, etc.)
`typescript
const result = await legacySignIn({
clientId: CLIENT_ID,
scopes: [
'https://www.googleapis.com/auth/drive.readonly',
'https://www.googleapis.com/auth/calendar.readonly',
],
prompt: 'consent', // Optional: Force consent screen
});
`
#### ๐ prompt Parameter
Controls the authentication flow behavior:
| Value | Behavior |
| ---------------- | -------------------------------------------------- |
| undefined | Default behavior - no forced interaction |
| 'consent' | Always show consent screen, even for existing app |
| 'login' | Always show login screen, force account selection |
| 'select_account' | Always show account selection screen |
| 'none' | Silent authentication (may fail if no session) |
Example - Force Consent Screen:
`typescript
const result = await legacySignIn({
clientId: CLIENT_ID,
scopes: ['https://www.googleapis.com/auth/calendar'],
prompt: 'consent', // Useful when updating permissions
});
`
Example - Force Account Selection:
`typescript
const result = await legacySignIn({
clientId: CLIENT_ID,
prompt: 'select_account', // Always show account picker
});
`
Example - Force Login:
`typescript
const result = await legacySignIn({
clientId: CLIENT_ID,
prompt: 'login', // Useful for switching accounts
});
`
$3
Sign out the current user and clear the session.
`typescript
try {
await signOut();
console.log('โ
Signed out successfully');
} catch (error) {
console.error('โ Sign-out failed:', error);
}
`
---
๐ API Reference
$3
`typescript
type GoogleAuthOptions = {
clientId: string; // Your Web Client ID
scopes?: string[]; // OAuth scopes (legacySignIn only)
prompt?: string; // Consent behavior: 'consent', 'login', 'none'
};
type GoogleAuthResult = {
idToken: string; // JWT ID token
email?: string; // User email (if available)
};
``