Oauth front

[rom98759]

🎨 feat(auth): Refonte UI authentication + OAuth integration (Google & 42)

📋 Vue d'ensemble

Cette PR refond complètement l'interface d'authentification (login/register) avec une nouvelle identité visuelle et intègre l'authentification OAuth pour Google et 42 School.

Branche: oauth-front → main

Impacts: Frontend uniquement (nginx service)

---

✨ Changements majeurs

1. Nouvelle UI Authentication (Design "Atome")

Refonte complète de l'interface avec une identité visuelle cohérente :

• Design system complet : Composants Welcome* (WelcomeButton, WelcomeInput, WelcomeCircle, WelcomeHalo)
• Thème cyan/bleu : Gradient from-[#00ff9f] to-[#0088ff]
• Glassmorphism : Effets backdrop-blur, ombres portées cyan/bleu
• Responsive design : Adapté mobile/desktop avec breakpoints Tailwind
• Animations fluides : Transitions, fade-in, zoom-in (300-700ms)

Fichiers ajoutés :

• WelcomeButton.tsx - Bouton avec variantes (primary, secondary, alert)
• WelcomeInput.tsx - Input avec icônes & toggle password visibility
• WelcomeCircle.tsx - Conteneur circulaire glassmorphism
• WelcomeHalo.tsx - Halo lumineux avec animations hover

Fichiers supprimés :

• srcs/nginx/src/components/atoms/Halo.tsx (remplacé par WelcomeHalo)
• srcs/nginx/src/components/organisms/LoginForm.tsx (remplacé par WelcomeLoginForm)
• srcs/nginx/src/components/organisms/RegisterForm.tsx (remplacé par WelcomeRegisterForm)

---

2. OAuth Integration (Google & 42 School)

Implémentation complète du flux OAuth 2.0 conforme RFC 6749 :

Architecture

Pattern identique à LoginForm/RegisterForm :

• Logique métier extraite dans oauthActions.ts
• Composants purement UI
• Gestion d'état via OAuthCallbackState

Composants OAuth

• WelcomeOAuthButton : Bouton générique OAuth
  • WelcomeOAuthButton.tsx - Google pré-configuré
  • WelcomeOAuthButton.tsx - 42 School pré-configuré
  • Animations loading (spinner + pulse)
  • Gestion d'erreurs de configuration

Sécurité CSRF : Cross-Site Request Forgery

Protection contro les attaques CSRF via state parameter (RFC 6749 §10.12) :

Flux OAuth

1. Click bouton → buildOAuthUrl() génère URL avec state CSRF
2. Redirection provider → Google/42 auth page
3. Callback → /auth/oauth/:provider/callback
4. Validation → oauthCallbackAction() vérifie state + échange code contre JWT
5. Login → login() via AuthProvider → redirection PublicRoute

Configuration

Variables d'environnement requises :

VITE_GOOGLE_CLIENT_ID=xxx
VITE_SCHOOL42_CLIENT_ID=xxx

Fichiers ajoutés :

• oauthActions.ts - Actions OAuth (buildOAuthUrl, validateOAuthState, oauthCallbackAction)
• OAuthCallback.tsx - Page callback OAuth
• google.svg - Logo Google
• 42.svg - Logo 42 School

---

3. Validation en temps réel

Nouveau composant ValidationChecklist :

Fonctionnalités :

• Validation visuelle en temps réel (✓/✕)
• Support password & username
• Critères affichés dynamiquement
• Transitions smooth (200ms)
• Internationalisé (i18n)

---

4. Gestion d'erreurs améliorée

Transformation erreurs Zod

api-client.ts - Mapping des erreurs Zod brutes en ErrorDetail :

Affichage erreurs par champ

Les erreurs sont maintenant contextualisées sur le champ concerné :

LoginForm :

• identifier → Erreur affichée sous le champ username/email
• password → Erreur affichée sous le champ password
• Erreur générale → Bandeau rouge en bas du formulaire

RegisterForm :

• Même logique pour username, email, password
• Erreurs 409 Conflict (username/email existant) → affichées sur le champ concerné

---

6. Internationalisation (i18n)

Nouvelles clés de traduction (EN, FR, TF) :

---

🧪 Tests

Tests manuels effectués

✅ Login classique (username + password)
✅ Register classique (username, email, password)
✅ Validation temps réel (password & username)
✅ Toggle password visibility (eye icon)
✅ Gestion erreurs (champs requis, format invalide, conflict)
✅ Responsive design (mobile, tablet, desktop)
✅ OAuth Google (redirect + callback + login)
✅ OAuth 42 (redirect + callback + login)
✅ CSRF protection (state validation)
✅ Gestion erreurs OAuth (authorization_denied, missing_code, invalid_state)

À tester en intégration

• Backend OAuth callback /auth/oauth/:provider/callback
• Mapping erreurs Zod backend → frontend
• Session management après OAuth login
• Refresh token OAuth (si implémenté)

---

📸 Aperçu visuel

Screencast-from-02-25-2026-09_22_18-AM.mp4

---

📚 Références

RFCs & Standards

• OAuth 2.0 Framework (RFC 6749)
• OAuth 2.0 Security (RFC 6819) - §4.4.1.8 CSRF
• HTTP Status Codes (RFC 9110)

Documentation officielle

• Google OAuth 2.0
• 42 API OAuth
• React Router v6
• Tailwind CSS

---

🚀 Déploiement

Variables d'environnement requises

# OAuth Google
VITE_GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com

# OAuth 42 School
VITE_SCHOOL42_CLIENT_ID=xxx

[Copilot]

Pull request overview

Refactors the nginx (frontend) authentication experience by introducing a new “Welcome/Atome” UI and adding OAuth login support for Google and 42, including an OAuth callback page and new i18n keys.

Changes:

• Replaces legacy auth UI (Halo/LoginForm/RegisterForm) with new Welcome* components + realtime validation checklist.
• Adds OAuth buttons, OAuth URL/state handling, and an OAuth callback page wired into routing.
• Improves frontend error-detail mapping (Zod → ErrorDetail) and extends translations (EN/FR/TF).

Reviewed changes

Copilot reviewed 20 out of 22 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
srcs/nginx/src/pages/WelcomePage.tsx	Switches to WelcomeHalo layout for the new auth UI.
srcs/nginx/src/pages/OAuthCallback.tsx	New page to process OAuth redirect and trigger login() on success.
srcs/nginx/src/App.tsx	Adds /login, /register, and /auth/oauth/:provider/callback routes.
srcs/nginx/src/api/oauthActions.ts	Adds OAuth URL builder, CSRF state handling, and callback action.
srcs/nginx/src/api/auth-api.ts	Adds oauthCallback() client call to backend OAuth callback endpoint.
srcs/nginx/src/api/api-client.ts	Maps backend Zod-ish error payloads into ErrorDetail[].
srcs/nginx/src/components/atoms/welcome/WelcomeHalo.tsx	New halo container orchestrating login/register forms with the new design.
srcs/nginx/src/components/atoms/welcome/WelcomeCircle.tsx	New “glassmorphism” circle container for Welcome UI.
srcs/nginx/src/components/atoms/welcome/WelcomeInput.tsx	New styled input with icons, error display, and password visibility toggle.
srcs/nginx/src/components/atoms/welcome/WelcomeButton.tsx	New styled button component for Welcome UI.
srcs/nginx/src/components/atoms/welcome/WelcomeOAuthButton.tsx	New OAuth button variants for Google and 42.
srcs/nginx/src/components/atoms/welcome/ValidationChecklist.tsx	New realtime validation checklist UI for username/password rules.
srcs/nginx/src/components/organisms/welcome/WelcomeLoginForm.tsx	New login form integrating OAuth buttons + improved error mapping.
srcs/nginx/src/components/organisms/welcome/WelcomeRegisterForm.tsx	New register form integrating OAuth buttons + realtime validation.
srcs/nginx/src/components/organisms/LoginForm.tsx	Removes legacy login form.
srcs/nginx/src/components/organisms/RegisterForm.tsx	Removes legacy register form.
srcs/nginx/src/components/atoms/Halo.tsx	Removes legacy halo container.
srcs/nginx/src/assets/icons/google.svg	Adds Google icon for OAuth button.
srcs/nginx/src/assets/icons/42.svg	Adds 42 icon for OAuth button.
srcs/nginx/src/locales/en/common.json	Adds oauth + validation translation keys (EN).
srcs/nginx/src/locales/fr/common.json	Adds oauth + validation translation keys (FR).
srcs/nginx/src/locales/tf/common.json	Adds oauth + validation translation keys (TF).

[rom98759]

Tout est fix