DEV Community

Cover image for React Native iOS Google Sign-In: Production Setup Guide
PEAKIQ
PEAKIQ

Posted on • Originally published at peakiq.in

React Native iOS Google Sign-In: Production Setup Guide

#reactnative #reactnativecli #ios #googlesignin

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/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
Enter fullscreen mode Exit fullscreen mode

Install iOS pods:

cd ios && pod install
Enter fullscreen mode Exit fullscreen mode

Create Google OAuth iOS Client

Open Google Cloud Console:

https://console.cloud.google.com

Navigate:

APIs & Services
    ↓
Credentials
    ↓
Create Credentials
    ↓
OAuth Client ID
Enter fullscreen mode Exit fullscreen mode

Choose:

iOS
Enter fullscreen mode Exit fullscreen mode

Configure Bundle Identifier

Use the same iOS bundle identifier from Xcode.

Example:

com.idsvault.app
Enter fullscreen mode Exit fullscreen mode

Find it in:

Xcode
   ↓
Targets
   ↓
General
   ↓
Bundle Identifier
Enter fullscreen mode Exit fullscreen mode

Configure Google Sign-In

Create:

src/config/google.ts
Enter fullscreen mode Exit fullscreen mode 
import {
  GoogleSignin,
} from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  iosClientId:
    'YOUR_IOS_CLIENT_ID',
});
Enter fullscreen mode Exit fullscreen mode

AppDelegate Setup

Open:

ios/AppDelegate.swift
Enter fullscreen mode Exit fullscreen mode

Add import:

import GoogleSignIn
Enter fullscreen mode Exit fullscreen mode

Add callback handler inside AppDelegate:

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

Add URL Scheme

Google Sign-In on iOS requires URL scheme registration.

Open:

ios/YourProject/Info.plist
Enter fullscreen mode Exit fullscreen mode

Add:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>
        YOUR_REVERSED_CLIENT_ID
      </string>
    </array>
  </dict>
</array>
Enter fullscreen mode Exit fullscreen mode

Example:

<string>
com.googleusercontent.apps.xxxxxxxxx
</string>
Enter fullscreen mode Exit fullscreen mode

Important

Use:

REVERSED_CLIENT_ID
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Example Button Usage 

<TouchableOpacity
  onPress={continueWithGoogle}
>
  <Text>
    Continue with Google
  </Text>
</TouchableOpacity>
Enter fullscreen mode Exit fullscreen mode

Common iOS Error 

Your app is missing support for the following URL schemes
Enter fullscreen mode Exit fullscreen mode

Fix:

  • add REVERSED_CLIENT_ID
  • clean build
  • reinstall app

Clean Build 

cd ios
xcodebuild clean
Enter fullscreen mode Exit fullscreen mode

Reinstall app:

npx react-native run-ios
Enter fullscreen mode Exit fullscreen mode

Final Result

After successful setup:

Tap Google button
    ↓
Google login popup
    ↓
Authenticate
    ↓
Return to app
    ↓
Receive Google ID token
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)