From a3e0227e41431ac2cb451e6a5b3427736b5e42f9 Mon Sep 17 00:00:00 2001 From: soufiane Date: Wed, 19 Nov 2025 15:44:21 +0100 Subject: [PATCH] fix: improve Facebook login error handling and add setup documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Enhanced error handling for Facebook Login to provide clearer messages when the service is unavailable. Added comprehensive setup documentation for configuring Facebook OAuth properly. Changes: - Improved error messages in Facebook SDK for unavailable service - Updated login page to display specific error messages to users - Added FACEBOOK_LOGIN_SETUP.md with step-by-step configuration guide - Documented alternatives (email/Google login) while Facebook is being configured This addresses the "Fonctionnalité indisponible" error users are seeing when attempting to use Facebook Login. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- app/login/page.tsx | 3 +- docs/FACEBOOK_LOGIN_SETUP.md | 105 +++++++++++++++++++++++++++++++++++ lib/facebook-sdk.ts | 3 + 3 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 docs/FACEBOOK_LOGIN_SETUP.md diff --git a/app/login/page.tsx b/app/login/page.tsx index fbb6e06..3a48ddd 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -67,7 +67,8 @@ export default function LoginPage() { } catch (error: any) { console.error("Facebook login error:", error); if (error.message !== 'Facebook login cancelled') { - toast.error("Erreur lors de la connexion avec Facebook"); + // Show the specific error message from Facebook SDK + toast.error(error.message || "Erreur lors de la connexion avec Facebook"); } } finally { setIsFacebookLoading(false); diff --git a/docs/FACEBOOK_LOGIN_SETUP.md b/docs/FACEBOOK_LOGIN_SETUP.md new file mode 100644 index 0000000..3b2e0d9 --- /dev/null +++ b/docs/FACEBOOK_LOGIN_SETUP.md @@ -0,0 +1,105 @@ +# Configuration Facebook Login + +## Problème actuel + +L'erreur "Fonctionnalité indisponible - Facebook Login est actuellement indisponible pour cette application" indique que l'application Facebook nécessite une configuration supplémentaire. + +## Solution + +### 1. Accéder au Dashboard Facebook Developers + +1. Rendez-vous sur https://developers.facebook.com/apps +2. Sélectionnez votre application (ID: `836681122652445`) + +### 2. Compléter les informations de l'application + +Facebook requiert les informations suivantes pour activer le Login : + +#### a. Politique de confidentialité et Conditions d'utilisation + +Dans **Paramètres > Basique** : +- **URL de la politique de confidentialité** : `https://dev.dsp5-archi-o24a-15m-g3.fr/privacy` +- **URL des conditions d'utilisation** : `https://dev.dsp5-archi-o24a-15m-g3.fr/terms` + +#### b. Configuration du produit Facebook Login + +Dans **Produits > Facebook Login > Paramètres** : + +**URI de redirection OAuth valides** : +``` +https://dev.dsp5-archi-o24a-15m-g3.fr +https://dev.dsp5-archi-o24a-15m-g3.fr/login +https://preprod.dsp5-archi-o24a-15m-g3.fr +https://preprod.dsp5-archi-o24a-15m-g3.fr/login +https://dsp5-archi-o24a-15m-g3.fr +https://dsp5-archi-o24a-15m-g3.fr/login +``` + +**Domaines d'application autorisés** : +``` +dev.dsp5-archi-o24a-15m-g3.fr +preprod.dsp5-archi-o24a-15m-g3.fr +dsp5-archi-o24a-15m-g3.fr +``` + +#### c. Catégorie de l'application + +Dans **Paramètres > Basique** : +- Sélectionnez une catégorie appropriée : **"Jeux"** ou **"Shopping et commerce de détail"** + +#### d. Icône de l'application + +Ajoutez une icône pour l'application (minimum 1024x1024 pixels) + +### 3. Demander l'autorisation des permissions + +Dans **Révision de l'application > Autorisations et fonctionnalités** : + +Demander l'autorisation pour : +- `email` (obligatoire) +- `public_profile` (obligatoire) + +### 4. Passer en mode Live + +Une fois toutes les informations complétées : +1. Allez dans **Paramètres > Basique** +2. Basculez le commutateur **"Mode de l'application"** de "Développement" à "Live" + +## Mode de test temporaire + +En attendant la configuration complète, vous pouvez : + +### Option 1 : Ajouter des testeurs + +Dans **Rôles > Testeurs** : +1. Ajoutez les comptes Facebook qui doivent tester l'application +2. Ces comptes pourront se connecter même si l'app est en mode Développement + +### Option 2 : Désactiver temporairement Facebook Login + +Commenter le bouton Facebook dans le code : + +```typescript +// Dans .env.dev, .env.preprod, .env.production : +# NEXT_PUBLIC_FACEBOOK_APP_ID=836681122652445 +``` + +Ou supprimer/commenter la variable d'environnement pour masquer le bouton automatiquement. + +## Messages d'erreur améliorés + +Le code a été mis à jour pour afficher des messages d'erreur plus clairs : +- ✅ "Facebook Login est actuellement indisponible. Veuillez utiliser la connexion par email ou Google." +- ✅ "Le SDK Facebook n'est pas encore chargé. Veuillez réessayer dans quelques secondes." + +## Alternative : Connexion Google + +En attendant que Facebook Login soit configuré, les utilisateurs peuvent utiliser : +- ✅ Connexion par email/mot de passe +- ✅ Connexion Google OAuth (déjà configuré et fonctionnel) + +## Documentation Facebook + +- [Guide de configuration Facebook Login](https://developers.facebook.com/docs/facebook-login/web) +- [Politiques de la plateforme Facebook](https://developers.facebook.com/docs/development/release/policies) +- [FAQ Facebook Login](https://developers.facebook.com/docs/facebook-login/faq) diff --git a/lib/facebook-sdk.ts b/lib/facebook-sdk.ts index 78ce0ba..aef8268 100644 --- a/lib/facebook-sdk.ts +++ b/lib/facebook-sdk.ts @@ -50,6 +50,9 @@ export const loginWithFacebook = (): Promise => { window.FB.login((response: any) => { if (response.authResponse) { resolve(response.authResponse.accessToken); + } else if (response.status === 'unknown') { + // Facebook app is being updated or unavailable + reject(new Error('Facebook Login est actuellement indisponible. Veuillez utiliser la connexion par email ou Google.')); } else { reject(new Error('Facebook login cancelled')); }