Migración de Google Auth a @capgo/social-login

Resumen

Esta guía ofrece los pasos detallados para migrar de @codetrix-studio/capacitor-google-auth a @capgo/capacitor-social-login, garantizando una transición fluida y una mejor experiencia de autenticación. El nuevo plugin unifica varios proveedores de autenticación social bajo un único y consistente API.

Instalación

1. Elimina el paquete anterior:

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

2. Instala el nuevo package:

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

Cambios importantes en la configuración de Google Auth

Requisito del Web Client ID

Cambio crítico: El plugin actualizado requiere usar un Web Client ID en todas las plataformas.

Tendrás que:

1. Crear un Web Client ID en Google Cloud Console si no tienes uno (Cómo obtener las credenciales)
2. Usa este Web Client ID en el webClientId campo para todas las plataformas
3. Para Android, aún debes crear un Android Client ID con tu SHA1, pero solo es para verificación; el token no se usará (guía de configuración de Android)

Cambios en Code

Cambios en los imports

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

Inicialización

La configuración pasa de ser un simple GoogleAuth.initialize() llamada a una forma más estructurada SocialLogin.initialize() con configuración anidada de Google:

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
  }
});

Iniciar sesión

El método de login cambia de GoogleAuth.signIn() a SocialLogin.login() con especificación explícita del proveedor:

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

Cambios específicos por plataforma

Android

1. Actualiza tu MainActivity.java (Guía completa de configuración para Android):

 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 se requieren cambios importantes en AppDelegate.swift (Guía de configuración para iOS)

2. Actualiza tu configuración en capacitor.config.json, no la usamos en el nuevo plugin:

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

Web

1. Elimina las meta tags de Google Sign-In de tu index.html si las estabas utilizando:

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

Cambios en el tipo de respuesta

La respuesta de autenticación ahora devuelve un objeto estructurado con la información del proveedor, access tokens, ID tokens y datos del perfil de usuario:

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;
    };
  };
}

La estructura de la respuesta incluye:

• provider: Identifica el proveedor de autenticación ('google')
• result.accessToken: Detalles del access token con expiración
• result.idToken: ID token para autenticación
• result.profile: Información del perfil de usuario: email, nombre y URL de imagen

Capacidades adicionales

El nuevo paquete soporta múltiples proveedores de autenticación social además de Google:

• Iniciar sesión con Apple
• Facebook Login

Este enfoque unificado ofrece:

• API consistente en todos los proveedores
• Mejor soporte de TypeScript
• Gestión de errores mejorada
• Mantenimiento activo y soporte de la comunidad

Consulta la documentación principal para ver las instrucciones de configuración detalladas de estos proveedores adicionales.

Continúa desde Google Auth Migration a @capgo/social-login

Si estás usando Migración de Google Auth a @capgo/social-login para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.