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:
46
Frontend/src/pages/AuthCallback.jsx
Normal file
46
Frontend/src/pages/AuthCallback.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
32
Frontend/src/pages/Login.jsx
Normal file
32
Frontend/src/pages/Login.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user