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>
This commit is contained in:
parent
22553e5c89
commit
a3e0227e41
|
|
@ -67,7 +67,8 @@ export default function LoginPage() {
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error("Facebook login error:", error);
|
console.error("Facebook login error:", error);
|
||||||
if (error.message !== 'Facebook login cancelled') {
|
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 {
|
} finally {
|
||||||
setIsFacebookLoading(false);
|
setIsFacebookLoading(false);
|
||||||
|
|
|
||||||
105
docs/FACEBOOK_LOGIN_SETUP.md
Normal file
105
docs/FACEBOOK_LOGIN_SETUP.md
Normal file
|
|
@ -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)
|
||||||
|
|
@ -50,6 +50,9 @@ export const loginWithFacebook = (): Promise<string> => {
|
||||||
window.FB.login((response: any) => {
|
window.FB.login((response: any) => {
|
||||||
if (response.authResponse) {
|
if (response.authResponse) {
|
||||||
resolve(response.authResponse.accessToken);
|
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 {
|
} else {
|
||||||
reject(new Error('Facebook login cancelled'));
|
reject(new Error('Facebook login cancelled'));
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user