FamilyPlanner/docs/archive/QUICK_START_OAUTH.md

🚀 Quick Start - Connexion Google Calendar

⚡ Démarrage rapide (5 minutes)

1️⃣ Ajouter votre email en utilisateur de test ⚠️ OBLIGATOIRE

Sans cette étape, vous verrez "Access blocked".

Étapes :

1. Ouvrez https://console.cloud.google.com/
2. Sélectionnez le projet familyplanner-474915
3. Menu APIs & Services → OAuth consent screen
4. Section Test users → Cliquez ADD USERS
5. Tapez : phil.heyraud@gmail.com
6. Cliquez SAVE

✅ Fait ? Passez à l'étape 2

---

2️⃣ Vérifier que le backend tourne

Le backend devrait déjà être démarré. Vérifiez dans votre terminal :

Server ready on port 5000

✅ Si vous voyez ça, passez à l'étape 3

❌ Si non, démarrez-le :

cd backend
npm run dev

---

3️⃣ Démarrer le frontend

Ouvrez un nouveau terminal :

cd frontend
npm run dev

Vous devriez voir :

Local: http://localhost:5174/

---

4️⃣ Tester la connexion Google

1. Ouvrez : http://localhost:5174
2. Allez dans Paramètres ou Profil
3. Cherchez la section "Agendas connectés"
4. Cliquez sur "Continuer avec Google"

Ce qui va se passer :

• 🌐 Redirection vers accounts.google.com
• 🔐 Page de connexion Google (si pas déjà connecté)
• ✅ Page de consentement : "Family Planner souhaite accéder à votre agenda"
• ✅ Cliquez sur "Autoriser"
• 🔄 Retour vers l'application
• 🎉 Calendrier connecté !

---

🎯 Test rapide de l'URL OAuth (optionnel)

Avant de tester via l'interface, vous pouvez tester l'URL OAuth directement :

Copiez cette URL dans votre navigateur :

https://accounts.google.com/o/oauth2/v2/auth?client_id=645971045469-1f9kliea9lqhutjeicim377fui2kdhc8.apps.googleusercontent.com&redirect_uri=http://localhost:5000/api/calendar/oauth/callback&response_type=code&scope=https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/calendar.events&state=test-123&access_type=offline&prompt=consent

Résultat attendu :

• ✅ Page de consentement Google
• ✅ Demande d'accès au calendrier

Si erreur "Access blocked" :

• ❌ Vous avez oublié d'ajouter votre email en utilisateur de test
• → Retournez à l'étape 1

---

🔍 Vérification des logs

Backend (terminal 1)

Vous devriez voir lors de la connexion :

POST /api/calendar/google/oauth/start 200
POST /api/calendar/oauth/complete 200

Frontend (DevTools - F12)

Console navigateur, vous devriez voir :

OAuth flow started
Redirecting to Google...
OAuth complete: success

---

❌ Problèmes courants

"Access blocked: This app's request is invalid"

❌ Cause : Email pas en utilisateur de test ✅ Solution : Étape 1 ci-dessus

---

"redirect_uri_mismatch"

❌ Cause : URI de redirection incorrecte ✅ Solution : Vérifiez dans Google Cloud Console → Credentials

URIs autorisées doivent être exactement :

http://localhost:5000/api/calendar/oauth/callback
http://localhost:5174/calendar/oauth/callback

---

"invalid_client"

❌ Cause : Client ID ou Secret incorrect ✅ Solution : Vérifiez backend/.env

GOOGLE_CLIENT_ID=645971045469-1f9kliea9lqhutjeicim377fui2kdhc8.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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

Puis redémarrez le backend :

# Arrêtez avec Ctrl+C
npm run dev

---

Backend ne démarre pas

❌ Erreur : Cannot find module 'calendar' ✅ Solution : Le fichier calendar.ts existe bien ici :

family-planner/backend/src/routes/calendar.ts

Si absent, dites-le moi, je le recrée.

---

📊 État actuel de l'implémentation

Fonctionnalité	Statut
URL OAuth complète	✅ Fait
Redirection vers Google	✅ Fait
Page de consentement	✅ Fait
Retour avec code d'autorisation	✅ Fait
Échange code → access token	⏳ À faire
Stockage sécurisé tokens	⏳ À faire
Récupération événements	⏳ À faire
Synchronisation calendrier	⏳ À faire

---

🎉 Vous avez testé avec succès ?

Prochaines étapes :

1. Implémenter l'échange du code OAuth → Voir OAUTH_CONFIGURATION_COMPLETE.md section 2

2. Récupérer les événements du calendrier → Voir OAUTH_CONFIGURATION_COMPLETE.md section 4

3. Sécuriser le stockage des tokens → Voir ANALYSE_CODE_CALENDAR.md section Sécurité

---

📁 Documents utiles

Fichier	Pour quoi ?
README_OAUTH_GOOGLE.md	Résumé complet de la config
OAUTH_CONFIGURATION_COMPLETE.md	Détails + prochaines étapes
OAUTH_SETUP.md	Guide configuration Google/Azure
ANALYSE_CODE_CALENDAR.md	Analyse sécurité/qualité code
QUICK_START_OAUTH.md	Ce fichier (démarrage rapide)

---

🆘 Besoin d'aide ?

Testez d'abord :

1. ✅ Backend sur http://localhost:5000
2. ✅ Frontend sur http://localhost:5174
3. ✅ URL OAuth manuellement (ci-dessus)

Si toujours bloqué :

• Regardez les logs backend (terminal 1)
• Ouvrez DevTools (F12) → Console (frontend)
• Vérifiez que votre email est bien en utilisateur de test

---

Bon courage ! 🚀