Google Connexion on iOS

Introduction

In this Guide, you will learn how to Configuration Google Connexion with Capgo Social Connexion for iOS. I assume that you have already read the general Configuration Guide.

Using Google Connexion on iOS

In this part, you will learn how to Configuration Google Connexion in iOS.

Créer an iOS client ID in the Google console
1. Click on the Recherche bar
2. Search for credentials and click on the APIs and Services one (number 2 on the screenshot)
3. Click on the create credentials
4. Select OAuth client ID
5. Select the Application type to iOS
6. Find the Bundle ID
  1. Open Xcode
  2. Double click on App
  3. Ensure that you are on Targets -> App
  4. Find your Bundle Identifier
  5. Go back to the Google Console and paste your Bundle Identifier into Bundle ID
7. Optionally, add your App Store ID or Team ID into the client ID if you have published your app to App Store
8. After filling all the details, click create
9. Click OK
10. Open the newly created iOS client
11. Copy the following data
  
  The nr. 1 in this image will later become the iOSClientId in the initialize call.
  The nr. 2 in this image will later become YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modify your Application’s Info.plist
1. Open Xcode and find the Info.plist file
2. Right click this file and open it as source code
3. At the bottom of your Plist file, you will see a </dict> tag
4. Insert the following fragment just before the closing </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Change the YOUR_DOT_REVERSED_IOS_CLIENT_ID to the value copied in the previous step
  
  Ensure that this value STARTS with com.googleusercontent.apps
6. Save the file with Command + S

Modify the AppDelegate.swift

Open the AppDelegate
Insert import GoogleSignIn at the top of the file
Find the func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) function

Modify the function to look like this

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

    handled = GIDSignIn.sharedInstance.handle(url)
    if handled {
      return true
    }

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

Modified application openURL function with GoogleSignIn handling

Save the file with Command + S

Configuration Google Connexion in your JavaScript/TypeScript code

Import SocialLogin and Capacitor

import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';

Call the Initialiser method (this should be called only once)

Basic setup (online mode - recommended for most apps):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
Advanced setup with additional client IDs:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
      mode: 'online'                               // 'online' or 'offline'
    }
  })
})
```
Client ID Requirements:
- iOSClientId: Required - Must end with googleusercontent.com (from step 1 above)
- webClientId: Optional - Only needed if you also support web platform or need advanced features
- iOSServerClientId: Optional - Should be the same value as webClientId when provided
For advanced setup with webClientId and iOSServerClientId, see the web setup guide for creating these credentials.
About offline mode: When using mode: 'offline', the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. See the general setup guide for implementation details.

Implement the Connexion function. Créer a button and run the following code on click

For online mode:

const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))

For offline mode:

const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Recommended for offline mode
  }
})
// res contains serverAuthCode, not user data
// Send serverAuthCode to your backend to get user information
console.log('Server auth code:', res.result.serverAuthCode)

Test your Application
1. Build your app and run cap sync
2. If you’ve done everything correctly, you should see the Google Connexion flow working properly

The language in the Google prompt depends on your Appareil’s language Paramètres.

Known Problems

Privacy Screen Plugin Incompatibility

The Google Connexion plugin is incompatible with @capacitor/privacy-screen. When using both plugins together, the Google Connexion WebView will be interrupted by the privacy screen.

Workaround: Call await PrivacyScreen.disable(); before calling the login function:

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});