@react-native-auth/google

Modern Google Authentication for React Native

---

Table of Contents

• Features
• 📦 Installation
• ⚙️ Setup
  • Step 1: Enable New Architecture
  • Step 2: Google Cloud Console Setup
• Usage
  • One Tap Sign-In
  • Sign-In with Account Chooser
  • Legacy OAuth Sign-In
• API Reference
• Troubleshooting
• License

---

✨ Features

🎯 Modern Authentication ✅ One Tap Sign-In (Credential Manager) ✅ Account Chooser UI ✅ Legacy OAuth Support

⚡ Built with Latest Tech ✅ TurboModule (New Architecture) ✅ Codegen Type Safety ✅ Android Only (for now)

📋 Available Methods

Method	Description	Use Case
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

---

📦 Installation

# Using npm
npm install @react-native-auth/google

# Using yarn
yarn add @react-native-auth/google

---

⚙️ Setup

Step 1: Enable New Architecture

Show details

Add to your android/gradle.properties:

newArchEnabled=true
kotlin.version=2.1.20

Step 2: Google Cloud Console Setup

Show details

Access Console

Go to Google Cloud Console and create/select your project.

Enable API

1. Navigate to APIs & Services → Library
2. Search for "Google Sign-In API" or "Google Identity"
3. Click Enable

Create OAuth 2.0 Credentials

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:

     # 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

Import

import {
  oneTap,
  signIn,
  legacySignIn,
  signOut,
} from "@react-native-auth/google";

One Tap Sign-In

Quick authentication for returning users with saved credentials.

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);
}

Sign-In with Account Chooser

Display account picker UI for first-time users or account switching.

const result = await signIn({
  clientId: CLIENT_ID,
});

Legacy OAuth Sign-In

Advanced authentication with custom OAuth scopes (Drive, Calendar, etc.)

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:

const result = await legacySignIn({
  clientId: CLIENT_ID,
  scopes: ["https://www.googleapis.com/auth/calendar"],
  prompt: "consent", // Useful when updating permissions
});

Example - Force Account Selection:

const result = await legacySignIn({
  clientId: CLIENT_ID,
  prompt: "select_account", // Always show account picker
});

Example - Force Login:

const result = await legacySignIn({
  clientId: CLIENT_ID,
  prompt: "login", // Useful for switching accounts
});

Sign Out

Sign out the current user and clear the session.

try {
  await signOut();
  console.log("✅ Signed out successfully");
} catch (error) {
  console.error("❌ Sign-out failed:", error);
}

---

📝 API Reference

Types

type GoogleAuthOptions = {
  clientId: string; // Your Web Client ID
  scopes?: string[]; // OAuth scopes (legacySignIn only)
  prompt?: string; // Consent behavior: 'consent', 'login', 'none'
};

type GoogleGoogleAuthResult = {
  idToken: string; // JWT ID token
  email?: string; // User email (if available)
};

---

🛠️ Troubleshooting

Common Issues

❌ "Sign-in failed" or "Invalid client ID"

• ✅ Verify you're using the Web Client ID, not Android Client ID
• ✅ Check SHA-1 fingerprint is correctly added for Android Client ID
• ✅ Ensure Google Sign-In API is enabled in Console

❌ "Credential Manager not available"

• ✅ Test on Android 9+ (API level 28+)
• ✅ Ensure Google Play Services is updated
• ✅ Test on a physical device (emulators may have issues)

---

License

---

Made with create-react-native-library For Everyone

Report Bug · Request Feature