Guía de Migración de @codetrix-studio/Capacitor-google-auth a @Capgo/Capacitor-social-login

Descripción General

Esta guía proporciona pasos completos para migrar de @codetrix-studio/capacitor-google-auth a @capgo/capacitor-social-login, asegurando una transición suave y una experiencia de autenticación mejorada. El nuevo Plugin unifica múltiples proveedores de autenticación social bajo una API única y consistente.

Instalación

1. Elimina el paquete antiguo:

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

2. Instala el nuevo paquete:

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

Cambios Importantes en la Configuración de Google Auth

Requisito del ID de Cliente Web

Cambio Crítico: El Plugin actualizado requiere usar un ID de Cliente Web en todas las plataformas.

Necesitarás:

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

Cambios en el Código

Cambios en las Importaciones

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

Inicialización

La configuración se transforma de una simple llamada a GoogleAuth.initialize() a un SocialLogin.initialize() más estructurado 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', // Usar ID de Cliente Web para todas las plataformas
    iOSClientId: 'IOS_CLIENT_ID', // para iOS
    mode: 'offline' // reemplaza grantOfflineAccess
  }
});

Iniciar Sesión

El método de inicio de sesión 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 // si necesitas token de actualización
  }
});

Cambios Específicos de Plataforma

Android

1. Actualiza tu MainActivity.java (Guía completa de configuración de 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 necesitan cambios importantes en AppDelegate.swift (Guía de configuración de iOS)

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

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

Web

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

<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 proporciona un objeto estructurado que contiene información del proveedor, tokens de acceso, tokens de ID y datos del perfil del usuario:

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... otros campos de token
    } | 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 respuesta incluye:

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

Capacidades Adicionales

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

• Inicio de Sesión con Apple
• Inicio de Sesión con Facebook

Este enfoque unificado proporciona:

• API consistente en todos los proveedores
• Soporte mejorado de TypeScript
• Mejor manejo de errores
• Mantenimiento activo y soporte de la comunidad

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