bleh
This commit is contained in:
Your Name
parent
a6076135f2
commit
b302d4e7ab
|
|
@ -1,343 +1,244 @@
|
||||||
import React, { createContext, useContext, useEffect, useRef, useState } from "react";
|
import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { clearAuth, guessUsernameFromToken, jwtExpSeconds, loadAuth, saveAuth } from "./authStorage";
|
||||||
|
|
||||||
const AuthContext = createContext(null);
|
const AuthCtx = createContext(null);
|
||||||
const API_BASE = "/api";
|
|
||||||
|
|
||||||
const TOKEN_KEY = "sociowire:access_token";
|
function apiBase() {
|
||||||
const REFRESH_KEY = "sociowire:refresh_token";
|
// même domaine par défaut
|
||||||
const USERNAME_KEY = "sociowire:username";
|
return (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||||
|
|
||||||
function decodeJwtPayload(token) {
|
|
||||||
try {
|
|
||||||
const parts = String(token || "").split(".");
|
|
||||||
if (parts.length < 2) return null;
|
|
||||||
const json = atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"));
|
|
||||||
return JSON.parse(json);
|
|
||||||
} catch {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function willExpireSoon(token, withinSeconds = 90) {
|
async function apiFetch(path, opts = {}) {
|
||||||
const p = decodeJwtPayload(token);
|
const url = apiBase() + path;
|
||||||
if (!p || !p.exp) return true;
|
const res = await fetch(url, {
|
||||||
const now = Math.floor(Date.now() / 1000);
|
...opts,
|
||||||
return p.exp - now <= withinSeconds;
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(opts.headers || {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function apiRefresh(refreshToken) {
|
async function whoami(accessToken) {
|
||||||
const res = await fetch(`${API_BASE}/refresh`, {
|
const res = await apiFetch("/api/whoami", {
|
||||||
|
method: "GET",
|
||||||
|
headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : {},
|
||||||
|
});
|
||||||
|
const j = await res.json().catch(() => null);
|
||||||
|
return { ok: res.ok, status: res.status, json: j };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function refreshTokens(refreshToken) {
|
||||||
|
const res = await apiFetch("/api/refresh", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({ refresh_token: refreshToken }),
|
body: JSON.stringify({ refresh_token: refreshToken }),
|
||||||
});
|
});
|
||||||
|
const j = await res.json().catch(() => null);
|
||||||
const text = await res.text().catch(() => "");
|
return { ok: res.ok, status: res.status, json: j };
|
||||||
if (!res.ok) throw new Error(`${res.status} ${text}`);
|
|
||||||
|
|
||||||
const data = JSON.parse(text || "{}");
|
|
||||||
if (!data.access_token) throw new Error("No access_token in refresh response");
|
|
||||||
|
|
||||||
return {
|
|
||||||
accessToken: data.access_token,
|
|
||||||
refreshToken: data.refresh_token || refreshToken,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function apiMe(accessToken) {
|
function nowSec() {
|
||||||
const res = await fetch(`${API_BASE}/me`, {
|
return Math.floor(Date.now() / 1000);
|
||||||
method: "GET",
|
|
||||||
headers: { Authorization: `Bearer ${accessToken}` },
|
|
||||||
credentials: "include",
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
|
||||||
if (!res.ok) throw new Error(`${res.status} ${text || "me failed"}`);
|
|
||||||
|
|
||||||
const data = JSON.parse(text || "{}");
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function apiResendVerify(accessToken) {
|
|
||||||
const res = await fetch(`${API_BASE}/resend-verification`, {
|
|
||||||
method: "POST",
|
|
||||||
headers: { Authorization: `Bearer ${accessToken}` },
|
|
||||||
credentials: "include",
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
|
||||||
if (!res.ok) throw new Error(`${res.status} ${text || "resend failed"}`);
|
|
||||||
|
|
||||||
return text ? JSON.parse(text) : { ok: true };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AuthProvider({ children }) {
|
export function AuthProvider({ children }) {
|
||||||
const [booting, setBooting] = useState(true);
|
const [status, setStatus] = useState("loading"); // loading | anon | auth
|
||||||
const [loading, setLoading] = useState(false);
|
const [user, setUser] = useState(null); // { username }
|
||||||
|
const [tokens, setTokens] = useState(null); // { access_token, refresh_token, ... }
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const refreshTimer = useRef(null);
|
||||||
|
|
||||||
const [authenticated, setAuthenticated] = useState(false);
|
function setAnon(msg = "") {
|
||||||
const [username, setUsername] = useState("");
|
setStatus("anon");
|
||||||
const [token, setToken] = useState(null);
|
setUser(null);
|
||||||
|
setTokens(null);
|
||||||
const [emailVerified, setEmailVerified] = useState(true);
|
setError(msg || "");
|
||||||
const [needsEmailVerification, setNeedsEmailVerification] = useState(false);
|
clearAuth();
|
||||||
|
|
||||||
const [lastError, setLastError] = useState("");
|
|
||||||
const [lastInfo, setLastInfo] = useState("");
|
|
||||||
|
|
||||||
const usernameRef = useRef("");
|
|
||||||
|
|
||||||
function persistAuth({ accessToken, refreshToken, user }) {
|
|
||||||
setToken(accessToken);
|
|
||||||
setAuthenticated(true);
|
|
||||||
setUsername(user || "");
|
|
||||||
usernameRef.current = user || "";
|
|
||||||
|
|
||||||
try {
|
|
||||||
localStorage.setItem(TOKEN_KEY, accessToken);
|
|
||||||
if (refreshToken) localStorage.setItem(REFRESH_KEY, refreshToken);
|
|
||||||
localStorage.setItem(USERNAME_KEY, user || "");
|
|
||||||
} catch {}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function clearAuth(msg = "") {
|
function setAuthFromTokens(t, usernameGuess = "") {
|
||||||
setAuthenticated(false);
|
setTokens(t);
|
||||||
setToken(null);
|
saveAuth({ ...t, obtained_at: Date.now() });
|
||||||
setUsername("");
|
const u = usernameGuess || guessUsernameFromToken(t?.access_token) || "";
|
||||||
usernameRef.current = "";
|
setUser(u ? { username: u } : null);
|
||||||
|
setStatus("auth");
|
||||||
setEmailVerified(true);
|
setError("");
|
||||||
setNeedsEmailVerification(false);
|
|
||||||
|
|
||||||
setLastError(msg || "");
|
|
||||||
try {
|
|
||||||
localStorage.removeItem(TOKEN_KEY);
|
|
||||||
localStorage.removeItem(REFRESH_KEY);
|
|
||||||
localStorage.removeItem(USERNAME_KEY);
|
|
||||||
} catch {}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function syncWithBackend(accessToken, fallbackUser = "") {
|
async function ensureFreshSession(existing) {
|
||||||
// Confirme que le backend accepte vraiment le token
|
if (!existing?.access_token) return { ok: false, reason: "no_access_token" };
|
||||||
const me = await apiMe(accessToken);
|
|
||||||
|
|
||||||
const u =
|
const exp = jwtExpSeconds(existing.access_token);
|
||||||
me.username ||
|
const skew = 60; // seconds
|
||||||
me.preferred_username ||
|
const isExpiredOrSoon = !exp || exp <= (nowSec() + skew);
|
||||||
me.user ||
|
|
||||||
fallbackUser ||
|
|
||||||
localStorage.getItem(USERNAME_KEY) ||
|
|
||||||
"";
|
|
||||||
|
|
||||||
const verified = me.email_verified !== false; // default true si absent
|
// 1) refresh si nécessaire
|
||||||
setEmailVerified(verified);
|
if (isExpiredOrSoon) {
|
||||||
setNeedsEmailVerification(!verified);
|
if (!existing.refresh_token) return { ok: false, reason: "expired_no_refresh" };
|
||||||
|
|
||||||
setAuthenticated(true);
|
const rr = await refreshTokens(existing.refresh_token);
|
||||||
setToken(accessToken);
|
if (!rr.ok || !rr.json?.access_token) {
|
||||||
setUsername(u);
|
return { ok: false, reason: `refresh_failed_${rr.status}` };
|
||||||
usernameRef.current = u;
|
}
|
||||||
|
|
||||||
// garde username en storage pour UI
|
const merged = {
|
||||||
try { localStorage.setItem(USERNAME_KEY, u); } catch {}
|
...existing,
|
||||||
|
...rr.json,
|
||||||
|
};
|
||||||
|
|
||||||
if (!verified) {
|
// certains serveurs renvoient pas refresh_token à chaque fois
|
||||||
setLastInfo("Check your inbox and verify your email to unlock posting.");
|
if (!merged.refresh_token) merged.refresh_token = existing.refresh_token;
|
||||||
|
|
||||||
|
setAuthFromTokens(merged);
|
||||||
|
existing = merged;
|
||||||
} else {
|
} else {
|
||||||
setLastInfo("");
|
// access token encore bon
|
||||||
|
setAuthFromTokens(existing);
|
||||||
}
|
}
|
||||||
|
|
||||||
return { me, verified };
|
// 2) confirmer avec backend (whoami)
|
||||||
|
const w = await whoami(existing.access_token);
|
||||||
|
if (w.ok && w.json?.authenticated) {
|
||||||
|
const uname = w.json.username || guessUsernameFromToken(existing.access_token) || "";
|
||||||
|
setUser(uname ? { username: uname } : null);
|
||||||
|
setStatus("auth");
|
||||||
|
setError("");
|
||||||
|
return { ok: true };
|
||||||
}
|
}
|
||||||
|
|
||||||
async function bootRestore() {
|
// Si whoami fail, on considère désync (token invalide pour backend)
|
||||||
const storedToken = (() => {
|
return { ok: false, reason: `whoami_${w.status}` };
|
||||||
try { return localStorage.getItem(TOKEN_KEY); } catch { return null; }
|
}
|
||||||
})();
|
|
||||||
const storedRefresh = (() => {
|
|
||||||
try { return localStorage.getItem(REFRESH_KEY); } catch { return null; }
|
|
||||||
})();
|
|
||||||
const storedUser = (() => {
|
|
||||||
try { return localStorage.getItem(USERNAME_KEY) || ""; } catch { return ""; }
|
|
||||||
})();
|
|
||||||
|
|
||||||
if (!storedToken) return;
|
function scheduleAutoRefresh(t) {
|
||||||
|
if (refreshTimer.current) {
|
||||||
|
clearInterval(refreshTimer.current);
|
||||||
|
refreshTimer.current = null;
|
||||||
|
}
|
||||||
|
// check aux 30s, refresh quand exp < 90s
|
||||||
|
refreshTimer.current = setInterval(async () => {
|
||||||
|
const cur = loadAuth();
|
||||||
|
if (!cur?.access_token) return;
|
||||||
|
|
||||||
// 1) essaie /me direct
|
const exp = jwtExpSeconds(cur.access_token);
|
||||||
try {
|
if (!exp) return;
|
||||||
await syncWithBackend(storedToken, storedUser);
|
|
||||||
return;
|
if (exp <= nowSec() + 90) {
|
||||||
} catch (e) {
|
if (!cur.refresh_token) {
|
||||||
// 2) si /me refuse, tente refresh si possible
|
setAnon("Session expirée (pas de refresh_token).");
|
||||||
const msg = String(e?.message || "");
|
|
||||||
const is401 = msg.startsWith("401") || msg.includes(" 401 ");
|
|
||||||
if (!is401 || !storedRefresh) {
|
|
||||||
clearAuth("Session expired. Please login again.");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const rr = await refreshTokens(cur.refresh_token);
|
||||||
|
if (!rr.ok || !rr.json?.access_token) {
|
||||||
|
setAnon("Session expirée. Please login again.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const merged = { ...cur, ...rr.json };
|
||||||
|
if (!merged.refresh_token) merged.refresh_token = cur.refresh_token;
|
||||||
|
setAuthFromTokens(merged);
|
||||||
|
}
|
||||||
|
}, 30000);
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
async function restore() {
|
||||||
const { accessToken, refreshToken } = await apiRefresh(storedRefresh);
|
setStatus("loading");
|
||||||
persistAuth({ accessToken, refreshToken, user: storedUser });
|
setError("");
|
||||||
await syncWithBackend(accessToken, storedUser);
|
const saved = loadAuth();
|
||||||
} catch (e) {
|
if (!saved?.access_token) {
|
||||||
console.warn("[AUTH] restore refresh failed:", e);
|
setAnon("");
|
||||||
clearAuth("Session expired. Please login again.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
await bootRestore();
|
|
||||||
} finally {
|
|
||||||
setBooting(false);
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// Auto refresh (et resync backend)
|
|
||||||
useEffect(() => {
|
|
||||||
if (!authenticated) return;
|
|
||||||
|
|
||||||
const interval = setInterval(async () => {
|
|
||||||
try {
|
|
||||||
const t = (() => { try { return localStorage.getItem(TOKEN_KEY); } catch { return null; } })();
|
|
||||||
const rt = (() => { try { return localStorage.getItem(REFRESH_KEY); } catch { return null; } })();
|
|
||||||
if (!t || !rt) return;
|
|
||||||
|
|
||||||
if (!willExpireSoon(t, 90)) {
|
|
||||||
// même si pas proche d’expirer, on peut vérifier /me 1 fois de temps en temps
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { accessToken, refreshToken } = await apiRefresh(rt);
|
const r = await ensureFreshSession(saved);
|
||||||
const u = (() => {
|
if (!r.ok) {
|
||||||
try { return localStorage.getItem(USERNAME_KEY) || usernameRef.current || ""; } catch { return usernameRef.current || ""; }
|
setAnon("Login desynced. Please login again.");
|
||||||
})();
|
|
||||||
|
|
||||||
persistAuth({ accessToken, refreshToken, user: u });
|
|
||||||
await syncWithBackend(accessToken, u);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[AUTH] auto refresh failed:", e);
|
|
||||||
clearAuth("Session expired. Please login again.");
|
|
||||||
}
|
|
||||||
}, 60_000);
|
|
||||||
|
|
||||||
return () => clearInterval(interval);
|
|
||||||
}, [authenticated]);
|
|
||||||
|
|
||||||
async function login(user, pass) {
|
|
||||||
setLastError("");
|
|
||||||
setLastInfo("");
|
|
||||||
const u = (user || "").trim();
|
|
||||||
if (!u || !pass) {
|
|
||||||
setLastError("Username and password required.");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
scheduleAutoRefresh(saved);
|
||||||
setLoading(true);
|
}
|
||||||
|
|
||||||
const res = await fetch(`${API_BASE}/login`, {
|
async function login(username, password) {
|
||||||
|
setError("");
|
||||||
|
setStatus("loading");
|
||||||
|
|
||||||
|
const res = await apiFetch("/api/login", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
body: JSON.stringify({ username, password }),
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({ username: u, password: pass }),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const text = await res.text().catch(() => "");
|
const j = await res.json().catch(() => null);
|
||||||
if (!res.ok) {
|
if (!res.ok || !j?.access_token) {
|
||||||
// backend peut renvoyer un JSON {error:"email_not_verified"}
|
setAnon(j?.error_description || j?.error || "Login failed");
|
||||||
try {
|
return { ok: false, status: res.status, json: j };
|
||||||
const obj = JSON.parse(text || "{}");
|
|
||||||
if (res.status === 403 && obj?.error === "email_not_verified") {
|
|
||||||
setLastError("Email not verified. Check your inbox (spam) and verify, then login again.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch {}
|
|
||||||
setLastError(`${res.status} login failed`);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const data = JSON.parse(text || "{}");
|
const t = {
|
||||||
const accessToken = data.access_token;
|
...j,
|
||||||
const refreshToken = data.refresh_token;
|
obtained_at: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
if (!accessToken) {
|
setAuthFromTokens(t);
|
||||||
setLastError("No access token in response.");
|
scheduleAutoRefresh(t);
|
||||||
return;
|
|
||||||
|
// confirm whoami (si ça fail -> desync)
|
||||||
|
const w = await whoami(t.access_token);
|
||||||
|
if (!w.ok || !w.json?.authenticated) {
|
||||||
|
setAnon("Login desynced. Please login again.");
|
||||||
|
return { ok: false, status: w.status, json: w.json };
|
||||||
}
|
}
|
||||||
|
|
||||||
persistAuth({ accessToken, refreshToken, user: u });
|
const uname = w.json.username || guessUsernameFromToken(t.access_token) || "";
|
||||||
|
setUser(uname ? { username: uname } : null);
|
||||||
// IMPORTANT: resync with backend right after login
|
setStatus("auth");
|
||||||
try {
|
return { ok: true };
|
||||||
await syncWithBackend(accessToken, u);
|
|
||||||
} catch (e) {
|
|
||||||
console.warn("[AUTH] /me failed after login:", e);
|
|
||||||
clearAuth("Login desynced. Please login again.");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLastError("");
|
|
||||||
} catch (e) {
|
|
||||||
console.error("[AUTH] network error", e);
|
|
||||||
clearAuth("Network error during login.");
|
|
||||||
setLastError("Network error during login.");
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function logout() {
|
function logout() {
|
||||||
clearAuth("");
|
if (refreshTimer.current) clearInterval(refreshTimer.current);
|
||||||
|
refreshTimer.current = null;
|
||||||
|
setAnon("");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function resendVerificationEmail() {
|
useEffect(() => {
|
||||||
setLastError("");
|
restore();
|
||||||
setLastInfo("");
|
|
||||||
const t = token || (() => { try { return localStorage.getItem(TOKEN_KEY); } catch { return null; } })();
|
const onStorage = (e) => {
|
||||||
if (!t) {
|
if (e.key === "sociowire:auth") restore();
|
||||||
setLastError("Not logged in.");
|
};
|
||||||
return;
|
window.addEventListener("storage", onStorage);
|
||||||
}
|
return () => window.removeEventListener("storage", onStorage);
|
||||||
try {
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
await apiResendVerify(t);
|
}, []);
|
||||||
setLastInfo("Verification email sent. Check inbox/spam.");
|
|
||||||
} catch (e) {
|
useEffect(() => {
|
||||||
console.error(e);
|
if (status === "auth" && tokens?.access_token) {
|
||||||
setLastError("Could not resend verification email.");
|
scheduleAutoRefresh(tokens);
|
||||||
}
|
}
|
||||||
}
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [status]);
|
||||||
|
|
||||||
|
const value = useMemo(() => {
|
||||||
|
return {
|
||||||
|
status,
|
||||||
|
user,
|
||||||
|
tokens,
|
||||||
|
error,
|
||||||
|
|
||||||
|
isAuthed: status === "auth",
|
||||||
|
accessToken: tokens?.access_token || "",
|
||||||
|
|
||||||
return (
|
|
||||||
<AuthContext.Provider
|
|
||||||
value={{
|
|
||||||
booting,
|
|
||||||
loading,
|
|
||||||
authenticated,
|
|
||||||
username,
|
|
||||||
token,
|
|
||||||
emailVerified,
|
|
||||||
needsEmailVerification,
|
|
||||||
login,
|
login,
|
||||||
logout,
|
logout,
|
||||||
resendVerificationEmail,
|
restore,
|
||||||
lastError,
|
setError,
|
||||||
lastInfo,
|
};
|
||||||
}}
|
}, [status, user, tokens, error]);
|
||||||
>
|
|
||||||
{children}
|
return <AuthCtx.Provider value={value}>{children}</AuthCtx.Provider>;
|
||||||
</AuthContext.Provider>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function useAuth() {
|
export function useAuth() {
|
||||||
const ctx = useContext(AuthContext);
|
return useContext(AuthCtx);
|
||||||
if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
|
|
||||||
return ctx;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,343 @@
|
||||||
|
import React, { createContext, useContext, useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
const AuthContext = createContext(null);
|
||||||
|
const API_BASE = "/api";
|
||||||
|
|
||||||
|
const TOKEN_KEY = "sociowire:access_token";
|
||||||
|
const REFRESH_KEY = "sociowire:refresh_token";
|
||||||
|
const USERNAME_KEY = "sociowire:username";
|
||||||
|
|
||||||
|
function decodeJwtPayload(token) {
|
||||||
|
try {
|
||||||
|
const parts = String(token || "").split(".");
|
||||||
|
if (parts.length < 2) return null;
|
||||||
|
const json = atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"));
|
||||||
|
return JSON.parse(json);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function willExpireSoon(token, withinSeconds = 90) {
|
||||||
|
const p = decodeJwtPayload(token);
|
||||||
|
if (!p || !p.exp) return true;
|
||||||
|
const now = Math.floor(Date.now() / 1000);
|
||||||
|
return p.exp - now <= withinSeconds;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function apiRefresh(refreshToken) {
|
||||||
|
const res = await fetch(`${API_BASE}/refresh`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify({ refresh_token: refreshToken }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text().catch(() => "");
|
||||||
|
if (!res.ok) throw new Error(`${res.status} ${text}`);
|
||||||
|
|
||||||
|
const data = JSON.parse(text || "{}");
|
||||||
|
if (!data.access_token) throw new Error("No access_token in refresh response");
|
||||||
|
|
||||||
|
return {
|
||||||
|
accessToken: data.access_token,
|
||||||
|
refreshToken: data.refresh_token || refreshToken,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async function apiMe(accessToken) {
|
||||||
|
const res = await fetch(`${API_BASE}/me`, {
|
||||||
|
method: "GET",
|
||||||
|
headers: { Authorization: `Bearer ${accessToken}` },
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text().catch(() => "");
|
||||||
|
if (!res.ok) throw new Error(`${res.status} ${text || "me failed"}`);
|
||||||
|
|
||||||
|
const data = JSON.parse(text || "{}");
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function apiResendVerify(accessToken) {
|
||||||
|
const res = await fetch(`${API_BASE}/resend-verification`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { Authorization: `Bearer ${accessToken}` },
|
||||||
|
credentials: "include",
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text().catch(() => "");
|
||||||
|
if (!res.ok) throw new Error(`${res.status} ${text || "resend failed"}`);
|
||||||
|
|
||||||
|
return text ? JSON.parse(text) : { ok: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AuthProvider({ children }) {
|
||||||
|
const [booting, setBooting] = useState(true);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
|
const [authenticated, setAuthenticated] = useState(false);
|
||||||
|
const [username, setUsername] = useState("");
|
||||||
|
const [token, setToken] = useState(null);
|
||||||
|
|
||||||
|
const [emailVerified, setEmailVerified] = useState(true);
|
||||||
|
const [needsEmailVerification, setNeedsEmailVerification] = useState(false);
|
||||||
|
|
||||||
|
const [lastError, setLastError] = useState("");
|
||||||
|
const [lastInfo, setLastInfo] = useState("");
|
||||||
|
|
||||||
|
const usernameRef = useRef("");
|
||||||
|
|
||||||
|
function persistAuth({ accessToken, refreshToken, user }) {
|
||||||
|
setToken(accessToken);
|
||||||
|
setAuthenticated(true);
|
||||||
|
setUsername(user || "");
|
||||||
|
usernameRef.current = user || "";
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem(TOKEN_KEY, accessToken);
|
||||||
|
if (refreshToken) localStorage.setItem(REFRESH_KEY, refreshToken);
|
||||||
|
localStorage.setItem(USERNAME_KEY, user || "");
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAuth(msg = "") {
|
||||||
|
setAuthenticated(false);
|
||||||
|
setToken(null);
|
||||||
|
setUsername("");
|
||||||
|
usernameRef.current = "";
|
||||||
|
|
||||||
|
setEmailVerified(true);
|
||||||
|
setNeedsEmailVerification(false);
|
||||||
|
|
||||||
|
setLastError(msg || "");
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(TOKEN_KEY);
|
||||||
|
localStorage.removeItem(REFRESH_KEY);
|
||||||
|
localStorage.removeItem(USERNAME_KEY);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function syncWithBackend(accessToken, fallbackUser = "") {
|
||||||
|
// Confirme que le backend accepte vraiment le token
|
||||||
|
const me = await apiMe(accessToken);
|
||||||
|
|
||||||
|
const u =
|
||||||
|
me.username ||
|
||||||
|
me.preferred_username ||
|
||||||
|
me.user ||
|
||||||
|
fallbackUser ||
|
||||||
|
localStorage.getItem(USERNAME_KEY) ||
|
||||||
|
"";
|
||||||
|
|
||||||
|
const verified = me.email_verified !== false; // default true si absent
|
||||||
|
setEmailVerified(verified);
|
||||||
|
setNeedsEmailVerification(!verified);
|
||||||
|
|
||||||
|
setAuthenticated(true);
|
||||||
|
setToken(accessToken);
|
||||||
|
setUsername(u);
|
||||||
|
usernameRef.current = u;
|
||||||
|
|
||||||
|
// garde username en storage pour UI
|
||||||
|
try { localStorage.setItem(USERNAME_KEY, u); } catch {}
|
||||||
|
|
||||||
|
if (!verified) {
|
||||||
|
setLastInfo("Check your inbox and verify your email to unlock posting.");
|
||||||
|
} else {
|
||||||
|
setLastInfo("");
|
||||||
|
}
|
||||||
|
|
||||||
|
return { me, verified };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function bootRestore() {
|
||||||
|
const storedToken = (() => {
|
||||||
|
try { return localStorage.getItem(TOKEN_KEY); } catch { return null; }
|
||||||
|
})();
|
||||||
|
const storedRefresh = (() => {
|
||||||
|
try { return localStorage.getItem(REFRESH_KEY); } catch { return null; }
|
||||||
|
})();
|
||||||
|
const storedUser = (() => {
|
||||||
|
try { return localStorage.getItem(USERNAME_KEY) || ""; } catch { return ""; }
|
||||||
|
})();
|
||||||
|
|
||||||
|
if (!storedToken) return;
|
||||||
|
|
||||||
|
// 1) essaie /me direct
|
||||||
|
try {
|
||||||
|
await syncWithBackend(storedToken, storedUser);
|
||||||
|
return;
|
||||||
|
} catch (e) {
|
||||||
|
// 2) si /me refuse, tente refresh si possible
|
||||||
|
const msg = String(e?.message || "");
|
||||||
|
const is401 = msg.startsWith("401") || msg.includes(" 401 ");
|
||||||
|
if (!is401 || !storedRefresh) {
|
||||||
|
clearAuth("Session expired. Please login again.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { accessToken, refreshToken } = await apiRefresh(storedRefresh);
|
||||||
|
persistAuth({ accessToken, refreshToken, user: storedUser });
|
||||||
|
await syncWithBackend(accessToken, storedUser);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("[AUTH] restore refresh failed:", e);
|
||||||
|
clearAuth("Session expired. Please login again.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
await bootRestore();
|
||||||
|
} finally {
|
||||||
|
setBooting(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Auto refresh (et resync backend)
|
||||||
|
useEffect(() => {
|
||||||
|
if (!authenticated) return;
|
||||||
|
|
||||||
|
const interval = setInterval(async () => {
|
||||||
|
try {
|
||||||
|
const t = (() => { try { return localStorage.getItem(TOKEN_KEY); } catch { return null; } })();
|
||||||
|
const rt = (() => { try { return localStorage.getItem(REFRESH_KEY); } catch { return null; } })();
|
||||||
|
if (!t || !rt) return;
|
||||||
|
|
||||||
|
if (!willExpireSoon(t, 90)) {
|
||||||
|
// même si pas proche d’expirer, on peut vérifier /me 1 fois de temps en temps
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { accessToken, refreshToken } = await apiRefresh(rt);
|
||||||
|
const u = (() => {
|
||||||
|
try { return localStorage.getItem(USERNAME_KEY) || usernameRef.current || ""; } catch { return usernameRef.current || ""; }
|
||||||
|
})();
|
||||||
|
|
||||||
|
persistAuth({ accessToken, refreshToken, user: u });
|
||||||
|
await syncWithBackend(accessToken, u);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("[AUTH] auto refresh failed:", e);
|
||||||
|
clearAuth("Session expired. Please login again.");
|
||||||
|
}
|
||||||
|
}, 60_000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [authenticated]);
|
||||||
|
|
||||||
|
async function login(user, pass) {
|
||||||
|
setLastError("");
|
||||||
|
setLastInfo("");
|
||||||
|
const u = (user || "").trim();
|
||||||
|
if (!u || !pass) {
|
||||||
|
setLastError("Username and password required.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const res = await fetch(`${API_BASE}/login`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
credentials: "include",
|
||||||
|
body: JSON.stringify({ username: u, password: pass }),
|
||||||
|
});
|
||||||
|
|
||||||
|
const text = await res.text().catch(() => "");
|
||||||
|
if (!res.ok) {
|
||||||
|
// backend peut renvoyer un JSON {error:"email_not_verified"}
|
||||||
|
try {
|
||||||
|
const obj = JSON.parse(text || "{}");
|
||||||
|
if (res.status === 403 && obj?.error === "email_not_verified") {
|
||||||
|
setLastError("Email not verified. Check your inbox (spam) and verify, then login again.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
setLastError(`${res.status} login failed`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = JSON.parse(text || "{}");
|
||||||
|
const accessToken = data.access_token;
|
||||||
|
const refreshToken = data.refresh_token;
|
||||||
|
|
||||||
|
if (!accessToken) {
|
||||||
|
setLastError("No access token in response.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
persistAuth({ accessToken, refreshToken, user: u });
|
||||||
|
|
||||||
|
// IMPORTANT: resync with backend right after login
|
||||||
|
try {
|
||||||
|
await syncWithBackend(accessToken, u);
|
||||||
|
} catch (e) {
|
||||||
|
console.warn("[AUTH] /me failed after login:", e);
|
||||||
|
clearAuth("Login desynced. Please login again.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLastError("");
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[AUTH] network error", e);
|
||||||
|
clearAuth("Network error during login.");
|
||||||
|
setLastError("Network error during login.");
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
clearAuth("");
|
||||||
|
}
|
||||||
|
|
||||||
|
async function resendVerificationEmail() {
|
||||||
|
setLastError("");
|
||||||
|
setLastInfo("");
|
||||||
|
const t = token || (() => { try { return localStorage.getItem(TOKEN_KEY); } catch { return null; } })();
|
||||||
|
if (!t) {
|
||||||
|
setLastError("Not logged in.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await apiResendVerify(t);
|
||||||
|
setLastInfo("Verification email sent. Check inbox/spam.");
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
setLastError("Could not resend verification email.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider
|
||||||
|
value={{
|
||||||
|
booting,
|
||||||
|
loading,
|
||||||
|
authenticated,
|
||||||
|
username,
|
||||||
|
token,
|
||||||
|
emailVerified,
|
||||||
|
needsEmailVerification,
|
||||||
|
login,
|
||||||
|
logout,
|
||||||
|
resendVerificationEmail,
|
||||||
|
lastError,
|
||||||
|
lastInfo,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const ctx = useContext(AuthContext);
|
||||||
|
if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
|
||||||
|
return ctx;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
const KEY = "sociowire:auth";
|
||||||
|
|
||||||
|
export function loadAuth() {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(KEY);
|
||||||
|
if (!raw) return null;
|
||||||
|
const v = JSON.parse(raw);
|
||||||
|
if (!v || typeof v !== "object") return null;
|
||||||
|
return v;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function saveAuth(v) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(KEY, JSON.stringify(v || {}));
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function clearAuth() {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(KEY);
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function decodeJwtPayload(token) {
|
||||||
|
try {
|
||||||
|
if (!token || typeof token !== "string") return null;
|
||||||
|
const parts = token.split(".");
|
||||||
|
if (parts.length < 2) return null;
|
||||||
|
const b64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
|
||||||
|
const pad = b64.length % 4 ? "=".repeat(4 - (b64.length % 4)) : "";
|
||||||
|
const json = atob(b64 + pad);
|
||||||
|
return JSON.parse(json);
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function jwtExpSeconds(token) {
|
||||||
|
const p = decodeJwtPayload(token);
|
||||||
|
if (!p || !p.exp) return 0;
|
||||||
|
const exp = Number(p.exp);
|
||||||
|
return Number.isFinite(exp) ? exp : 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function guessUsernameFromToken(token) {
|
||||||
|
const p = decodeJwtPayload(token);
|
||||||
|
if (!p) return "";
|
||||||
|
return (
|
||||||
|
(typeof p.preferred_username === "string" && p.preferred_username) ||
|
||||||
|
(typeof p.email === "string" && p.email) ||
|
||||||
|
(typeof p.sub === "string" && p.sub) ||
|
||||||
|
""
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue