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 :
```bash
cd backend
npm run dev
```

---

### 3️⃣ Démarrer le frontend

Ouvrez un **nouveau terminal** :

```bash
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`

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

Puis **redémarrez le backend** :
```bash
# 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 ! 🚀**