canastack-admin
/
sw-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update frontend

This commit is contained in:
Your Name 2025-12-11 19:07:07 -05:00
parent ef5e361d40
commit 50c0375be4
1 changed files with 160 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
src/auth/AuthContext.jsx
View File

@ -1,212 +1,239 @@
import React, { import React, { createContext, useContext, useEffect, useRef, useState } from "react";
createContext,
useContext,
useEffect,
useState,
} from "react";
const AuthContext = createContext(null); const AuthContext = createContext(null);
/* ===== Keycloak config ===== */ // Keycloak config
const KC_BASE = "https://web.sociowire.com:8443"; const KC_BASE = "https://web.sociowire.com:8443";
const KC_REALM = "sociowire"; const KC_REALM = "sociowire";
const KC_CLIENT_ID = "sociowire-frontend"; const KC_CLIENT_ID = "sociowire-frontend";
/* ===== Storage keys ===== */
const TOKEN_KEY = "sociowire:access_token"; const TOKEN_KEY = "sociowire:access_token";
const REFRESH_KEY = "sociowire:refresh_token"; const REFRESH_KEY = "sociowire:refresh_token";
const EXPIRES_AT_KEY = "sociowire:expires_at";
const USERNAME_KEY = "sociowire:username"; const USERNAME_KEY = "sociowire:username";
export function AuthProvider({ children }) { // --- helpers ---
const [loading, setLoading] = useState(true); function decodeJwtPayload(token) {
const [authenticated, setAuthenticated] = useState(false); try {
const [username, setUsername] = useState(""); const parts = token.split(".");
const [token, setToken] = useState(null); if (parts.length < 2) return null;
const [lastError, setLastError] = useState(""); const json = atob(parts[1].replace(/-/g, "+").replace(/_/g, "/"));
return JSON.parse(json);
} catch {
return null;
}
}
/* ============================== function willExpireSoon(token, withinSeconds = 90) {
REFRESH TOKEN (helper) const p = decodeJwtPayload(token);
============================== */ if (!p || !p.exp) return true;
async function refreshWithToken(refreshToken) { const now = Math.floor(Date.now() / 1000);
return p.exp - now <= withinSeconds;
}
async function refreshWithKeycloak(refreshToken) {
const params = new URLSearchParams(); const params = new URLSearchParams();
params.set("grant_type", "refresh_token"); params.set("grant_type", "refresh_token");
params.set("client_id", KC_CLIENT_ID); params.set("client_id", KC_CLIENT_ID);
params.set("refresh_token", refreshToken); params.set("refresh_token", refreshToken);
try { const res = await fetch(`${KC_BASE}/realms/${KC_REALM}/protocol/openid-connect/token`, {
const res = await fetch(
`${KC_BASE}/realms/${KC_REALM}/protocol/openid-connect/token`,
{
method: "POST", method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" }, headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: params.toString(), body: params.toString(),
} });
);
const text = await res.text();
if (!res.ok) { if (!res.ok) {
console.error("[AUTH] refresh failed", res.status); let msg = text;
logout(); try {
return false; const j = JSON.parse(text);
msg = j.error_description || j.error || text;
} catch {}
throw new Error(`${res.status} ${msg}`);
} }
const data = await res.json(); const data = JSON.parse(text);
const accessToken = data.access_token; if (!data.access_token) throw new Error("No access_token in refresh response");
const newRefresh = data.refresh_token || refreshToken; return {
const expiresIn = Number(data.expires_in || 0); accessToken: data.access_token,
refreshToken: data.refresh_token || refreshToken, // parfois KC renvoie un nouveau refresh
if (!accessToken) { };
logout();
return false;
} }
export function AuthProvider({ children }) {
const [booting, setBooting] = useState(true); // UX: restore session
const [loading, setLoading] = useState(false); // login in progress
const [authenticated, setAuthenticated] = useState(false);
const [username, setUsername] = useState("");
const [token, setToken] = useState(null);
const [lastError, setLastError] = useState("");
const refreshRef = useRef(null);
const usernameRef = useRef("");
// persist helper
function persistAuth({ accessToken, refreshToken, user }) {
setToken(accessToken); setToken(accessToken);
setAuthenticated(true); setAuthenticated(true);
setUsername(user);
usernameRef.current = user;
try {
localStorage.setItem(TOKEN_KEY, accessToken); localStorage.setItem(TOKEN_KEY, accessToken);
localStorage.setItem(REFRESH_KEY, newRefresh); if (refreshToken) localStorage.setItem(REFRESH_KEY, refreshToken);
localStorage.setItem( localStorage.setItem(USERNAME_KEY, user);
EXPIRES_AT_KEY, } catch {}
String(Date.now() + expiresIn * 1000)
);
return true;
} catch (e) {
console.error("[AUTH] refresh error", e);
return false;
}
} }
/* ============================== function clearAuth(msg = "") {
INIT AUTH (APP LOAD) setAuthenticated(false);
============================== */ setToken(null);
useEffect(() => { setUsername("");
(async () => { usernameRef.current = "";
setLastError(msg);
try {
localStorage.removeItem(TOKEN_KEY);
localStorage.removeItem(REFRESH_KEY);
localStorage.removeItem(USERNAME_KEY);
} catch {}
}
async function trySilentRefreshIfNeeded() {
try { try {
const storedToken = localStorage.getItem(TOKEN_KEY); const storedToken = localStorage.getItem(TOKEN_KEY);
const storedRefresh = localStorage.getItem(REFRESH_KEY); const storedRefresh = localStorage.getItem(REFRESH_KEY);
const storedUser = localStorage.getItem(USERNAME_KEY) || ""; const storedUser = localStorage.getItem(USERNAME_KEY) || "";
const expiresAt = Number(localStorage.getItem(EXPIRES_AT_KEY) || "0");
const now = Date.now(); if (!storedToken || !storedRefresh) return false;
const needsRefresh = !storedToken || now > expiresAt - 60_000;
if (storedRefresh && needsRefresh) { // si token encore bon, on le charge tel quel
const ok = await refreshWithToken(storedRefresh); if (!willExpireSoon(storedToken, 30)) {
if (ok) { setToken(storedToken);
setUsername(storedUser); setUsername(storedUser);
return; usernameRef.current = storedUser;
setAuthenticated(true);
return true;
}
// sinon refresh
const { accessToken, refreshToken } = await refreshWithKeycloak(storedRefresh);
persistAuth({ accessToken, refreshToken, user: storedUser });
return true;
} catch (e) {
console.warn("[AUTH] silent refresh failed:", e);
clearAuth("Session expired. Please login again.");
return false;
} }
} }
// Boot: restore session
useEffect(() => {
(async () => {
try {
// si on a un token/refresh en storage => restore/refresh
const ok = await trySilentRefreshIfNeeded();
if (!ok) {
// fallback: si token sans refresh, on garde “loggé” mais ça expirera vite
const storedToken = localStorage.getItem(TOKEN_KEY);
const storedUser = localStorage.getItem(USERNAME_KEY) || "";
if (storedToken) { if (storedToken) {
setToken(storedToken); setToken(storedToken);
setUsername(storedUser); setUsername(storedUser);
usernameRef.current = storedUser;
setAuthenticated(true); setAuthenticated(true);
} }
} catch (e) { }
console.warn("[AUTH] init error", e);
} finally { } finally {
setLoading(false); setBooting(false);
} }
})(); })();
}, []); }, []);
/* ============================== // Auto-refresh loop (silencieux)
BACKGROUND REFRESH
============================== */
useEffect(() => { useEffect(() => {
if (!authenticated) return; if (!authenticated) return;
const t = setInterval(async () => { const interval = setInterval(async () => {
try { try {
const refresh = localStorage.getItem(REFRESH_KEY); const t = localStorage.getItem(TOKEN_KEY);
const expiresAt = Number(localStorage.getItem(EXPIRES_AT_KEY) || "0"); const rt = localStorage.getItem(REFRESH_KEY);
if (!t || !rt) return;
if (!refresh) return; if (!willExpireSoon(t, 90)) return;
if (Date.now() > expiresAt - 60_000) {
await refreshWithToken(refresh);
}
} catch {
/* ignore */
}
}, 30_000);
return () => clearInterval(t); const { accessToken, refreshToken } = await refreshWithKeycloak(rt);
const u = localStorage.getItem(USERNAME_KEY) || usernameRef.current || "";
persistAuth({ accessToken, refreshToken, user: u });
} catch (e) {
console.warn("[AUTH] auto refresh failed:", e);
clearAuth("Session expired. Please login again.");
}
}, 60_000);
return () => clearInterval(interval);
}, [authenticated]); }, [authenticated]);
/* ============================== // Login via password grant
LOGIN
============================== */
async function login(user, pass) { async function login(user, pass) {
setLastError(""); setLastError("");
const u = (user || "").trim();
if (!u || !pass) {
setLastError("Username and password required.");
return;
}
const params = new URLSearchParams(); const params = new URLSearchParams();
params.set("grant_type", "password"); params.set("grant_type", "password");
params.set("client_id", KC_CLIENT_ID); params.set("client_id", KC_CLIENT_ID);
params.set("username", user); params.set("username", u);
params.set("password", pass); params.set("password", pass);
try { try {
const res = await fetch( setLoading(true);
`${KC_BASE}/realms/${KC_REALM}/protocol/openid-connect/token`,
{ const res = await fetch(`${KC_BASE}/realms/${KC_REALM}/protocol/openid-connect/token`, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" }, headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: params.toString(), body: params.toString(),
} });
);
const text = await res.text();
if (!res.ok) { if (!res.ok) {
setLastError("Invalid credentials"); let msg = "Invalid credentials or auth error.";
try {
const j = JSON.parse(text);
msg = j.error_description || j.error || msg;
} catch {}
clearAuth(`${res.status} ${msg}`);
return; return;
} }
const data = await res.json(); const data = JSON.parse(text);
const accessToken = data.access_token; const accessToken = data.access_token;
const refreshToken = data.refresh_token; const refreshToken = data.refresh_token;
const expiresIn = Number(data.expires_in || 0);
if (!accessToken || !refreshToken) { if (!accessToken) {
setLastError("Invalid token response"); clearAuth("No access token in response.");
return; return;
} }
setToken(accessToken); persistAuth({ accessToken, refreshToken, user: u });
setAuthenticated(true);
setUsername(user);
localStorage.setItem(TOKEN_KEY, accessToken);
localStorage.setItem(REFRESH_KEY, refreshToken);
localStorage.setItem(
EXPIRES_AT_KEY,
String(Date.now() + expiresIn * 1000)
);
localStorage.setItem(USERNAME_KEY, user);
} catch (e) {
console.error("[AUTH] login error", e);
setLastError("Network error");
}
}
/* ==============================
LOGOUT
============================== */
function logout() {
setAuthenticated(false);
setToken(null);
setUsername("");
setLastError(""); setLastError("");
} catch (e) {
console.error("[AUTH] network error", e);
clearAuth("Network error during login.");
} finally {
setLoading(false);
}
}
localStorage.removeItem(TOKEN_KEY); function logout() {
localStorage.removeItem(REFRESH_KEY); clearAuth("");
localStorage.removeItem(EXPIRES_AT_KEY);
localStorage.removeItem(USERNAME_KEY);
} }
return ( return (
<AuthContext.Provider <AuthContext.Provider
value={{ value={{
booting,
loading, loading,
authenticated, authenticated,
username, username,
@ -223,6 +250,6 @@ export function AuthProvider({ children }) {
export function useAuth() { export function useAuth() {
const ctx = useContext(AuthContext); const ctx = useContext(AuthContext);
if (!ctx) throw new Error("useAuth must be used inside AuthProvider"); if (!ctx) throw new Error("useAuth must be used inside <AuthProvider>");
return ctx; return ctx;
} }