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

Configurar la autenticación en aplicaciones móviles puede ser complejo, pero combinarlo con el plugin de inicio de sesión social de Supabase hace que sea sencillo. Este tutorial le guiará a través de la integración de la autenticación social (Google, Apple, Facebook) con Supabase en su Capgo Social Login plugin makes it straightforward. This tutorial will guide you through integrating social authentication (Google, Apple, Facebook) with Supabase in your Capacitor app.

proporciona un backend como servicio robusto con autenticación integrada, mientras que el plugin @ @capgo/capacitor-social-login ofrece autenticación social nativa en plataformas iOS, Android y web. Juntos, proporcionan:

Autenticación social fluida
Gestión de tokens segura
Compatibilidad transversal de plataformas
Integración de base de datos en tiempo real
Gestión de usuarios integrada

Requisitos previos

Antes de empezar, asegúrate de tener:

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

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

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

Paso 2: Configura el proyecto de Supabase

Crea y configura tu proyecto de Supabase

Crear un proyecto de Supabase:
- Ir a supabase.com y registrarse/iniciar sesión
- Hacer clic en “Nuevo Proyecto”
- Elegir su organización
- Ingresar un Nombre del Proyecto (por ejemplo, “Autenticación de MyApp”)
- Establecer una Contraseña de Base de Datos (guarda esto de manera segura)
- Selecciona tu Región (selecciona la más cercana a tus usuarios)
- Haz clic “Crear nuevo proyecto”
Obtén tus credenciales de proyecto:
- Una vez creado, ve a Configuración > API
- Copia tu URL de Proyecto (por ejemplo, https://your-project-ref.supabase.co)
- Copia tu anon public API clave
- Guarda estos para su uso posterior en tu aplicación

Configuración de ajustes de autenticación

Configura ajustes de autenticación generales:
- Ir a Autenticación > Ajustes
- Bajo Ajustes generales:
  - Establece URL del sitio To la URL de tu aplicación (por ejemplo, https://yourdomain.com o http://localhost:3000 para el desarrollo
  - Agregar direcciones URL adicionales si es necesario: Configura los ajustes de correo electrónico
```
http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)
```
(opcional pero recomendado): Bajo
- Ajustes de SMTP , configura tu proveedor de correo electrónicoEsto habilita las confirmaciones de correo electrónico y los restablecimientos de contraseña
- Configure email settings (optional but recommended):
- Para el desarrollo, puede utilizar el servicio de correo electrónico integrado

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 Habilite botón de encendido y opciones de configuración

Ahora, configuraremos cada proveedor social en detalle:

Configuración de autenticación de Google en Supabase

Primero, obtenga sus credenciales de autenticación de Google:

Siga nuestra guía integral 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 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úrela en Supabase:

Habilite el proveedor de Google en Supabase:
- En su panel de control de Supabase, vaya a Autenticación > Proveedores
- Buscar Google y activarlo ACTIVADO
- Rellene la configuración:
  - ID de cliente: Su OAuth de Google Web ID de cliente (de la consola de Google Cloud)
  - Secreto de cliente: Su OAuth de Google Web Secreto del Cliente
  - Dirección de Redireccionamiento: https://your-project-ref.supabase.co/auth/v1/callback (rellenado automáticamente)
- Hacer clic “Guardar”

Importante: Utilice el ID del Cliente Web y Secreto del Cliente Web en Supabase, incluso si está construyendo una aplicación móvil. Los IDs de cliente móviles se utilizan por separado en la configuración del plugin.

Configuración de autenticación de Apple en Supabase

Obtenga credenciales de Apple:

Siga nuestra guía detallada de configuración de Apple: Configuración de autenticación de Apple

Esta guía cubre:

Configuración de su cuenta de desarrollador de Apple
Creación de IDs de aplicación y IDs de servicio
Configuración de 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, configurela en Supabase:

Habilite el proveedor de Apple en Supabase:
- Ir a Autenticación > Proveedores y activar/desactivar Apple HABILITADO
- Rellene la configuración:
  - ID de cliente: Su identificador de Servicio ID (por ejemplo, com.yourapp.signin)
  - : Genere este JWT utilizando su clave privada de Apple (consultelos documentos de Apple de Supabase para el formato de JWT) __CAPGO_KEEP_0__
  - URL de redirección: https://your-project-ref.supabase.co/auth/v1/callback (rellenado automáticamente)
- Haga 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. Siga nuestra documentación con cuidado para cada plataforma.

Configuración de autenticación de Facebook en Supabase

Obtenga credenciales de Facebook:

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

Este manual cubre:

Crear una cuenta de desarrollador de Facebook y una aplicación
Agregar el producto de inicio de sesión de Facebook
Configurando URIs de redireccionamiento 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, configúrela en Supabase:

Habilitar proveedor de Facebook en Supabase:
- Vaya a Autenticación > Proveedores y active Facebook ENCENDIDO
- Rellene la configuración:
  - ID del cliente: Su ID de aplicación de Facebook
  - Secreto del cliente: Su secreto de aplicación de Facebook
  - URL de redireccionamiento: https://your-project-ref.supabase.co/auth/v1/callback (rellenado automáticamente)
- Haga clic “Guardar”

Importante: Asegúrese de agregar la URL de llamada de retorno de Supabase (https://your-project-ref.supabase.co/auth/v1/callback) a la aplicación de Facebook de URIs de OAuth válidas de redireccionamiento en el Facebook Login.

Importante Notas de configuración de Supabase

Nivel de Seguridad de Fila (RLS):

Después de configurar la autenticación, habilite RLS en sus tablas
Ir a Base de datos > Tablas y activar Habilitar RLS para cada tabla
Crear políticas para controlar el acceso a los datos en función de los usuarios autenticados

Administració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 Configuración:

Utilice la herramienta de prueba de autenticación integrada de Supabase
Ir a Autenticación > Usuarios y hacer clic en ‘Invitar a usuario’ para probar flujos de correo electrónico
Verifique la Registro de actividad sección para cualquier error de autenticación

Ahora que Supabase está configurado, necesita configurar el plugin de inicio de sesión social con las credenciales correspondientes. Importante: El plugin necesita las credenciales de OAuth de los proveedores originales (no de Supabase), mientras que Supabase maneja la autenticación en el 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 de cliente web protegido para todas las plataformas y opcionalmente un ID de cliente de 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 de cliente web (no IDs de cliente de Android/iOS) para el webClientId campo
El plugin funcionará en todas las plataformas con solo el ID de cliente web
El iOSClientId es opcional y solo se utiliza para características de Google específicas de iOS

Configuración del plugin de Apple

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

Para iOS (inicia sesión con Apple nativa):

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 el inicio de sesión nativo con Apple (no se necesita configuración adicional)
Android/Web requiere el ID de Servicio que creaste en el Portal del Desarrollador de Apple
El redirectUrl debe coincidir con lo que configuraste en ambos Portal del Desarrollador 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:

Utiliza la misma ID de aplicación que configuraste en Supabase
El Token del cliente se encuentra en los ajustes básicos de tu aplicación de Facebook
limitedLogin: true habilita la característica de inicio de sesión limitado de Facebook, enfocada en la privacidad (solo iOS)
Importante: Consulta nuestra guía de configuración de Facebook para obtener información detallada sobre la característica de inicio de sesión limitado, incluidas consideraciones sobre ATT

Inicialización del Plugin completa

Aquí está cómo 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'
    }
  });
}

