Configura la autenticación de Supabase con el plugin de inicio de sesión social de Capacitor.

Configurando la autenticación en aplicaciones móviles puede ser complejo, pero combinando Supabase con el Capgo Plugin de Inicio de Sesión Social hace que sea sencillo. Este tutorial te guiará a través de la integración de la autenticación social (Google, Apple, Facebook) con Supabase en tu Capacitor app.

Supabase proporciona un backend como servicio robusto con autenticación integrada, mientras que el @capgo/capacitor-login social El plugin ofrece autenticación social nativa en iOS, Android y plataformas web. Para una integración más estrecha de Supabase, @capgo/capacitor-supabase agrega ayudantes de autenticación nativos y acceso JWT. Juntos, proporcionan:

Gestión de usuarios integrada
Seamless social authentication
Secure token management
Cross-platform compatibility
Real-time database integration

Requisitos previos

Antes de empezar, asegúrese de tener:

Un proyecto Capacitor configurado
Una cuenta y proyecto de Supabase
Cuentas de desarrollador para tus proveedores sociales elegidos (Google, Apple, Facebook)

Primero, instale el plugin de inicio de sesión social Capgo:

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

Consulte las Iniciar sesión social y Supabase para configuraciones específicas de plataforma.

Paso 2: Configura el proyecto de Supabase

Crea y configura tu proyecto de Supabase

