feat: login email/password + proxy POST /api/auth/login → SuperOAuth

- auth.routes : POST /api/auth/login proxie vers SuperOAuth, pose httpOnly cookie
- Factorisation upsertUser() partagé avec /session
- LoginPage : form email/password + séparateur + boutons OAuth provider

backend/src/routes/auth.routes.ts

@@ -10,9 +10,67 @@ const COOKIE_OPTIONS = {
   httpOnly: true,
   secure: process.env.NODE_ENV === "production",
   sameSite: "strict" as const,
-  maxAge: 15 * 60 * 1000, // 15 min — durée de vie du token SuperOAuth
+  maxAge: 15 * 60 * 1000,
 };
 
+/** Upsert user en DB depuis un profil SuperOAuth */
+async function upsertUser(oauthUser: { id: string; email: string | null; nickname: string }): Promise<void> {
+  const userRepo = AppDataSource.getRepository(User);
+  let dbUser = await userRepo.findOne({ where: { superOAuthId: oauthUser.id } });
+  if (!dbUser) {
+    dbUser = userRepo.create({ superOAuthId: oauthUser.id, email: oauthUser.email, nickname: oauthUser.nickname });
+  } else {
+    dbUser.email = oauthUser.email;
+    dbUser.nickname = oauthUser.nickname;
+  }
+  await userRepo.save(dbUser);
+}
+
+/**
+ * POST /api/auth/login
+ * Proxy email/password vers SuperOAuth → pose le cookie httpOnly.
+ */
+router.post("/login", async (req: Request, res: Response): Promise<void> => {
+  const { email, password } = req.body as { email?: string; password?: string };
+
+  if (!email || !password) {
+    res.status(400).json({ success: false, error: "MISSING_CREDENTIALS" });
+    return;
+  }
+
+  const superOAuthUrl = process.env.SUPER_OAUTH_URL;
+  if (!superOAuthUrl) {
+    res.status(500).json({ success: false, error: "INTERNAL_ERROR" });
+    return;
+  }
+
+  try {
+    const response = await fetch(`${superOAuthUrl}/api/v1/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+
+    const data = await response.json() as {
+      success: boolean;
+      data?: { user: { id: string; email: string | null; nickname: string }; tokens: { accessToken: string } };
+      message?: string;
+    };
+
+    if (!response.ok || !data.data?.tokens?.accessToken) {
+      res.status(401).json({ success: false, error: "INVALID_CREDENTIALS" });
+      return;
+    }
+
+    await upsertUser(data.data.user);
+
+    res.cookie(COOKIE_NAME, data.data.tokens.accessToken, COOKIE_OPTIONS);
+    res.json({ success: true, data: { user: data.data.user } });
+  } catch {
+    res.status(500).json({ success: false, error: "AUTH_SERVICE_UNAVAILABLE" });
+  }
+});
+
 /**
  * POST /api/auth/session
  * Reçoit le token depuis le callback SuperOAuth,
@@ -50,21 +108,7 @@ router.post("/session", async (req: Request, res: Response): Promise<void> => {
       return;
     }
 
-    // Upsert user en DB — crée si premier login, met à jour email/nickname sinon
+    await upsertUser(data.data.user as { id: string; email: string | null; nickname: string });
-    const oauthUser = data.data.user as { id: string; email: string | null; nickname: string };
-    const userRepo = AppDataSource.getRepository(User);
-    let dbUser = await userRepo.findOne({ where: { superOAuthId: oauthUser.id } });
-    if (!dbUser) {
-      dbUser = userRepo.create({
-        superOAuthId: oauthUser.id,
-        email: oauthUser.email,
-        nickname: oauthUser.nickname,
-      });
-    } else {
-      dbUser.email = oauthUser.email;
-      dbUser.nickname = oauthUser.nickname;
-    }
-    await userRepo.save(dbUser);
 
     res.cookie(COOKIE_NAME, token, COOKIE_OPTIONS);
     res.json({ success: true, data: { user: data.data.user } });

frontend/src/pages/LoginPage.tsx

@@ -1,4 +1,6 @@
-import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { apiFetch } from '../lib/api';
 
 const PROVIDERS = [
   { id: 'discord', label: 'Discord' },
@@ -8,29 +10,92 @@ const PROVIDERS = [
 ] as const;
 
 export default function LoginPage() {
+  const navigate = useNavigate();
   const base = import.meta.env.VITE_SUPEROAUTH_URL;
   const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
 
+  const [email, setEmail]       = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading]   = useState(false);
+  const [error, setError]       = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email || !password || loading) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiFetch('/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ email, password }),
+      });
+      navigate('/', { replace: true });
+    } catch {
+      setError('Email ou mot de passe incorrect.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
   return (
-    <div className="flex flex-col items-center gap-8 pt-20">
+    <div className="flex flex-col items-center gap-8 pt-16">
       <div className="flex flex-col items-center gap-2">
         <span className="font-mono text-xs font-bold tracking-widest text-od-accent">OD</span>
         <h1 className="text-xl font-semibold text-od-text">Connexion</h1>
-        <p className="text-sm text-od-muted">Choisis ton provider pour continuer</p>
       </div>
 
-      <div className="flex w-full max-w-xs flex-col gap-3">
+      <div className="w-full max-w-xs flex flex-col gap-6">
+
+        {/* Email / password */}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="Email"
+            required
+            className="rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+          />
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Mot de passe"
+            required
+            className="rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+          />
+          {error && <p className="text-xs text-od-crit">{error}</p>}
+          <button
+            type="submit"
+            disabled={loading}
+            className="rounded border border-od-accent px-4 py-2 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
+          >
+            {loading ? '…' : 'Connexion'}
+          </button>
+        </form>
+
+        {/* Séparateur */}
+        <div className="flex items-center gap-3">
+          <div className="flex-1 border-t border-od-border" />
+          <span className="font-mono text-xs text-od-muted">ou</span>
+          <div className="flex-1 border-t border-od-border" />
+        </div>
+
+        {/* OAuth providers */}
+        <div className="flex flex-col gap-2">
           {PROVIDERS.map(({ id, label }) => (
             <a
               key={id}
               href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${redirectUrl}`}
-            className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-3 text-sm text-od-text transition-colors hover:border-od-accent hover:text-od-accent"
+              className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-2.5 text-sm text-od-muted transition-colors hover:border-od-accent hover:text-od-accent"
             >
               {label}
             </a>
           ))}
         </div>
 
+      </div>
+
       <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
         ← Retour
       </Link>