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

package/README.md

@@ -26,7 +26,7 @@ import '@shane_donnelly/dsi-internal-react-utils/style.css'
 
 ### Keycloak
 
-Wrapper de simplification pour `keycloak-js`. Gère l'authentification automatique via Identity Provider, le refresh de token, et la protection de routes/zones.
+Wrapper de simplification pour `keycloak-js`. `KeycloakProvider` singleton à la racine, `useKeycloakAuth` pour accéder à l'état d'auth et déclencher login / logout depuis n'importe quel composant.
 
 [Documentation complète du module Keycloak](docs/keycloak.md)
 
@@ -39,6 +39,7 @@ Wrapper de simplification pour `keycloak-js`. Gère l'authentification automatiq
 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(
@@ -53,10 +54,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 ```tsx
 // App.tsx
 import { Routes, Route } from 'react-router-dom';
-import { KeycloakProvider, ProtectedRoute } from '@shane_donnelly/dsi-internal-react-utils';
+import { KeycloakProvider } from '@shane_donnelly/dsi-internal-react-utils';
 import PublicPage from './pages/PublicPage';
 import Dashboard from './pages/Dashboard';
-import Profile from './pages/Profile';
 
 const keycloakConfig = {
   url: 'https://keycloak.example.com',
@@ -68,26 +68,8 @@ export default function App() {
   return (
     <KeycloakProvider config={keycloakConfig} idpHint="oidc" refreshInterval={300}>
       <Routes>
-        {/* Route publique — accessible sans authentification */}
         <Route path="/" element={<PublicPage />} />
-
-        {/* Routes protégées — redirection automatique vers l'IDP */}
-        <Route
-          path="/dashboard"
-          element={
-            <ProtectedRoute>
-              <Dashboard />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/profile"
-          element={
-            <ProtectedRoute fallback={<p>Chargement du profil...</p>}>
-              <Profile />
-            </ProtectedRoute>
-          }
-        />
+        <Route path="/dashboard" element={<Dashboard />} />
       </Routes>
     </KeycloakProvider>
   );
@@ -96,51 +78,43 @@ export default function App() {
 
 ```tsx
 // pages/Dashboard.tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
 export default function Dashboard() {
-  const { user, token, logout } = useAuth();
+  const { isAuthenticated, status, user, login, logout } = useKeycloakAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      login({ idpHint: 'oidc' });
+    }
+  }, [status, login]);
+
+  if (status === 'loading' || status === 'unauthenticated') return <p>Chargement...</p>;
+  if (status === 'error') return <p>Erreur d'authentification.</p>;
 
   return (
     <div>
       <h1>Bienvenue {user?.name}</h1>
       <p>Email : {user?.email}</p>
-      <button onClick={() => logout()}>Se déconnecter</button>
+      {/* Déconnexion avec redirection KC vers l'accueil */}
+      <button onClick={() => logout({ redirectUri: window.location.origin })}>
+        Se déconnecter
+      </button>
     </div>
   );
 }
 ```
 
-### Mode plug & play (sans Provider)
-
-Pour un usage rapide sans `KeycloakProvider`, passez `config` directement à `ProtectedRoute` :
-
-```tsx
-import { ProtectedRoute } from '@shane_donnelly/dsi-internal-react-utils';
-
-function App() {
-  return (
-    <ProtectedRoute
-      config={{
-        url: 'https://keycloak.example.com',
-        realm: 'my-realm',
-        clientId: 'my-frontend',
-      }}
-      idpHint="oidc"
-    >
-      <Dashboard />
-    </ProtectedRoute>
-  );
-}
-```
-
 ### Utiliser le token pour les appels API
 
 ```tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
 function useAuthFetch() {
-  const { token } = useAuth();
+  const { token } = useKeycloakAuth();
 
   return (url: string, options?: RequestInit) =>
     fetch(url, {
@@ -156,10 +130,10 @@ function useAuthFetch() {
 ### Accéder à l'instance keycloak-js (usage avancé)
 
 ```tsx
-import { useAuth } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth } from '@shane_donnelly/dsi-internal-react-utils';
 
 function AdvancedComponent() {
-  const { keycloak } = useAuth();
+  const { keycloak } = useKeycloakAuth();
 
   // Accès direct à l'instance keycloak-js pour des cas spécifiques
   console.log(keycloak?.tokenParsed);
@@ -171,10 +145,10 @@ function AdvancedComponent() {
 Deux fonctions sont disponibles pour manipuler l'instance Keycloak en dehors de React (intercepteurs HTTP, services, etc.) :
 
 ```tsx
-import { useAuth, logoutKeycloak, refreshTokenKeycloak } from '@shane_donnelly/dsi-internal-react-utils';
+import { useKeycloakAuth, logoutKeycloak, refreshTokenKeycloak } from '@shane_donnelly/dsi-internal-react-utils';
 
-// Récupérer l'instance keycloak via useAuth()
-const { keycloak } = useAuth();
+// Récupérer l'instance keycloak via useKeycloakAuth()
+const { keycloak } = useKeycloakAuth();
 
 // Rafraîchir le token (minValidity en secondes, défaut: 30)
 const refreshed = await refreshTokenKeycloak(keycloak!, 60);

package/dist/keycloak/core/types.d.ts

@@ -20,9 +20,25 @@ export type KeycloakAuthOptions = {
     refreshInterval?: number;
     /** Validité minimale du token en secondes avant rafraîchissement (défaut: 30) */
     minTokenValidity?: number;
-    /** Comportement en cas d'erreur d'auth: 'login' pour rediriger, 'logout' pour déconnecter, ou un handler custom */
+    /** Comportement en cas d'erreur de refresh token: 'login' pour rediriger, 'logout' pour déconnecter, ou un handler custom */
     onAuthError?: 'login' | 'logout' | ((error: unknown) => void);
 };
+/**
+ * Options pour déclencher le login Keycloak.
+ */
+export type LoginOptions = {
+    /** Identity provider hint, override le `idpHint` du `KeycloakProvider` */
+    idpHint?: string;
+    /** URI vers laquelle Keycloak redirige après le login */
+    redirectUri?: string;
+};
+/**
+ * Options pour déclencher le logout.
+ */
+export type LogoutOptions = {
+    /** URI de redirection après déconnexion (défaut: `window.location.origin`) */
+    redirectUri?: string;
+};
 /**
  * État de l'authentification.
  * - `loading` : vérification en cours
@@ -45,7 +61,7 @@ export type AuthUser = {
     [key: string]: unknown;
 };
 /**
- * Valeur du contexte d'authentification exposée par `KeycloakProvider` et `useAuth`.
+ * Valeur du contexte d'authentification exposée par `KeycloakProvider` et `useKeycloakAuth`.
  */
 export type AuthContextValue = {
     /** État actuel de l'authentification */
@@ -58,10 +74,10 @@ export type AuthContextValue = {
     isAuthenticated: boolean;
     /** Instance keycloak-js sous-jacente (pour usage avancé) */
     keycloak: Keycloak | null;
-    /** Déclencher une redirection de login. Accepte un idpHint optionnel pour override celui du Provider. */
-    login: (idpHint?: string) => Promise<void>;
-    /** Déclencher un logout. Accepte un redirectUri optionnel (défaut: origin). */
-    logout: (redirectUri?: string) => Promise<void>;
+    /** Déclencher une redirection vers le login Keycloak */
+    login: (options?: LoginOptions) => Promise<void>;
+    /** Déclencher le logout. Redirige vers `redirectUri` après déconnexion (défaut: `window.location.origin`). */
+    logout: (options?: LogoutOptions) => Promise<void>;
     /** Rafraîchir manuellement le token. Retourne true si réussi. */
     refreshToken: () => Promise<boolean>;
 };

package/dist/keycloak/index.d.ts

@@ -1,7 +1,5 @@
 export { KeycloakProvider } from './react/KeycloakProvider';
 export type { KeycloakProviderProps } from './react/KeycloakProvider';
-export { ProtectedRoute } from './react/ProtectedRoute';
-export type { ProtectedRouteProps } from './react/ProtectedRoute';
-export { useAuth } from './react/hooks/useAuth';
+export { useKeycloakAuth } from './react/hooks/useKeycloakAuth';
 export { logoutKeycloak, refreshTokenKeycloak } from './core/client';
-export type { KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, } from './core/types';
+export type { KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, LoginOptions, LogoutOptions, } from './core/types';

package/dist/keycloak/index.js

@@ -1,5 +1,4 @@
 import { logoutKeycloak as e, refreshTokenKeycloak as t } from "./core/client.js";
 import { KeycloakProvider as n } from "./react/KeycloakProvider/index.js";
-import { useAuth as r } from "./react/hooks/useAuth.js";
-import { t as i } from "../ProtectedRoute-_48urWWd.js";
-export { n as KeycloakProvider, i as ProtectedRoute, e as logoutKeycloak, t as refreshTokenKeycloak, r as useAuth };
+import { useKeycloakAuth as r } from "./react/hooks/useKeycloakAuth.js";
+export { n as KeycloakProvider, e as logoutKeycloak, t as refreshTokenKeycloak, r as useKeycloakAuth };

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

@@ -47,10 +47,13 @@ function u({ config: r, children: u, idpHint: d, refreshInterval: f = 300, minTo
 	]);
 	let E = i(async (e) => {
 		let t = x.current;
-		t && await t.login({ idpHint: e ?? d });
+		t && await t.login({
+			idpHint: e?.idpHint ?? d,
+			redirectUri: e?.redirectUri
+		});
 	}, [d]), D = i(async (e) => {
 		let t = x.current;
-		t && await t.logout({ redirectUri: e ?? window.location.origin });
+		t && await t.logout({ redirectUri: e?.redirectUri ?? window.location.origin });
 	}, []), O = {
 		status: h,
 		token: _,

package/dist/keycloak/react/hooks/{useAuth.d.ts → useKeycloakAuth.d.ts}

@@ -5,14 +5,14 @@ import { AuthContextValue } from '../../core/types';
  * Donne accès à l'état d'authentification, au token, aux infos utilisateur,
  * et aux actions (login, logout, refreshToken).
  *
- * Doit être utilisé à l'intérieur d'un `KeycloakProvider` ou d'un `ProtectedRoute` avec `config`.
+ * Doit être utilisé à l'intérieur d'un `KeycloakProvider`.
  *
  * @returns Objet d'authentification complet
  *
  * @example
  * ```tsx
  * function UserProfile() {
- *   const { user, token, isAuthenticated, logout } = useAuth();
+ *   const { user, token, isAuthenticated, logout } = useKeycloakAuth();
  *
  *   if (!isAuthenticated) return null;
  *
@@ -25,10 +25,24 @@ import { AuthContextValue } from '../../core/types';
  * }
  * ```
  *
+ * @example Déconnexion avec navigation React Router
+ * ```tsx
+ * function LogoutButton() {
+ *   const { logout } = useKeycloakAuth();
+ *   const navigate = useNavigate();
+ *
+ *   return (
+ *     <button onClick={() => logout({ onSuccess: () => navigate('/') })}>
+ *       Se déconnecter
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
  * @example Utiliser le token pour des appels API
  * ```tsx
  * function useFetchWithAuth(url: string) {
- *   const { token } = useAuth();
+ *   const { token } = useKeycloakAuth();
  *
  *   return fetch(url, {
  *     headers: { Authorization: `Bearer ${token}` },
@@ -36,4 +50,4 @@ import { AuthContextValue } from '../../core/types';
  * }
  * ```
  */
-export declare function useAuth(): AuthContextValue;
+export declare function useKeycloakAuth(): AuthContextValue;

package/dist/keycloak/react/hooks/useKeycloakAuth.js

@@ -0,0 +1,10 @@
+import { KeycloakAuthContext as e } from "../KeycloakProvider/index.js";
+import { useContext as t } from "react";
+//#region lib/keycloak/react/hooks/useKeycloakAuth.ts
+function n() {
+	let n = t(e);
+	if (!n) throw Error("[dsi-keycloak] useKeycloakAuth() must be used within a <KeycloakProvider>.");
+	return n;
+}
+//#endregion
+export { n as useKeycloakAuth };

package/dist/main.d.ts

@@ -1,2 +1,2 @@
-export { KeycloakProvider, ProtectedRoute, useAuth, logoutKeycloak, refreshTokenKeycloak, } from './keycloak';
-export type { KeycloakProviderProps, ProtectedRouteProps, KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, } from './keycloak';
+export { KeycloakProvider, useKeycloakAuth, logoutKeycloak, refreshTokenKeycloak, } from './keycloak';
+export type { KeycloakProviderProps, KeycloakConfig, KeycloakAuthOptions, AuthStatus, AuthUser, AuthContextValue, LoginOptions, LogoutOptions, } from './keycloak';

package/dist/main.js

@@ -1,6 +1,5 @@
 import { logoutKeycloak as e, refreshTokenKeycloak as t } from "./keycloak/core/client.js";
 import { KeycloakProvider as n } from "./keycloak/react/KeycloakProvider/index.js";
-import { useAuth as r } from "./keycloak/react/hooks/useAuth.js";
-import { t as i } from "./ProtectedRoute-_48urWWd.js";
+import { useKeycloakAuth as r } from "./keycloak/react/hooks/useKeycloakAuth.js";
 import "./keycloak/index.js";
-export { n as KeycloakProvider, i as ProtectedRoute, e as logoutKeycloak, t as refreshTokenKeycloak, r as useAuth };
+export { n as KeycloakProvider, e as logoutKeycloak, t as refreshTokenKeycloak, r as useKeycloakAuth };

package/package.json

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

package/dist/ProtectedRoute-_48urWWd.js

@@ -1,55 +0,0 @@
-import { KeycloakProvider as e } from "./keycloak/react/KeycloakProvider/index.js";
-import { useAuth as t } from "./keycloak/react/hooks/useAuth.js";
-import { useEffect as n, useRef as r } from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-var s = {
-	loadingContainer: "_loadingContainer_1th3z_1",
-	spinner: "_spinner_1th3z_11",
-	spin: "_spin_1th3z_11",
-	errorContainer: "_errorContainer_1th3z_26",
-	errorMessage: "_errorMessage_1th3z_36"
-};
-//#endregion
-//#region lib/keycloak/react/ProtectedRoute/index.tsx
-function c() {
-	return /* @__PURE__ */ o("div", {
-		className: s.loadingContainer,
-		children: [/* @__PURE__ */ a("div", { className: s.spinner }), /* @__PURE__ */ a("p", { children: "Authentication in progress..." })]
-	});
-}
-function l() {
-	return /* @__PURE__ */ a("div", {
-		className: s.errorContainer,
-		children: /* @__PURE__ */ a("p", {
-			className: s.errorMessage,
-			children: "Authentication error. Please try again later."
-		})
-	});
-}
-function u({ children: e, fallback: o, errorFallback: s }) {
-	let { status: u, login: d } = t(), f = r(!1);
-	return n(() => {
-		u === "unauthenticated" && !f.current && (f.current = !0, d().catch((e) => {
-			console.error("[dsi-keycloak] Login redirect failed:", e);
-		}));
-	}, [u, d]), u === "loading" || u === "unauthenticated" ? /* @__PURE__ */ a(i, { children: o ?? /* @__PURE__ */ a(c, {}) }) : u === "error" ? /* @__PURE__ */ a(i, { children: s ?? /* @__PURE__ */ a(l, {}) }) : /* @__PURE__ */ a(i, { children: e });
-}
-function d(e) {
-	return "config" in e && e.config != null;
-}
-function f(t) {
-	if (d(t)) {
-		let { config: n, idpHint: r, refreshInterval: i, minTokenValidity: o, onAuthError: s, ...c } = t;
-		return /* @__PURE__ */ a(e, {
-			config: n,
-			idpHint: r,
-			refreshInterval: i,
-			minTokenValidity: o,
-			onAuthError: s,
-			children: /* @__PURE__ */ a(u, { ...c })
-		});
-	}
-	return /* @__PURE__ */ a(u, { ...t });
-}
-//#endregion
-export { f as t };

package/dist/keycloak/react/ProtectedRoute/index.d.ts

@@ -1,69 +0,0 @@
-import { ReactNode } from 'react';
-import { KeycloakConfig, KeycloakAuthOptions } from '../../core/types';
-/**
- * Props de base du composant `ProtectedRoute`.
- */
-interface BaseProtectedRouteProps {
-    /** Contenu protégé, affiché une fois authentifié */
-    children: ReactNode;
-    /** Composant affiché pendant le chargement / la redirection (défaut: spinner) */
-    fallback?: ReactNode;
-    /** Composant affiché en cas d'erreur d'authentification (défaut: message d'erreur) */
-    errorFallback?: ReactNode;
-}
-/**
- * Props pour le mode standalone (sans `KeycloakProvider` parent).
- * Inclut la configuration Keycloak et les options d'authentification.
- */
-interface StandaloneProtectedRouteProps extends BaseProtectedRouteProps, KeycloakAuthOptions {
-    /** Configuration du serveur Keycloak */
-    config: KeycloakConfig;
-}
-/**
- * Props pour le mode contexte (à l'intérieur d'un `KeycloakProvider`).
- */
-type ContextProtectedRouteProps = BaseProtectedRouteProps;
-/**
- * Union des props acceptées par `ProtectedRoute`.
- */
-export type ProtectedRouteProps = StandaloneProtectedRouteProps | ContextProtectedRouteProps;
-/**
- * Composant de protection de route / zone authentifiée.
- *
- * Fonctionne en deux modes :
- *
- * **Mode standalone** (plug & play) : fournir `config` et les options directement.
- * Crée automatiquement un `KeycloakProvider` interne.
- *
- * **Mode contexte** : utiliser à l'intérieur d'un `KeycloakProvider` parent.
- * Ne nécessite que `children` et optionnellement `fallback` / `errorFallback`.
- *
- * Dans les deux cas, le composant :
- * - Vérifie l'état d'authentification via `check-sso`
- * - Redirige vers le login Keycloak (via l'IDP configuré) si non authentifié
- * - Affiche un fallback pendant le chargement
- * - Rend les enfants une fois authentifié
- *
- * Basé sur `keycloak-js`.
- *
- * @example Mode standalone (plug & play)
- * ```tsx
- * <ProtectedRoute
- *   config={{ url: 'https://keycloak.example.com', realm: 'my-realm', clientId: 'my-client' }}
- *   idpHint="oidc"
- * >
- *   <Dashboard />
- * </ProtectedRoute>
- * ```
- *
- * @example Mode contexte (avec KeycloakProvider parent)
- * ```tsx
- * <KeycloakProvider config={...} idpHint="oidc">
- *   <ProtectedRoute>
- *     <Dashboard />
- *   </ProtectedRoute>
- * </KeycloakProvider>
- * ```
- */
-export declare function ProtectedRoute(props: ProtectedRouteProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,2 +0,0 @@
-import { t as e } from "../../../ProtectedRoute-_48urWWd.js";
-export { e as ProtectedRoute };

package/dist/keycloak/react/hooks/useAuth.js

@@ -1,10 +0,0 @@
-import { KeycloakAuthContext as e } from "../KeycloakProvider/index.js";
-import { useContext as t } from "react";
-//#region lib/keycloak/react/hooks/useAuth.ts
-function n() {
-	let n = t(e);
-	if (!n) throw Error("[dsi-keycloak] useAuth() must be used within a <KeycloakProvider> or a <ProtectedRoute config={...}>.");
-	return n;
-}
-//#endregion
-export { n as useAuth };

package/dist/style.css

@@ -1,2 +0,0 @@
-._loadingContainer_1th3z_1{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}._spinner_1th3z_11{border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;width:40px;height:40px;animation:1s linear infinite _spin_1th3z_11}@keyframes _spin_1th3z_11{to{transform:rotate(360deg)}}._errorContainer_1th3z_26{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;display:flex}._errorMessage_1th3z_36{color:#dc2626;text-align:center;background:#fef2f2;border-radius:12px;max-width:400px;padding:1.5rem}
-/*$vite$:1*/