Crea un proyecto de Supabase:
- Ve a supabase.com y regístrate/ingresa
- Haz clic “Nuevo Proyecto”
- Elige tu organización
- Ingresa un Nombre del Proyecto por ejemplo, “MiApp Autenticación”
- Establecer un Contraseña de Base de Datos (guarda esto de manera segura)
- Selecciona tu Región (elige la más cercana a tus usuarios)
- Haz clic en “Crear nuevo proyecto”
Obtén tus credenciales de proyecto:
- Una vez creado, ve a Configuración > API
- Copia tus URL del proyecto (por ejemplo, https://your-project-ref.supabase.co)
- Copia tu anónimo público API clave
- Save these for later use in your app

Configura Configuración de Autenticación

Configura ajustes de autenticación:
- Vaya a Autenticación > Configuración
- Under Ajustes generales:
  - Configura URL del sitio a la URL de tu aplicación (por ejemplo, https://yourdomain.com o http://localhost:3000 para el desarrollo)
  - Agregar URLs de redirección adicionales si es necesario: si es necesario:
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
(opcional pero recomendado): Configuración de SMTP
- Bajo Configuración de SMTPconfigure su proveedor de correo electrónico
- Esta permite confirmaciones de correo electrónico y reinicios de contraseña.
- Para el desarrollo, puede utilizar el servicio de correo electrónico incorporado

Acceda a la sección de proveedores:
- Vaya a Autenticación > Proveedores en su panel de Supabase
- Verá una lista de proveedores sociales disponibles
- Cada proveedor tiene un Habilitar botón de encendido y opciones de configuración

Ahora, configure cada proveedor social en detalle:

Configuración de Autenticación de Google en Supabase

Primero, obtén tus credenciales de OAuth de Google:

Sigue nuestra guía completa de configuración de Google: Configuración de Autenticación de Google

Esta guía cubre:

Crear un proyecto de Google Cloud
Configuración de credenciales de OAuth 2.0 para web, iOS y Android
Configuración de la pantalla de consentimiento
Obtener los IDs y secretos de cliente necesarios

Después de completar la configuración de Google, configúralo en Supabase:

Habilite el proveedor de Google en Supabase:
- En su panel de Supabase, vaya a Autenticación > Proveedores
- Encuentre Google y active el interruptor ACTIVADO
- Rellene la configuración:
  - ID de cliente: Su ID de OAuth de Google Web ID del cliente (desde la Consola de Google Cloud)
  - Secreto del cliente: Tu clave de OAuth de Google Web Secreto del cliente
  - : Dirección de redireccionamiento de Web: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Haz clic “Guardar”

Importante: Utilice ID del cliente web and Secreto del Cliente Web en Supabase, incluso si estás construyendo una aplicación móvil. Los identificadores de cliente móviles se utilizan por separado en la configuración del complemento.

Configuración de Autenticación de Apple en Supabase

Obtén credenciales de Apple:

Sigue nuestra guía detallada de configuración de Apple: Configuración de Autenticación de Apple

Este manual cubre:

Configuración de tu cuenta de desarrollador de Apple
Creación de IDs de aplicación y IDs de servicio
Configurando la capacidad de inicio de sesión con Apple
Generación de las claves privadas requeridas
Configuración específica de plataforma para iOS, Android y Web

Después de completar la configuración de Apple, configúrela en Supabase:

Habilite el proveedor de Apple en Supabase:
- Vaya a Autenticación > Proveedores y active Apple ACTIVADO
- Rellene la configuración:
  - ID de cliente: Su identificador de Servicio ID (por ejemplo, com.yourapp.signin)
  - Secreto de cliente: Genere este JWT utilizando su clave privada de Apple (consulte Documentación de Apple para el formato JWT)
  - URL de redirección: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Hacer clic “Guardar”

Nota: La configuración de autenticación de Apple es la más compleja debido a los requisitos de Apple para IDs de servicio, claves privadas y generación de JWT. Sigue nuestra documentación cuidadosamente para cada plataforma.

Configuración de autenticación de Facebook en Supabase

Obtén credenciales de Facebook:

Sigue nuestra guía de configuración de Facebook completa: Configuración de autenticación de Facebook

Esta guía cubre:

Crear una cuenta de desarrollador de Facebook y una aplicación
Adding the Facebook Login product
Configurar las URIs de redirección de OAuth
Obtener su ID de aplicación, secreto de aplicación y token de cliente
Configuración específica de plataforma para iOS y Android

Después de completar la configuración de Facebook, configurelo en Supabase:

Habilitar el proveedor de Facebook en Supabase:
- Vaya a: Autenticación > Proveedores y active Facebook On
- Rellene la configuración:
  - ID del cliente: Tu ID de aplicación de Facebook
  - Secreto del cliente: Tu secreto de aplicación de Facebook
  - URL de redirección: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
- Haga clic “Guardar”

Importante: Asegúrate de agregar la URL de llamada de Supabase (https://your-project-ref.supabase.co/auth/v1/callback) a tu aplicación de Facebook's Valid URIs de redireccionamiento de OAuth en los ajustes de Facebook Login.

Notas importantes de configuración de Supabase

Nivel de seguridad de fila (RLS):

Después de configurar la autenticación, habilite RLS en tus tablas
Ve a Base de datos > Tablas y activa Habilitar RLS para cada tabla
Crear políticas para controlar el acceso a los datos según los usuarios autenticados

Gestión de usuarios:

Ver usuarios autenticados en Autenticación > Usuarios
Monitorear eventos de autenticación en Autenticación > Registros
Configurar plantillas de correo electrónico en Autenticación > Plantillas de correo electrónico

Prueba de la configuración:

Utilice la herramienta de prueba de autenticación integrada de Supabase
Ir a Autenticación > Usuarios y hacer clic “Invita al usuario” para probar flujos de correo electrónico
Verificar el Logs sección para errores de autenticación

Ahora que Supabase está configurado, debes configurar el plugin de inicio de sesión social con las credenciales correspondientes. Importante: El plugin necesita las credenciales OAuth de los proveedores originales (mientras Supabase maneja la autenticación del lado del servidor)

Cómo funciona el flujo de autenticación

Antes de sumergirse en la configuración, comprenda el flujo:

El plugin autentica con el proveedor social (Google/Apple/Facebook) de manera nativa
El plugin recibe tokens (token de acceso, token de ID) del proveedor
Su aplicación envía estos tokens a Supabase utilizando signInWithIdToken()
Supabase valida los tokens con el proveedor y crea una sesión de usuario
Supabase devuelve su propio token JWT para las solicitudes autenticadas de su aplicación

Configuración del plugin de Google

El plugin necesita su ID del cliente web para todas las plataformas y opcionalmente un ID del cliente iOS para características específicas de iOS:

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

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

Puntos clave para Google:

Utilice el ID del cliente web (no los IDs de cliente de Android/iOS) para el webClientId campo
El plugin funcionará en todas las plataformas con solo el ID del cliente web
El iOSClientId es opcional y solo se utiliza para características específicas de Google en iOS

Configuración del plugin de Apple

La configuración de Apple difiere entre iOS y Android:

Para iOS (autenticación nativa de Apple Sign-In):

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

Para Android/Web (requiere ID de Servicio):

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Puntos clave para Apple:

iOS utiliza Sign in with Apple nativo (no configuración adicional necesaria)
Android/Web requiere el ID de servicio que creó en el Portal de Desarrolladores de Apple
El redirectUrl debe coincidir con lo que configuraste en ambos Portal de Desarrolladores de Apple y Supabase

Configuración del plugin de Facebook

Facebook requiere su ID de aplicación y token de cliente:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

Puntos clave para Facebook:

Utilice el mismo ID de aplicación que configuró en Supabase
El token de cliente se encuentra en los ajustes básicos de su aplicación de Facebook
limitedLogin: true habilita la característica de inicio de sesión limitado de Facebook (solo para iOS)
ImportanteConsulte nuestro Guía de configuración de Facebook para información de inicio de sesión limitada, incluyendo consideraciones de ATT

Inicialización completa del plugin

Estos son los pasos para inicializar todos los proveedores juntos:

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

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

Importantes Notas:

Call initialize() once Solo necesita configurar los proveedores que planea utilizar
Solo necesita configurar los proveedores que planea utilizar
Las credenciales aquí provienen de y no de Supabaseno desde Supabase
Asegúrese de que las credenciales del proveedor coincidan con lo que configuró en Supabase

Instale el cliente de Supabase:

Crear un servicio de Supabase:

npm install @supabase/supabase-js

Crear un servicio de Supabase:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

Step 6: Implementar flujo de autenticación

Crear un servicio de autenticación que combina ambos:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

Step 7: Implementar en tu aplicación

Inicializar el servicio y manejar la autenticación:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

Crear botones de inicio de sesión en tu interfaz:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

Step 8: Configuración específica de la plataforma

Configuración de iOS

Para instrucciones de configuración de iOS detalladas, consulte nuestras guías específicas de plataforma.

Configuración de iOS de Google - Esquemas de URL, configuración de Info.plist
Configuración de iOS de Apple - Configuración de inicio de sesión con Apple
Configuración de Facebook iOS (en general, guía de Facebook) - Configuración de Facebook SDK

Resumen rápido - Agregar a ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

Siga las guías enlazadas para obtener instrucciones completas de configuración de iOS, incluida la configuración del proyecto de Xcode.

Configuración de Android

Para instrucciones de configuración de Android detalladas, consulte nuestras guías específicas de plataforma.

Configuración de Google Android - Huellas de SHA-1, configuración de servicios de Google Play
Configuración de Apple Android - Configuración de ID de servicio para Android
Configuración de Facebook para Android (en general, guía de Facebook) - Integración de Facebook SDK

Configuración Android esencial:

1. Obtenga su huella SHA-1 (requerido para Google):

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. Configura AndroidManifest.xml - Añada a android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. Agregue recursos de Facebook a android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

Siga las guías de la plataforma vinculada para configurar completamente Android, incluida la configuración de servicios de Google Play y el nombre del paquete.

Paso 9: Usando la base de datos de Supabase con usuarios autenticados

Una vez que los usuarios están autenticados, puede utilizar la base de datos de Supabase con nivel de seguridad de fila (RLS):

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

Consideraciones de seguridad importantes

Nunca expone claves sensibles en su cliente code
Utilice variables de entorno para la configuración
Habilite el nivel de seguridad de fila en Supabase
Valida tokens en su servidor si es necesario
Administre la refresco de tokens automáticamente con Supabase

Resolución de Problemas Comunes

Errores de Coincidencia de Token

Asegúrese de que las configuraciones de proveedor de OAuth coincidan entre el plugin de inicio de sesión social y Supabase
Verifique que las URL de redirección estén configuradas correctamente

Problemas Específicos de Plataforma

iOS: Verifica que tu ID de paquete coincida con tu configuración de desarrollador de Apple
Android: Asegúrese de que las huellas SHA1 estén agregadas correctamente al Console de Google

Interrupciones en el Flujo de Autenticación

Implemente un manejo de errores adecuado para problemas de red
Agregue estados de carga durante la autenticación

Conclusión

Ahora tienes un sistema de autenticación completo que combina el backend robusto de Supabase con capacidades de inicio de sesión social nativa. Este setup ofrece:

Autenticación social segura y nativa
Administración de tokens sin problemas
Integración de base de datos en tiempo real
Compatibilidad con múltiples plataformas

La combinación de Supabase y el plugin de autenticación social de Capgo ofrece una solución de autenticación poderosa y escalable para sus Capacitor aplicaciones.

Para características avanzadas como autenticación multifactor o reclamos personalizadosreclamos personalizados Documentación de Supabase y el Social Login plugin documentation.

Si estás utilizando Configuración de Supabase de Autenticación con Capacitor Plugin de Inicio de Sesión Social para planificar la autenticación y los flujos de cuenta, conecta con @capgo/capacitor-inicio-de-sesion-social para los detalles de implementación en @capgo/capacitor-inicio-de-sesion-social, @capgo/capacitor-clave-privada para los detalles de implementación en @capgo/capacitor-clave-privada, @capgo/capacitor-biometria-nativa para los detalles de implementación en @capgo/capacitor-biometria-nativa, Autenticación de dos factores para los detalles de implementación en la autenticación en dos factores, y SSO (Empresas) para los detalles de implementación en SSO (Empresas).

Configuración de autenticación de Supabase con Capacitor plugin de inicio de sesión social

¿Por qué usar Supabase con inicio de sesión social?