wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
a3e0227e41
the-tip-top-frontend/docs/FACEBOOK_LOGIN_SETUP.md
soufiane a3e0227e41 fix: improve Facebook login error handling and add setup documentation 
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 <noreply@anthropic.com>
2025-11-19 15:44:21 +01:00

3.4 KiB
Raw Blame History

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 :

// 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