react-native-google-auth
Advanced tools
🚀 Modern React Native Google Authentication library with TypeScript support. Features latest Google Sign-In SDK, OAuth 2.0, One Tap Sign-In, token management, and cross-platform iOS/Android integration. Perfect for implementing Google Login, Google SSO,
⚠️ Development Status: This library is currently in active development. While core functionality is implemented and working, some features may still be under development or subject to change. Please use with caution in production environments.
react-native-google-auth is a comprehensive React Native Google Authentication library that provides seamless Google Sign-In integration for iOS and Android applications. Built with modern APIs including Google Sign-In SDK for iOS and Android Credential Manager, this library offers the most up-to-date Google authentication solution for React Native developers.
This React Native Google Sign-In library stands out from other Google authentication solutions by leveraging the latest Google APIs and providing a unified, type-safe interface for both iOS and Android platforms. Perfect for developers looking to implement Google OAuth, Google Login, or Google SSO in their React Native mobile applications.
Install the React Native Google Authentication library using your preferred package manager:
# Using Yarn (Recommended)
yarn add react-native-google-auth
# Using NPM
npm install react-native-google-auth
# Using pnpm
pnpm add react-native-google-auth
# For Expo projects
npx expo install react-native-google-auth
Get started with Google Sign-In in your React Native app in just 3 steps:
import { GoogleAuth, GoogleAuthScopes } from 'react-native-google-auth';
// Configure once in your app
await GoogleAuth.configure({
iosClientId: 'YOUR_IOS_CLIENT_ID',
androidClientId: 'YOUR_ANDROID_CLIENT_ID',
scopes: [GoogleAuthScopes.EMAIL, GoogleAuthScopes.PROFILE]
});
// Sign in users
const response = await GoogleAuth.signIn();
if (response.type === 'success') {
console.log('User signed in:', response.data.user);
}
⚠️ Important: This library requires native code and is not compatible with Expo Go. You must use Expo Development Build or eject to a bare React Native project.
npm install -g @expo/eas-cli or local dev servernpx expo install react-native-google-auth
Add the plugin to your app.json or app.config.js:
{
"expo": {
"name": "Your App Name",
"plugins": [
[
"react-native-google-auth",
{
"iosClientId": "YOUR_IOS_CLIENT_ID.apps.googleusercontent.com",
"androidClientId": "YOUR_ANDROID_CLIENT_ID.apps.googleusercontent.com"
}
]
]
}
}
Alternative: Automatic Configuration (Recommended)
Place your Google configuration files in your project root and let the plugin auto-detect them:
GoogleService-Info.plist from Firebase Console (iOS)google-services.json from Firebase Console (Android)app.json){
"expo": {
"plugins": [
"react-native-google-auth"
]
}
}
iOS Configuration in app.json:
{
"expo": {
"ios": {
"bundleIdentifier": "com.yourcompany.yourapp",
"infoPlist": {
"GIDClientID": "YOUR_IOS_CLIENT_ID.apps.googleusercontent.com"
}
}
}
}
Android Configuration in app.json:
{
"expo": {
"android": {
"package": "com.yourcompany.yourapp"
}
}
}
# Login to EAS (if not already logged in)
eas login
# Configure your project (if first time)
eas build:configure
# Create development build
eas build --profile development --platform all
# Or for specific platform
eas build --profile development --platform ios
eas build --profile development --platform android
npx expo start --dev-client
import { GoogleAuth, GoogleAuthScopes } from 'react-native-google-auth';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
configureGoogleAuth();
}, []);
const configureGoogleAuth = async () => {
try {
await GoogleAuth.configure({
// Client IDs are automatically detected from plugin configuration
scopes: [GoogleAuthScopes.EMAIL, GoogleAuthScopes.PROFILE]
});
console.log('Google Auth configured successfully');
} catch (error) {
console.error('Google Auth configuration failed:', error);
}
};
const handleGoogleSignIn = async () => {
try {
const response = await GoogleAuth.signIn();
if (response.type === 'success') {
console.log('User signed in:', response.data.user);
// Handle successful sign-in
} else if (response.type === 'cancelled') {
console.log('Sign in cancelled by user');
}
} catch (error) {
console.error('Sign in failed:', error);
}
};
// Your app components...
}
The config plugin accepts the following options:
interface GoogleAuthPluginOptions {
iosClientId?: string; // iOS OAuth client ID
androidClientId?: string; // Android OAuth client ID
googleServicesFile?: string; // Path to google-services.json (default: './google-services.json')
iosGoogleServicesFile?: string; // Path to GoogleService-Info.plist (default: './GoogleService-Info.plist')
}
Example with custom file paths:
{
"expo": {
"plugins": [
[
"react-native-google-auth",
{
"googleServicesFile": "./config/google-services.json",
"iosGoogleServicesFile": "./config/GoogleService-Info.plist"
}
]
]
}
}
Install pods:
cd ios && pod install
Configure Client ID (Choose one method):
Method A: Automatic Detection from Info.plist (Recommended)
Add your iOS client ID to ios/YourApp/Info.plist:
<key>GIDClientID</key>
<string>YOUR_IOS_CLIENT_ID.apps.googleusercontent.com</string>
Method B: Manual Configuration
Provide the client ID directly in your configuration:
await GoogleAuth.configure({
iosClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
androidClientId: 'YOUR_ANDROID_CLIENT_ID.apps.googleusercontent.com'
});
Add URL schemes to ios/YourApp/Info.plist:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string>com.yourcompany.yourapp</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.googleusercontent.apps.YOUR_IOS_CLIENT_ID</string>
</array>
</dict>
</array>
Configure URL handling in your AppDelegate.swift:
import GoogleSignIn
// Add this method to handle URL schemes
func application(
_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
return GIDSignIn.sharedInstance.handle(url)
}
Configure Client ID (Choose one method):
Method A: Automatic Detection from google-services.json (Recommended)
Add your google-services.json file to android/app/ directory.
Method B: Manual Configuration
Provide the client ID directly in your configuration:
await GoogleAuth.configure({
androidClientId: 'YOUR_ANDROID_CLIENT_ID.apps.googleusercontent.com',
iosClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com'
});
email, profile, openid)com.yourcompany.yourapp).apps.googleusercontent.com)Go to Credentials → Create Credentials → OAuth 2.0 Client IDs
Application type: Android
Name: Your app name (Android)
Package name: Your Android app's package name (e.g., com.yourcompany.yourapp)
SHA-1 certificate fingerprint:
For development:
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
For Expo development builds:
eas credentials -p android
For production:
keytool -list -v -keystore path/to/your/release.keystore -alias your-key-alias
Click Create
Copy the Client ID (ends with .apps.googleusercontent.com)
GoogleService-Info.plistios/YourApp/ (for React Native CLI)google-services.jsonandroid/app/ (for React Native CLI)import { GoogleAuth, GoogleAuthScopes } from 'react-native-google-auth';
const configure = async () => {
try {
await GoogleAuth.configure({
iosClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com', // Optional on iOS - auto-detected from Info.plist
androidClientId: 'YOUR_ANDROID_CLIENT_ID.apps.googleusercontent.com', // Optional on Android - auto-detected from google-services.json
webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com', // Optional - for server verification
hostedDomain: 'yourdomain.com', // Optional - for G Suite domains
scopes: [ // Optional - additional OAuth scopes
GoogleAuthScopes.EMAIL,
GoogleAuthScopes.PROFILE,
'https://www.googleapis.com/auth/drive.readonly',
'https://www.googleapis.com/auth/calendar.readonly'
]
});
console.log('Google Auth configured successfully');
} catch (error) {
console.error('Configuration failed:', error);
}
};
const signIn = async () => {
try {
const response = await GoogleAuth.signIn();
if (response.type === 'success') {
const { user, idToken, accessToken } = response.data;
console.log('User:', user);
console.log('Access Token:', accessToken); // null on Android
console.log('ID Token:', idToken);
} else if (response.type === 'cancelled') {
console.log('Sign in was cancelled');
}
} catch (error) {
console.error('Sign in failed:', error);
}
};
const signOut = async () => {
try {
await GoogleAuth.signOut();
console.log('User signed out successfully');
} catch (error) {
console.error('Sign out failed:', error);
}
};
const getTokens = async () => {
try {
const tokens = await GoogleAuth.getTokens();
console.log('ID Token:', tokens.idToken);
console.log('Access Token:', tokens.accessToken); // null on Android
console.log('User:', tokens.user);
} catch (error) {
console.error('Failed to get tokens:', error);
}
};
const getCurrentUser = async () => {
try {
const user = await GoogleAuth.getCurrentUser();
if (user) {
console.log('Current user:', user);
} else {
console.log('No user is currently signed in');
}
} catch (error) {
console.error('Failed to get current user:', error);
}
};
const refreshTokens = async () => {
try {
const tokens = await GoogleAuth.refreshTokens();
console.log('Refreshed ID Token:', tokens.idToken);
console.log('Refreshed Access Token:', tokens.accessToken); // null on Android
console.log('User:', tokens.user);
console.log('Expires At:', tokens.expiresAt);
} catch (error) {
console.error('Token refresh failed:', error);
}
};
const checkTokenExpiration = async () => {
try {
const isExpired = await GoogleAuth.isTokenExpired();
console.log('Token expired:', isExpired);
if (isExpired) {
// Refresh tokens if expired
await refreshTokens();
}
} catch (error) {
console.error('Failed to check token expiration:', error);
}
};
const checkPlayServices = async () => {
try {
const playServicesInfo = await GoogleAuth.checkPlayServices(true); // Show error dialog if needed
console.log('Play Services available:', playServicesInfo.isAvailable);
console.log('Play Services status:', playServicesInfo.status); // Android only
} catch (error) {
console.error('Failed to check Play Services:', error);
}
};
configure(options: GoogleAuthConfig): Promise<void>signIn(): Promise<GoogleAuthResponse>signOut(): Promise<void>getCurrentUser(): Promise<GoogleUser | null>getTokens(): Promise<GoogleTokens>refreshTokens(): Promise<GoogleTokens>isTokenExpired(): Promise<boolean>checkPlayServices(showErrorDialog?: boolean): Promise<PlayServicesInfo>interface GoogleAuthConfig {
iosClientId?: string;
androidClientId?: string;
webClientId?: string;
hostedDomain?: string;
scopes?: string[];
}
interface GoogleAuthResponse {
type: 'success' | 'cancelled';
data?: {
user: GoogleUser;
idToken: string;
accessToken: string | null; // null on Android due to Credential Manager API limitations
};
}
interface GoogleUser {
id: string;
email: string;
name: string;
photo?: string;
familyName?: string;
givenName?: string;
}
interface GoogleTokens {
idToken: string;
accessToken: string | null; // null on Android due to Credential Manager API limitations
user?: GoogleUser;
expiresAt?: number;
}
interface PlayServicesInfo {
isAvailable: boolean;
status?: number; // Android only - Google Play Services status code
}
Common OAuth scopes:
enum GoogleAuthScopes {
EMAIL = 'email',
PROFILE = 'profile',
OPENID = 'openid',
DRIVE = 'https://www.googleapis.com/auth/drive',
DRIVE_READONLY = 'https://www.googleapis.com/auth/drive.readonly',
CALENDAR = 'https://www.googleapis.com/auth/calendar',
CALENDAR_READONLY = 'https://www.googleapis.com/auth/calendar.readonly',
}
1. "Google Auth not configured" in Expo
app.json2. "Invalid client ID" in Expo
.apps.googleusercontent.com suffix3. Build fails with Google Auth
eas build --clear-cachegoogle-services.json and GoogleService-Info.plist are in the project root4. Sign-in doesn't work in development build
1. "DEVELOPER_ERROR" on Android
google-services.json is in the correct location2. "SIGN_IN_REQUIRED" error
3. iOS URL scheme not working
4. Network errors
Important Note about Access Tokens:
idToken and accessTokenidToken but accessToken is always null due to Android Credential Manager API limitationsThe Android Credential Manager API focuses on authentication (ID tokens) rather than authorization (access tokens). If you need access tokens on Android for API calls, consider implementing a separate OAuth2 flow or use the ID token for server-side token exchange.
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { GoogleAuth, GoogleAuthScopes, GoogleUser } from 'react-native-google-auth';
export default function App() {
const [user, setUser] = useState<GoogleUser | null>(null);
const [isConfigured, setIsConfigured] = useState(false);
useEffect(() => {
configureGoogleAuth();
}, []);
const configureGoogleAuth = async () => {
try {
await GoogleAuth.configure({
scopes: [GoogleAuthScopes.EMAIL, GoogleAuthScopes.PROFILE]
});
setIsConfigured(true);
// Check if user is already signed in
const currentUser = await GoogleAuth.getCurrentUser();
setUser(currentUser);
} catch (error) {
console.error('Google Auth configuration failed:', error);
Alert.alert('Configuration Error', 'Failed to configure Google Auth');
}
};
const handleSignIn = async () => {
if (!isConfigured) {
Alert.alert('Error', 'Google Auth is not configured');
return;
}
try {
const response = await GoogleAuth.signIn();
if (response.type === 'success') {
setUser(response.data.user);
Alert.alert('Success', `Welcome ${response.data.user.name}!`);
} else if (response.type === 'cancelled') {
Alert.alert('Cancelled', 'Sign in was cancelled');
}
} catch (error) {
console.error('Sign in failed:', error);
Alert.alert('Sign In Error', 'Failed to sign in with Google');
}
};
const handleSignOut = async () => {
try {
await GoogleAuth.signOut();
setUser(null);
Alert.alert('Success', 'Signed out successfully');
} catch (error) {
console.error('Sign out failed:', error);
Alert.alert('Sign Out Error', 'Failed to sign out');
}
};
return (
<View style={styles.container}>
<Text style={styles.title}>Google Auth Example</Text>
{user ? (
<View style={styles.userInfo}>
<Text style={styles.userText}>Welcome, {user.name}!</Text>
<Text style={styles.userText}>Email: {user.email}</Text>
<TouchableOpacity style={styles.button} onPress={handleSignOut}>
<Text style={styles.buttonText}>Sign Out</Text>
</TouchableOpacity>
</View>
) : (
<TouchableOpacity
style={[styles.button, !isConfigured && styles.buttonDisabled]}
onPress={handleSignIn}
disabled={!isConfigured}
>
<Text style={styles.buttonText}>
{isConfigured ? 'Sign In with Google' : 'Configuring...'}
</Text>
</TouchableOpacity>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 30,
},
userInfo: {
alignItems: 'center',
},
userText: {
fontSize: 16,
marginBottom: 10,
},
button: {
backgroundColor: '#4285F4',
paddingHorizontal: 20,
paddingVertical: 12,
borderRadius: 8,
marginTop: 20,
},
buttonDisabled: {
backgroundColor: '#ccc',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { GoogleAuth, GoogleAuthScopes, GoogleUser } from 'react-native-google-auth';
const App = () => {
const [user, setUser] = useState<GoogleUser | null>(null);
useEffect(() => {
configureGoogleAuth();
}, []);
const configureGoogleAuth = async () => {
try {
await GoogleAuth.configure({
iosClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
androidClientId: 'YOUR_ANDROID_CLIENT_ID.apps.googleusercontent.com',
scopes: [GoogleAuthScopes.EMAIL, GoogleAuthScopes.PROFILE]
});
// Check if user is already signed in
const currentUser = await GoogleAuth.getCurrentUser();
setUser(currentUser);
} catch (error) {
console.error('Configuration failed:', error);
}
};
const signIn = async () => {
try {
const response = await GoogleAuth.signIn();
if (response.type === 'success') {
setUser(response.data.user);
}
} catch (error) {
console.error('Sign in failed:', error);
}
};
const signOut = async () => {
try {
await GoogleAuth.signOut();
setUser(null);
} catch (error) {
console.error('Sign out failed:', error);
}
};
return (
<View style={styles.container}>
{user ? (
<View>
<Text>Welcome, {user.name}!</Text>
<TouchableOpacity style={styles.button} onPress={signOut}>
<Text style={styles.buttonText}>Sign Out</Text>
</TouchableOpacity>
</View>
) : (
<TouchableOpacity style={styles.button} onPress={signIn}>
<Text style={styles.buttonText}>Sign In with Google</Text>
</TouchableOpacity>
)}
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
backgroundColor: '#4285F4',
padding: 15,
borderRadius: 8,
margin: 10,
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
export default App;
This project is licensed under the MIT License - see the LICENSE file for details.
We welcome contributions! Please see our Contributing Guide for details.
Made with ❤️ by @sbaiahmed1
FAQs
🚀 Modern React Native Google Authentication library with TypeScript support. Features latest Google Sign-In SDK, OAuth 2.0, One Tap Sign-In, token management, and cross-platform iOS/Android integration. Perfect for implementing Google Login, Google SSO,
The npm package react-native-google-auth receives a total of 133 weekly downloads. As such, react-native-google-auth popularity was classified as not popular.
We found that react-native-google-auth demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Python 3.14 adds template strings, deferred annotations, and subinterpreters, plus free-threaded mode, an experimental JIT, and Sigstore verification.
Security News
Former RubyGems maintainers have launched The Gem Cooperative, a new community-run project aimed at rebuilding open governance in the Ruby ecosystem.
Security News
An opt-in lazy import keyword aims to speed up Python startups, especially CLIs, without the ecosystem-wide risks that sank PEP 690.