Migration Guide from @codetrix-studio/capacitor-google-auth to @capgo/capacitor-social-login

Overview

This guide provides comprehensive steps for migrating from @codetrix-studio/capacitor-google-auth to @capgo/capacitor-social-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

Installation

1. Remove the old package:

   npm uninstall @codetrix-studio/capacitor-google-auth

2. Install the new package:

   npm install @capgo/capacitor-social-login
   npx cap sync

Important Changes in Google Auth Setup

Web Client ID Requirement

Critical Change: The updated plugin requires using a Web Client ID across all platforms.

You’ll need to:

1. Create a Web Client ID in Google Cloud Console if you don’t have one (How to get the credentials)
2. Use this Web Client ID in the webClientId field for all platforms
3. For Android, you still need to create an Android Client ID with your SHA1, but this is only for verification purposes - the token won’t be used (Android setup guide)

Code Changes

Import Changes

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

Initialization

The setup transforms from a simple GoogleAuth.initialize() call to a more structured SocialLogin.initialize() with nested Google configuration:

GoogleAuth.initialize({
  clientId: 'CLIENT_ID.apps.googleusercontent.com',
  scopes: ['profile', 'email'],
  grantOfflineAccess: true,
});

await SocialLogin.initialize({
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
    iOSClientId: 'IOS_CLIENT_ID', // for iOS
    mode: 'offline' // replaces grantOfflineAccess
  }
});

Sign In

The login method changes from GoogleAuth.signIn() to SocialLogin.login() with explicit provider specification:

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

Platform Specific Changes

Android

1. Update your MainActivity.java (Full Android setup guide):

 import ee.forgr.capacitor.social.login.GoogleProvider;
 import ee.forgr.capacitor.social.login.SocialLoginPlugin;
 import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
 import com.getcapacitor.PluginHandle;
 import com.getcapacitor.Plugin;
 import android.content.Intent;
 import android.util.Log;

 public class MainActivity extends BridgeActivity {
 public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

   @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);

     if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
       PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
       if (pluginHandle == null) {
         Log.i("Google Activity Result", "SocialLogin login handle is null");
         return;
       }
       Plugin plugin = pluginHandle.getInstance();
       if (!(plugin instanceof SocialLoginPlugin)) {
         Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
         return;
       }
       ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
     }
   }

   public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

iOS

1. No major changes needed in AppDelegate.swift (iOS setup guide)

2. Update your configuration in capacitor.config.json, we don’t use it in the new plugin:

{
  "plugins": {
   "GoogleAuth": {
     "scopes": ["profile", "email"],
     "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "forceCodeForRefreshToken": true
   }
}

Web

1. Remove the Google Sign-In meta tags from your index.html if you were using them:

<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

Response Type Changes

The authentication response now provides a structured object containing provider information, access tokens, ID tokens, and user profile data:

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... other token fields
    } | null;
    idToken: string | null;
    profile: {
      email: string | null;
      familyName: string | null;
      givenName: string | null;
      id: string | null;
      name: string | null;
      imageUrl: string | null;
    };
  };
}

The response structure includes:

• provider: Identifies the authentication provider ('google')
• result.accessToken: Access token details with expiration
• result.idToken: ID token for authentication
• result.profile: User profile information including email, name, and image URL

Additional Capabilities

The new package supports multiple social authentication providers beyond Google:

• Apple Sign-In
• Facebook Login

This unified approach provides:

• Consistent API across all providers
• Improved TypeScript support
• Better error handling
• Active maintenance and community support

Check the main documentation for detailed setup instructions for these additional providers.