Skip to content

GOOGLE_SIGN_IN_SETUP_GUIDE.md

Latest commit

 

History

History
307 lines (245 loc) · 7.77 KB

GOOGLE_SIGN_IN_SETUP_GUIDE.md

File metadata and controls

307 lines (245 loc) · 7.77 KB

Google Sign In Integration Guide 🔍

Overview

This guide covers the complete Google Sign In integration for TribeFind using native mobile authentication without requiring Supabase OAuth provider setup.

✅ Implementation Status

Core Integration ✅

  • ✅ Native Google Sign In service (GoogleSignInService.ts)
  • ✅ Manual user creation/authentication in Supabase
  • ✅ Direct email-based user management
  • ✅ Automatic profile creation for new users

UI Components ✅

  • ✅ Google Sign In button in AuthScreen
  • ✅ Professional styling with Google branding
  • ✅ Loading states and error handling
  • ✅ Seamless integration with existing auth flow

Configuration ✅

  • ✅ iOS Client ID configuration
  • ✅ app.json plugin configuration
  • ✅ GoogleService-Info.plist setup
  • ✅ URL scheme configuration

🔧 Technical Implementation

1. Dependencies

{
  "@react-native-google-signin/google-signin": "^15.0.0"
}

2. Authentication Flow

1. User taps "Continue with Google"
2. Native Google Sign In modal appears
3. User authenticates with Google
4. App receives user info (email, name, photo)
5. App checks if user exists in Supabase users table
6. If exists: Sign in with Supabase auth
7. If new: Create Supabase auth user + profile
8. User logged into app

3. Google OAuth Configuration

// app.json
{
  "ios": {
    "googleServicesFile": "./GoogleService-Info.plist"
  },
  "plugins": [
    [
      "@react-native-google-signin/google-signin",
      {
        "iosUrlScheme": "com.googleusercontent.apps.928204958033-cupnqdn1nglhhfmj5pe5vl0oql4heg9s"
      }
    ]
  ]
}

4. GoogleService-Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>CLIENT_ID</key>
	<string>928204958033-cupnqdn1nglhhfmj5pe5vl0oql4heg9s.apps.googleusercontent.com</string>
	<key>REVERSED_CLIENT_ID</key>
	<string>com.googleusercontent.apps.928204958033-cupnqdn1nglhhfmj5pe5vl0oql4heg9s</string>
	<key>BUNDLE_ID</key>
	<string>com.jfuginay.tribefind</string>
</dict>
</plist>

🔐 Authentication Architecture

Why This Approach?

Traditional Web OAuth: Requires redirects, client secrets, complex setup Our Mobile Approach: Native sign-in → direct user management

Benefits:

  • ✅ Better UX (native modal vs web redirect)
  • ✅ No client secret required (iOS is public client)
  • ✅ Simpler configuration
  • ✅ More secure (no web-based flows)
  • ✅ Works perfectly with Supabase

User Management Flow

// 1. Google Sign In
const result = await GoogleSignInService.signIn()

// 2. Check existing user
const existingUser = await supabase
  .from('users')
  .select('*')
  .eq('email', result.user.email)
  .single()

// 3. Create or authenticate
if (existingUser) {
  // Sign in existing user
  await supabase.auth.signInWithPassword({
    email: result.user.email,
    password: 'google-oauth-user'
  })
} else {
  // Create new user
  const authData = await supabase.auth.signUp({
    email: result.user.email,
    password: 'google-oauth-user',
    options: { data: { provider: 'google' } }
  })
  
  // Create profile
  await supabase.from('users').insert(profileData)
}

🔧 Required Setup

1. Google Cloud Console

Configure these settings in console.cloud.google.com:

Create iOS OAuth Client:

Application Type: iOS
Bundle ID: com.jfuginay.tribefind
Name: TribeFind iOS

No Web Client Needed: Unlike traditional setups, we don't need a separate web client for this approach.