Notas importantes:

Llama initialize() en cuanto comience tu aplicación, no antes de cada inicio de sesión Solo necesitas configurar los proveedores que planeas utilizar
Las credenciales aquí provienen de los
proveedores originales , no de SupabaseAsegúrate de que las credenciales del proveedor coincidan con lo que configuraste en Supabase
Paso 5: Configura el cliente de Supabase

Instala el cliente de Supabase:

Crear un servicio de Supabase:

npm install @supabase/supabase-js

Paso 6: Implementa el flujo de autenticación

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

Crear un servicio de autenticación que combine ambos:

en cuanto comience tu aplicación, no antes de cada inicio de sesión

// 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();

Paso 7: Implementa en tu aplicación

Inicia el servicio y maneja 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();

Crea botones de inicio de sesión en tu interfaz de usuario:

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

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

Configuración de iOS

Para obtener instrucciones detalladas de configuración de iOS, consulta nuestros guías específicas de plataforma:

Configuración de iOS de Google - Configuración de esquemas de URL, configuración de Info.plist
Configuración de iOS de Apple - Configuración de la capacidad de inicio de sesión con Apple
Configuración de iOS de Facebook (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 vinculadas para obtener instrucciones completas de configuración de iOS, incluida la configuración del proyecto de Xcode.

Configuración de Android

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

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

Configuración Android básica:

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. Configure AndroidManifest.xml - Agregar 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. Agregar 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 enlazada para una configuración de Android completa, incluyendo la configuración de servicios de Google Play y el nombre de paquete.

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

Una vez que los usuarios estén autenticados, puede usar la base de datos de Supabase con seguridad de nivel 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 expongas claves sensibles en tu cliente code
Utiliza variables de entorno para la configuración
Habilita el control de acceso a nivel de fila en Supabase
Valida tokens en tu backend si es necesario
Gestiona la refrescación de tokens de manera automática con Supabase

Resolución de problemas de problemas comunes

Errores de coincidencia de tokens

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 URLs de redirección estén configuradas correctamente

Problemas específicos de plataforma

iOS: Verifique que su ID de paquete coincida con la configuración de desarrollador de Apple
Android: Asegúrese de que las huellas digitales SHA1 estén agregadas correctamente a Google Console

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 tiene un sistema de autenticación completo que combina el backend robusto de Supabase con capacidades de inicio de sesión social nativas. Esta configuración proporciona:

Autenticación social nativa segura
Gestión de tokens suave y sin problemas
Integración de base de datos en tiempo real
Compatibilidad transversal de plataformas

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

Para características avanzadas como autenticación de múltiples factores o reclamaciones personalizadas, consulte la documentación de Supabase y la documentación del plugin de inicio de sesión social.

Si estás utilizando Configura la autenticación de Supabase con el plugin de inicio de sesión social Capacitor para planificar la autenticación y los flujos de cuenta, conecta con @capgo/capacitor-social-login para obtener detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para obtener detalles de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para obtener detalles de implementación en @capgo/capacitor-native-biometric, Autenticación en dos factores para obtener detalles de implementación en Autenticación en dos factores, y SSO (Empresas) para los detalles de implementación en SSO (Enterprise).

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

Supabase