feat: 4 OAuth providers (Discord/GitHub/Google/Twitch) — standardized login

Frontend/src/pages/Login.jsx

@@ -4,6 +4,13 @@ import { useAuth } from "../context/AuthContext";
 import { buildAuthUrl, saveVerifier } from "../lib/oauth";
 import "../scss/pages.scss";
 
+const PROVIDERS = [
+  { id: "discord", label: "Discord", emoji: "🎮" },
+  { id: "github",  label: "GitHub",  emoji: "🐙" },
+  { id: "google",  label: "Google",  emoji: "🌐" },
+  { id: "twitch",  label: "Twitch",  emoji: "🎬" },
+];
+
 export default function Login() {
   const { user } = useAuth();
   const navigate = useNavigate();
@@ -12,7 +19,7 @@ export default function Login() {
     if (user) navigate("/", { replace: true });
   }, [user, navigate]);
 
-  const handleLogin = async (provider = "discord") => {
+  const handleLogin = async (provider) => {
     const redirectUri = `${window.location.origin}/callback`;
     const { url, verifier } = await buildAuthUrl(redirectUri, provider);
     saveVerifier(verifier);
@@ -24,9 +31,18 @@ export default function Login() {
       <div className="containererror">
         <h1>Connexion</h1>
         <p className="message">Connecte-toi pour sauvegarder ta progression.</p>
-        <button className="btn-return" onClick={() => handleLogin("discord")} type="button">
+        <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 16 }}>
-          Se connecter avec Discord
+          {PROVIDERS.map((p) => (
-        </button>
+            <button
+              key={p.id}
+              className="btn-return"
+              onClick={() => handleLogin(p.id)}
+              type="button"
+            >
+              {p.emoji} Continuer avec {p.label}
+            </button>
+          ))}
+        </div>
       </div>
     </section>
   );