Primeros pasos

Copia un prompt de configuración con los pasos de instalación y la guía completa en markdown para este plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-social-login`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/social-login/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Instalación

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando los siguientes comandos y sigue las instrucciones específicas para cada plataforma a continuación:

Instala el paquete
Ventana de la terminal
```
bun add @capgo/capacitor-social-login
```
Sincroniza con proyectos nativos
Ventana de la terminal
```
bunx cap sync
```

Inicializar al arrancar la app

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

await SocialLogin.initialize({
  google: {
    webClientId: 'your-google-web-client-id',
    iOSClientId: 'your-google-ios-client-id',
    iOSServerClientId: 'your-google-web-client-id',
    mode: 'online',
  },
  apple: {
    clientId: 'your-apple-service-id',
    useProperTokenExchange: true,
    useBroadcastChannel: true,
  },
  facebook: {
    appId: 'your-facebook-app-id',
  },
  twitter: {
    clientId: 'your-twitter-client-id',
    redirectUrl: 'myapp://oauth/twitter',
  },
  oauth2: {
    github: {
      appId: 'your-github-client-id',
      authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
      accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
      redirectUrl: 'myapp://oauth/github',
      scope: 'read:user user:email',
      pkceEnabled: true,
    },
  },
});

Cuando los equipos eligen este plugin

Un solo paquete para Google, Apple, Facebook, Twitter/X y proveedores custom OAuth2 u OIDC.
Google Sign-In en Android mediante Credential Manager en lugar de plugins de la comunidad obsoletos.
Proveedores estilo Ionic Auth Connect a través de la capa de compatibilidad documentada.
Apps que deben compartir el code de login entre builds de móvil y web.

Ejemplos del flujo principal

await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
  },
});

Verificación de sesión

const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

Auth codes y refresh

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

Helpers avanzados

const jwt = await SocialLogin.decodeIdToken({
  idToken: 'eyJhbGciOi...',
});

const { date } = await SocialLogin.getAccessTokenExpirationDate({
  accessTokenExpirationDate: Date.now() + 3600 * 1000,
});

const expired = await SocialLogin.isAccessTokenExpired({
  accessTokenExpirationDate: Date.now() + 1000,
});

const active = await SocialLogin.isRefreshTokenAvailable({ refreshToken: 'a-token' });

Notas específicas del proveedor

Modo offline de Google

google.mode: 'offline' devuelve serverAuthCode del login. En este modo, logout, isLoggedIn, getAuthorizationCode y refresh no están disponibles.

Usa serverAuthCode solo como entrada para el intercambio de tokens en tu backend. Si necesitas llamar SocialLogin.refresh() en la app, usa google.mode: 'online' en su lugar.

Apple

Configura useProperTokenExchange: true para un manejo estricto de tokens y useBroadcastChannel: true para una configuración simplificada en Android.

Flujo de redirección web de OAuth2

Usa OAuth2LoginOptions.flow: 'redirect' para flujos web que redirigen fuera de la página.

Dependencias dinámicas de proveedores

Puedes configurar qué providers incluir para reducir el tamaño de la app nativa. Esto es ideal si tu app solo requiere providers específicos.

Añade la configuración del provider a capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        facebook: true,
        apple: true,
        twitter: false,
      },
      logLevel: 1,
    },
  },
};

export default config;

Los valores del provider significan:

true: el provider está habilitado y sus dependencias nativas se incluyen en el bundle.
false: el provider está deshabilitado y sus dependencias nativas no se incluyen en el bundle.

Detalles importantes:

Ejecuta bunx cap sync tras cambiar la configuración del provider.
Si no se suministra configuración, todos los providers por defecto son true por compatibilidad con versiones anteriores.
Deshabilitar un provider con false lo hace no disponible en runtime, incluso si solo usa APIs del sistema.
Esta configuración solo afecta a iOS y Android; no afecta a Web.
Apple Sign-In en Android usa OAuth sin dependencias externas de SDK.
Twitter/X usa OAuth 2.0 estándar sin dependencias externas de SDK.

Para incluir solo Google Sign-In y Apple Sign-In:

plugins: {
  SocialLogin: {
    providers: {
      google: true,
      facebook: false,
      apple: true,
      twitter: false,
    },
  },
}

Continúa desde Primeros pasos

Si estás usando Primeros pasos para planificar flujos de autenticación y cuentas, conéctalo con Uso de @capgo/capacitor-social-login para la funcionalidad nativa en Uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para el detalle de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para los detalles de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para los detalles de implementación en la autenticación de dos factores.