Peakiq Blog

Production Google Sign-In Setup for React Native iOS

Master production Google Sign-In for React Native iOS apps. This comprehensive guide covers React Native CLI, Google Sign-In SDK, and iOS OAuth client setup.

Editorial2 min read343 words

Production Google Sign-In Setup for React Native iOS

This guide explains how to configure Google authentication in a React Native iOS application using:

React Native CLI
TypeScript
Google Sign-In SDK
iOS OAuth Client

Install Google Sign-In Package

npm install @react-native-google-signin/google-signin

Install iOS pods:

cd ios && pod install

Create Google OAuth iOS Client

Open Google Cloud Console:

https://console.cloud.google.com

Navigate:

APIs & Services
    ↓
Credentials
    ↓
Create Credentials
    ↓
OAuth Client ID

Choose:

iOS

Configure Bundle Identifier

Use the same iOS bundle identifier from Xcode.

Example:

com.idsvault.app

Find it in:

Xcode
   ↓
Targets
   ↓
General
   ↓
Bundle Identifier

Configure Google Sign-In

Create:

src/config/google.ts

import {
  GoogleSignin,
} from '@react-native-google-signin/google-signin';
 
GoogleSignin.configure({
  iosClientId:
    'YOUR_IOS_CLIENT_ID',
});

AppDelegate Setup

Open:

ios/AppDelegate.swift

Add import:

import GoogleSignIn

Add callback handler inside AppDelegate:

func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  return GIDSignIn.sharedInstance.handle(url)
}

Add URL Scheme

Google Sign-In on iOS requires URL scheme registration.

Open:

ios/YourProject/Info.plist

Add:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>
        YOUR_REVERSED_CLIENT_ID
      </string>
    </array>
  </dict>
</array>

Example:

<string>
com.googleusercontent.apps.xxxxxxxxx
</string>

Important

Use:

REVERSED_CLIENT_ID

NOT:

CLIENT_ID
bundle identifier
web client ID

React Native Google Login

import {
  GoogleSignin,
} from '@react-native-google-signin/google-signin';
 
export async function continueWithGoogle() {
 
  await GoogleSignin.hasPlayServices();
 
  const userInfo =
    await GoogleSignin.signIn();
 
  console.log(userInfo);
 
  const idToken =
    userInfo.data?.idToken;
 
  console.log(idToken);
 
  return idToken;
}

Example Button Usage

<TouchableOpacity
  onPress={continueWithGoogle}
>
  <Text>
    Continue with Google
  </Text>
</TouchableOpacity>

Common iOS Error

Your app is missing support for the following URL schemes

Fix:

add REVERSED_CLIENT_ID
clean build
reinstall app

Clean Build

cd ios
xcodebuild clean

Reinstall app:

npx react-native run-ios

Final Result

After successful setup:

Tap Google button
    ↓
Google login popup
    ↓
Authenticate
    ↓
Return to app
    ↓
Receive Google ID token

Your React Native iOS app now supports production-grade Google Sign-In.