feat(sprint1-step4): SuperOAuth login frontend

- AuthContext : fix exports, x-auth-token header, loginWithOAuth(), suppression axios/jwt-decode
- Login.jsx : redirect SuperOAuth Discord avec tenantId=clickerz
- AuthCallback.jsx : extraction token query param, flow OAuth complet
- .env.sample : ajout VITE_SUPEROAUTH_URL
- Mode invité préservé (pas de route guard)
This commit is contained in:
2026-03-20 13:40:33 +01:00
parent a52746ed0c
commit d215e9a33e
4 changed files with 127 additions and 25 deletions

View File

@@ -0,0 +1,46 @@
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams, Link } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import "../scss/pages.scss";
export default function AuthCallback() {
const [searchParams] = useSearchParams();
const { loginWithOAuth } = useAuth();
const navigate = useNavigate();
const [error, setError] = useState(null);
useEffect(() => {
const token = searchParams.get("token");
if (!token) {
setError("Token manquant dans l'URL.");
return;
}
loginWithOAuth(token)
.then(() => navigate("/", { replace: true }))
.catch((err) => setError(err.message || "Erreur de connexion."));
}, []);
if (error) {
return (
<section>
<div className="containererror">
<h1>Erreur de connexion</h1>
<p className="message">{error}</p>
<Link className="btn-return" to="/login">
Retour au login
</Link>
</div>
</section>
);
}
return (
<section>
<div className="containererror">
<p className="message">Connexion en cours...</p>
</div>
</section>
);
}

View File

@@ -0,0 +1,32 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../context/AuthContext";
import "../scss/pages.scss";
const SUPEROAUTH_URL = import.meta.env.VITE_SUPEROAUTH_URL;
export default function Login() {
const { user } = useAuth();
const navigate = useNavigate();
useEffect(() => {
if (user) navigate("/", { replace: true });
}, [user, navigate]);
const handleLogin = () => {
const callbackUrl = `${window.location.origin}/callback`;
window.location.href = `${SUPEROAUTH_URL}/api/v1/oauth/discord?redirectUrl=${encodeURIComponent(callbackUrl)}&tenantId=clickerz`;
};
return (
<section>
<div className="containererror">
<h1>Connexion</h1>
<p className="message">Connecte-toi pour sauvegarder ta progression.</p>
<button className="btn-return" onClick={handleLogin} type="button">
Se connecter avec SuperOAuth
</button>
</div>
</section>
);
}