🔑 Google Authentication

Set up Google Sign-In for your ExpoBase app on both iOS and Android.

Prerequisites

• Google Cloud Console account
• Supabase project configured

Step 1: Create Google Cloud Project

1. Go to Google Cloud Console:
   • Visit Google Cloud Console
   • Select your project or create a new one
2. Enable Google Sign-In API:
   • Go to APIs & Services → Library
   • Search for "Google Sign-In API"
   • Click Enable
3. Configure OAuth Consent Screen:
   • Go to APIs & Services → OAuth consent screen
   • Select External user type
   • Fill in the required fields (App name, User support email, Developer contact)
   • Add scopes: email, profile, openid
   • Click Save and Continue

Step 2: Create OAuth 2.0 Credentials

You need to create 3 OAuth Client IDs in Google Cloud Console:

2.1 Web Application Client (Required for Supabase + Android)

1. Go to APIs & Services → Credentials
2. Click Create Credentials → OAuth 2.0 Client ID
3. Select Web application as application type
4. Enter a name (e.g., "ExpoBase Web Client")
5. Add Authorized redirect URIs:

   https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback

   (Replace YOUR_PROJECT_REF with your Supabase project reference)
6. Click Create
7. Copy the Client ID and Client Secret

2.2 iOS Client (Required for iOS)

1. Click Create Credentials → OAuth 2.0 Client ID
2. Select iOS as application type
3. Enter a name (e.g., "ExpoBase iOS Client")
4. Enter your Bundle ID: com.yourcompany.yourapp
5. Click Create
6. Copy the iOS Client ID

2.3 Android Client (Required for Android)

1. Click Create Credentials → OAuth 2.0 Client ID
2. Select Android as application type
3. Enter a name (e.g., "ExpoBase Android Client")
4. Enter your Package name: com.yourcompany.yourapp
5. Add your SHA-1 certificate fingerprint (see below)
6. Click Create

Getting SHA-1 Fingerprint

# macOS/Linux
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
 
# Windows
keytool -list -v -keystore %USERPROFILE%\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android

eas credentials --platform android

Select your project, then select Keystore → View credentials. Copy the SHA-1 fingerprint.

Step 3: Configure Supabase

1. Go to Supabase Dashboard:
   • Visit Supabase Dashboard
   • Select your project
2. Enable Google Provider:
   • Go to Authentication → Providers
   • Find Google and toggle Enable
   • Add your Client ID: Your Web Client ID (from Step 2.1)
   • Add your Client Secret: Your Web Client Secret (from Step 2.1)
   • Click Save

Step 4: Configure Your App

Update app.json:

{
  "expo": {
    "plugins": [
      [
        "@react-native-google-signin/google-signin",
        {
          "iosUrlScheme": "com.googleusercontent.apps.YOUR_IOS_CLIENT_ID"
        }
      ]
    ]
  }
}

Replace YOUR_IOS_CLIENT_ID with the reversed iOS Client ID. For example, if your iOS Client ID is:

123456789-abcdefg.apps.googleusercontent.com

Then your iosUrlScheme should be:

com.googleusercontent.apps.123456789-abcdefg

Update .env.local:

# iOS Client ID (for iOS Sign-In)
EXPO_PUBLIC_GOOGLE_CLIENT_ID=YOUR_IOS_CLIENT_ID.apps.googleusercontent.com

# Web Client ID (for Android Sign-In)
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=YOUR_WEB_CLIENT_ID.apps.googleusercontent.com

Update .env.template:

# --- Google ----
# iOS Client ID (from Google Cloud Console - iOS app type)
EXPO_PUBLIC_GOOGLE_CLIENT_ID=
# Web Client ID (from Google Cloud Console - Web application type) - Required for Android
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=

Step 5: Rebuild Your App

After adding the Google Sign-In configuration, you must rebuild the native app:

# For development
npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android
 
# For EAS Build
eas build --platform ios
eas build --platform android

Platform-Specific Summary

Troubleshooting

Android: DEVELOPER_ERROR

This error means Google can't verify your app. Check:

1. Package name matches in:

   • Google Cloud Console (Android OAuth client)
   • app.json → android.package

2. SHA-1 fingerprint is correct:

   • For dev builds: Use debug keystore SHA-1
   • For EAS builds: Use eas credentials to get SHA-1

3. Web Client ID is set in GoogleSignin.configure():

   GoogleSignin.configure({
     webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
     iosClientId: process.env.EXPO_PUBLIC_GOOGLE_CLIENT_ID,
   });

Android: Invalid API key (Supabase)

This error comes from Supabase, not Google. Check:

1. Supabase Google Provider is configured:

   • Dashboard → Authentication → Providers → Google
   • Web Client ID and Secret are filled in

2. Supabase URL and Anon Key are correct in .env.local

iOS: Sign-In button doesn't work

1. Verify iosUrlScheme in app.json is the reversed iOS Client ID
2. Rebuild the app after changing app.json
3. Check that EXPO_PUBLIC_GOOGLE_CLIENT_ID is set

"Google hasn't verified this app" warning

This is normal during development. Click Advanced → Go to [app name] (unsafe) to continue. For production:

1. Submit your app for Google OAuth verification
2. Go to OAuth consent screen → Publish app

Ready to Use

Google authentication is already implemented! Users can:

• ✅ Sign in with Google account on iOS
• ✅ Sign in with Google account on Android
• ✅ Auto-create account on first login
• ✅ Link with existing accounts

Check the implementation in:

• context/AuthContext.tsx - Google Sign-In logic
• app/(auth) folder - Google login buttons

🎯 Next Step

Continue to 🏗️ Prepare Build to run the setup script.