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

概要

このガイドは、@codetrix-studio/capacitor-google-auth から @capgo/capacitor-social-login への移行に関する包括的な手順を提供し、スムーズな移行と改善された認証エクスペリエンスを確保します。新しいプラグインは、複数のソーシャル認証プロバイダーを単一の一貫した 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.