@shane_donnelly/dsi-internal-react-utils 0.1.4 → 0.2.0

package/README.md

@@ -32,31 +32,15 @@ Wrapper de simplification pour `keycloak-js`. `KeycloakProvider` singleton à la
 
 ---
 
-## Exemple complet avec React Router
+## Exemple complet avec React Router v7 (framework mode)
 
-```tsx
-// main.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import '@shane_donnelly/dsi-internal-react-utils/style.css';
-import App from './App';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </React.StrictMode>,
-);
-```
+React Router v7 framework mode utilise `app/root.tsx` comme layout racine — c'est là que le `KeycloakProvider` doit être placé.
 
 ```tsx
-// App.tsx
-import { Routes, Route } from 'react-router-dom';
+// app/root.tsx
+import { Outlet } from 'react-router';
 import { KeycloakProvider } from '@shane_donnelly/dsi-internal-react-utils';
-import PublicPage from './pages/PublicPage';
-import Dashboard from './pages/Dashboard';
+import '@shane_donnelly/dsi-internal-react-utils/style.css';
 
 const keycloakConfig = {
   url: 'https://keycloak.example.com',
@@ -64,27 +48,22 @@ const keycloakConfig = {
   clientId: 'my-frontend',
 };
 
-export default function App() {
+export default function Root() {
   return (
     <KeycloakProvider config={keycloakConfig} idpHint="oidc" refreshInterval={300}>
-      <Routes>
-        <Route path="/" element={<PublicPage />} />
-        <Route path="/dashboard" element={<Dashboard />} />
-      </Routes>
+      <Outlet />
     </KeycloakProvider>
   );
 }
 ```
 
 ```tsx
-// pages/Dashboard.tsx
+// app/routes/profile.tsx
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
-export default function Dashboard() {
-  const { isAuthenticated, status, user, login, logout } = useKeycloakAuth();
-  const navigate = useNavigate();
+export default function Profile() {
+  const { status, user, login, logout } = useKeycloakAuth();
 
   useEffect(() => {
     if (status === 'unauthenticated') {
@@ -99,7 +78,6 @@ export default function Dashboard() {
     <div>
       <h1>Bienvenue {user?.name}</h1>
       <p>Email : {user?.email}</p>
-      {/* Déconnexion avec redirection KC vers l'accueil */}
       <button onClick={() => logout({ redirectUri: window.location.origin })}>
         Se déconnecter
       </button>

package/dist/keycloak/react/KeycloakProvider/index.js

@@ -4,68 +4,70 @@ import { jsx as c } from "react/jsx-runtime";
 //#region lib/keycloak/react/KeycloakProvider/index.tsx
 var l = r(null);
 function u({ config: r, children: u, idpHint: d, refreshInterval: f = 300, minTokenValidity: p = 30, onAuthError: m }) {
-	let [h, g] = s("loading"), [_, v] = s(null), [y, b] = s(null), x = o(null), S = o(!1), C = i((e) => {
+	let [h, g] = s("loading"), [_, v] = s(null), [y, b] = s(null), x = o(null), S = o(!1), C = o(d), w = i((e) => {
 		e.authenticated && e.token ? (v(e.token), b(n(e)), g("authenticated")) : (v(null), b(null), g("unauthenticated"));
-	}, []), w = i(async (e) => {
-		m === "login" ? await x.current?.login({ idpHint: d }) : m === "logout" ? await x.current?.logout({ redirectUri: window.location.origin }) : typeof m == "function" && m(e);
-	}, [m, d]), T = i(async () => {
+	}, []), T = i(async (e) => {
+		m === "logout" ? await x.current?.logout({ redirectUri: window.location.origin }) : typeof m == "function" ? m(e) : await x.current?.login({ idpHint: C.current });
+	}, [m, d]), E = i(async () => {
 		let e = x.current;
 		if (!e) return !1;
 		try {
-			return await e.updateToken(p) && C(e), !0;
+			return await e.updateToken(p) && w(e), !0;
 		} catch (e) {
-			return console.warn("[dsi-keycloak] Token refresh failed:", e), await w(e), !1;
+			return console.warn("[dsi-keycloak] Token refresh failed:", e), await T(e), !1;
 		}
 	}, [
 		p,
-		C,
-		w
+		w,
+		T
 	]);
 	a(() => {
 		if (S.current) return;
 		S.current = !0;
 		let n = e(r);
 		x.current = n, t(n).then((e) => {
-			C(n), e || g("unauthenticated");
+			w(n), e || g("unauthenticated");
 		}).catch((e) => {
 			console.error("[dsi-keycloak] Init error:", e), g("error");
 		});
 	}, []), a(() => {
 		if (h !== "authenticated") return;
 		let e = window.setInterval(() => {
-			T();
+			E();
 		}, f * 1e3), t = () => {
-			document.visibilityState === "visible" && T();
-		};
-		return document.addEventListener("visibilitychange", t), () => {
-			clearInterval(e), document.removeEventListener("visibilitychange", t);
+			document.visibilityState === "visible" && E();
+		}, n = () => E(), r = () => E();
+		return document.addEventListener("visibilitychange", t), window.addEventListener("focus", n), window.addEventListener("online", r), () => {
+			clearInterval(e), document.removeEventListener("visibilitychange", t), window.removeEventListener("focus", n), window.removeEventListener("online", r);
 		};
 	}, [
 		h,
 		f,
-		T
+		E
 	]);
-	let E = i(async (e) => {
+	let D = i(async (e) => {
 		let t = x.current;
-		t && await t.login({
-			idpHint: e?.idpHint ?? d,
+		if (!t) return;
+		let n = e?.idpHint ?? d;
+		C.current = n, await t.login({
+			idpHint: n,
 			redirectUri: e?.redirectUri
 		});
-	}, [d]), D = i(async (e) => {
+	}, [d]), O = i(async (e) => {
 		let t = x.current;
 		t && await t.logout({ redirectUri: e?.redirectUri ?? window.location.origin });
-	}, []), O = {
+	}, []), k = {
 		status: h,
 		token: _,
 		user: y,
 		isAuthenticated: h === "authenticated",
 		keycloak: x.current,
-		login: E,
-		logout: D,
-		refreshToken: T
+		login: D,
+		logout: O,
+		refreshToken: E
 	};
 	return /* @__PURE__ */ c(l.Provider, {
-		value: O,
+		value: k,
 		children: u
 	});
 }

package/dist/keycloak/react/hooks/useKeycloakAuth.d.ts

@@ -25,14 +25,13 @@ import { AuthContextValue } from '../../core/types';
  * }
  * ```
  *
- * @example Déconnexion avec navigation React Router
+ * @example Déconnexion
  * ```tsx
  * function LogoutButton() {
  *   const { logout } = useKeycloakAuth();
- *   const navigate = useNavigate();
  *
  *   return (
- *     <button onClick={() => logout({ onSuccess: () => navigate('/') })}>
+ *     <button onClick={() => logout()}>
  *       Se déconnecter
  *     </button>
  *   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shane_donnelly/dsi-internal-react-utils",
   "private": false,
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",