2. Supabase Configuration

Important: No Google OAuth provider setup required!

What we DON'T need:

  • ❌ Google provider configuration
  • ❌ Client secret
  • ❌ Redirect URLs
  • ❌ OAuth flow setup

What we DO use:

  • ✅ Standard email/password authentication
  • ✅ User table for profiles
  • ✅ Regular Supabase auth sessions

🧪 Testing Guide

Prerequisites

  • Physical iOS device (Google Sign In doesn't work in simulator)
  • Google account for testing
  • Valid Google OAuth iOS client
  • Internet connection

Test Scenarios

1. New User Sign Up

  1. Tap "Continue with Google"
  2. Google sign-in modal appears
  3. Sign in with Google account
  4. App creates new user profile
  5. User lands on HomeScreen
  6. Check user appears in Supabase users table

2. Returning User

  1. Sign out from app
  2. Tap "Continue with Google"
  3. App recognizes existing user
  4. User signs in automatically
  5. Profile data preserved

3. Error Scenarios

  1. No internet connection
  2. User cancels sign-in
  3. Invalid OAuth configuration

🔍 Debugging

Common Issues

1. "No Google Play Services"

  • This is Android-specific, shouldn't occur on iOS
  • Indicates configuration issue

2. "Sign in was cancelled"

  • User cancelled the flow
  • Handle gracefully with appropriate message

3. "Configuration error"

  • Check GoogleService-Info.plist is included
  • Verify bundle ID matches exactly
  • Ensure URL scheme is correct

4. User Creation Issues

  • Check Supabase connection
  • Verify users table schema
  • Check for email conflicts

Debug Logs

🔐 Starting Google Sign In...
✅ Google Sign In successful: { email, name, photo }
👤 Existing user found, signing in...
✅ Google Sign In and user processing complete

📱 Build Requirements

EAS Build Configuration

// eas.json - no changes needed
{
  "development": {
    "ios": {
      "simulator": false,
      "device": true
    }
  }
}

Build Command

# Ensure ios directory is removed for clean prebuild
rm -rf ios

# Build for device testing
eas build --profile development --platform ios

🚀 Deployment Checklist

Pre-Deployment

  • Google OAuth iOS client configured
  • GoogleService-Info.plist included
  • Bundle ID consistent across all platforms
  • URL schemes properly configured
  • No Supabase Google provider needed

Testing

  • Google Sign In works on physical device
  • User profiles created correctly
  • Existing users can sign in
  • Error handling works properly

🎯 Advantages of This Approach

Compared to Traditional OAuth:

  1. Simpler Setup: No client secrets, redirect URLs, or complex OAuth flows
  2. Better UX: Native modal instead of web redirects
  3. More Secure: No secrets in client code
  4. Easier Debugging: Direct user management
  5. Platform Optimized: Uses iOS-native Google Sign In

Integration Benefits:

  1. Seamless: Works with existing Supabase auth
  2. Flexible: Easy to add other OAuth providers
  3. Maintainable: Clear separation of concerns
  4. Scalable: Standard user management patterns

📋 Implementation Summary

Files Modified:

  • services/GoogleSignInService.ts - Native Google Sign In
  • services/AuthService.tsx - Manual user management
  • screens/AuthScreen.tsx - Google sign in UI
  • App.tsx - Initialize Google Sign In
  • app.json - Google OAuth configuration
  • GoogleService-Info.plist - iOS OAuth config

Key Features:

  • ✅ Native Google authentication
  • ✅ Automatic user profile creation
  • ✅ Seamless Supabase integration
  • ✅ No client secrets required
  • ✅ Professional UI/UX

Why This Works Better: Mobile apps are "public clients" in OAuth terms, meaning they can't securely store secrets. Google's iOS SDK handles this by using native authentication that doesn't require secrets, making our approach both more secure and simpler to implement.

Task completed! "That's what she said." - Michael Scott