Connexion Apple Supabase sur le Web

Prérequis

Ce guide vous aidera à intégrer Apple Sign-In avec Supabase Authentication sur Web. Il est supposé que vous avez déjà complété :

• le Paramètres de connexion Apple Web
• le Paramètres de connexion Apple Login - Général de Supabase.

Mise en œuvre

La mise en œuvre complète est disponible dans le fichier de l'application d'exemple. Ce guide explique les concepts clés et comment l'utiliser. supabaseAuthUtils.ts En utilisant l'assistant d'authentification

Section intitulée « En utilisant l'assistant d'authentification »

fonction gère l'ensemble du flux d'authentification : authenticateWithAppleSupabase Copier dans le presse-papier

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

Section intitulée « Comment ça marche »

Initialisation

1. __CAPGO_KEEP_0__: Le plugin est initialisé avec votre ID de Service et l'URL actuelle de la page en tant que URL de redirection
2. OAuth Popup: Ouvre une fenêtre popup avec la page d'authentification d'Apple
3. User Authentication: L'utilisateur s'authentifie avec Apple dans la popup
4. Identity Token: Apple retourne un jeton d'identité (JWT) contenant les informations de l'utilisateur
5. Supabase Authentication: Le jeton d'identité est envoyé à Supabase en utilisant signInWithIdToken()

The helper function automatically detects the web platform and configures everything appropriately.

Important Notes

Configuration de l'ID de service

• Le Web nécessite votre ID de service Apple (même que pour Android)
• L'ID de service doit être configuré dans le Portail du développeur Apple avec les URLs de retour correctes
• Vérifiez que votre domaine est ajouté aux domaines autorisés dans le Portail du développeur Apple

URL de redirection

• Sur le Web, l'URL de redirection est automatiquement définie sur window.location.href (URL de la page actuelle)
• Cela doit correspondre à l'une des URLs de retour configurées dans le Portail du développeur Apple
• Assurez-vous que les deux URL, avec et sans slash final, sont configurées dans le Portail du développeur Apple

ID client Supabase

Dans Supabase, configurez votre fournisseur Apple avec :

• ID du client: Votre ID de service Apple (par exemple, com.example.app.service)

Si vous utilisez également iOS, vous devrez fournir les deux ID d'application et de service dans le champ ID du client de Supabase (séparés par des virgules).

Mettre à jour la fonctionnalité d'aide

Lorsque vous utilisez la authenticateWithAppleSupabase fonctionnalité d'aide, vous devez mettre à jour la clientId pour qu'elle corresponde à votre ID de service Apple :

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

Important

Remplacer 'your.service.id.here' par votre ID de service Apple réel (la même valeur que vous avez configurée dans le Portail des développeurs Apple).

Résolution des problèmes

Mauvaise correspondance de l'ID de service

• : Vérifiez que votre ID de service correspond dans le Portail des développeurs Apple et dans votre __CAPGO_KEEP_0__: Verify your Service ID matches in both Apple Developer Portal and your code
• : Assurez-vous que l'URL actuelle de la page (avec et sans slash final) est configurée dans le Portail des développeurs Apple: Assurez-vous que l'URL actuelle de la page (avec et sans slash final) est configurée dans le Portail des développeurs Apple
• Popup bloqué: Vérifiez les paramètres du navigateur - certains navigateurs bloquent les pop-ups par défaut
• Domaine non autorisé: Vérifiez que votre domaine est ajouté aux domaines autorisés dans le portail Apple Developer
• Configuration de Supabase: Vérifiez que votre ID de service est correctement configuré dans les paramètres de fournisseur Apple de Supabase
• Vérifiez le l'application d'exemple code en référence