@chemmangat/msal-next 5.3.3 → 5.3.4

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file.
 
+## [5.3.4] - 2026-05-06
+
+### 🐛 Bug Fix
+
+#### `useTokenRefresh` — `expiresIn` and `isExpiringSoon` are now reactive
+
+`expiresIn` and `isExpiringSoon` were previously derived from `useRef` values, which never trigger a re-render. Any component calling `useTokenRefresh()` to display a session-expiry warning would always see the initial `null` / `false` values and never update.
+
+Both values are now backed by `useState`, so components re-render correctly when the token expiry changes.
+
+```tsx
+// This now works as expected — the warning will actually appear
+const { isExpiringSoon, expiresIn } = useTokenRefresh({ refreshBeforeExpiry: 300 });
+
+if (isExpiringSoon) {
+  return <div>⚠️ Your session expires in {Math.round(expiresIn!)} seconds</div>;
+}
+```
+
+`lastRefresh` is also now a state value, so it updates in the UI after each refresh.
+
+---
+
 ## [5.3.0] - 2026-04-07
 
 ### 🐛 Bug Fixes

package/dist/index.js

@@ -857,6 +857,8 @@ function useTokenRefresh(options = {}) {
   const intervalRef = (0, import_react2.useRef)(null);
   const lastRefreshRef = (0, import_react2.useRef)(null);
   const expiresInRef = (0, import_react2.useRef)(null);
+  const [expiresIn, setExpiresIn] = (0, import_react2.useState)(null);
+  const [lastRefresh, setLastRefresh] = (0, import_react2.useState)(null);
   const refresh = (0, import_react2.useCallback)(async () => {
     if (!isAuthenticated || !account) {
       return;
@@ -868,9 +870,11 @@ function useTokenRefresh(options = {}) {
         forceRefresh: false
       });
       lastRefreshRef.current = /* @__PURE__ */ new Date();
-      const expiresIn = response.expiresOn ? Math.max(0, response.expiresOn.getTime() / 1e3 - Date.now() / 1e3) : 3600;
-      expiresInRef.current = expiresIn;
-      onRefresh?.(expiresIn);
+      const newExpiresIn = response.expiresOn ? Math.max(0, response.expiresOn.getTime() / 1e3 - Date.now() / 1e3) : 3600;
+      expiresInRef.current = newExpiresIn;
+      setExpiresIn(newExpiresIn);
+      setLastRefresh(lastRefreshRef.current);
+      onRefresh?.(newExpiresIn);
     } catch (error) {
       console.error("[TokenRefresh] Failed to refresh token:", error);
       onError?.(error);
@@ -888,6 +892,7 @@ function useTokenRefresh(options = {}) {
       const timeSinceRefresh = lastRefreshRef.current ? (Date.now() - lastRefreshRef.current.getTime()) / 1e3 : 0;
       const remainingTime = expiresInRef.current - timeSinceRefresh;
       expiresInRef.current = Math.max(0, remainingTime);
+      setExpiresIn(expiresInRef.current);
       if (remainingTime <= refreshBeforeExpiry && remainingTime > 0) {
         refresh();
       }
@@ -898,12 +903,12 @@ function useTokenRefresh(options = {}) {
       }
     };
   }, [enabled, isAuthenticated, refreshBeforeExpiry, refresh]);
-  const isExpiringSoon = expiresInRef.current !== null && expiresInRef.current <= refreshBeforeExpiry;
+  const isExpiringSoon = expiresIn !== null && expiresIn <= refreshBeforeExpiry;
   return {
-    expiresIn: expiresInRef.current,
+    expiresIn,
     isExpiringSoon,
     refresh,
-    lastRefresh: lastRefreshRef.current
+    lastRefresh
   };
 }
 

package/dist/index.mjs

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/components/MsalAuthProvider.tsx
 import { MsalProvider } from "@azure/msal-react";
 import { PublicClientApplication, EventType } from "@azure/msal-browser";
-import { useEffect as useEffect2, useState, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useState as useState2, useRef as useRef2 } from "react";
 
 // src/utils/createMsalConfig.ts
 import { LogLevel } from "@azure/msal-browser";
@@ -613,7 +613,7 @@ Note: Environment variables starting with NEXT_PUBLIC_ are exposed to the browse
 }
 
 // src/hooks/useTokenRefresh.ts
-import { useEffect, useRef, useCallback as useCallback2 } from "react";
+import { useEffect, useRef, useCallback as useCallback2, useState } from "react";
 import { useMsal as useMsal2 } from "@azure/msal-react";
 
 // src/hooks/useMsalAuth.ts
@@ -798,6 +798,8 @@ function useTokenRefresh(options = {}) {
   const intervalRef = useRef(null);
   const lastRefreshRef = useRef(null);
   const expiresInRef = useRef(null);
+  const [expiresIn, setExpiresIn] = useState(null);
+  const [lastRefresh, setLastRefresh] = useState(null);
   const refresh = useCallback2(async () => {
     if (!isAuthenticated || !account) {
       return;
@@ -809,9 +811,11 @@ function useTokenRefresh(options = {}) {
         forceRefresh: false
       });
       lastRefreshRef.current = /* @__PURE__ */ new Date();
-      const expiresIn = response.expiresOn ? Math.max(0, response.expiresOn.getTime() / 1e3 - Date.now() / 1e3) : 3600;
-      expiresInRef.current = expiresIn;
-      onRefresh?.(expiresIn);
+      const newExpiresIn = response.expiresOn ? Math.max(0, response.expiresOn.getTime() / 1e3 - Date.now() / 1e3) : 3600;
+      expiresInRef.current = newExpiresIn;
+      setExpiresIn(newExpiresIn);
+      setLastRefresh(lastRefreshRef.current);
+      onRefresh?.(newExpiresIn);
     } catch (error) {
       console.error("[TokenRefresh] Failed to refresh token:", error);
       onError?.(error);
@@ -829,6 +833,7 @@ function useTokenRefresh(options = {}) {
       const timeSinceRefresh = lastRefreshRef.current ? (Date.now() - lastRefreshRef.current.getTime()) / 1e3 : 0;
       const remainingTime = expiresInRef.current - timeSinceRefresh;
       expiresInRef.current = Math.max(0, remainingTime);
+      setExpiresIn(expiresInRef.current);
       if (remainingTime <= refreshBeforeExpiry && remainingTime > 0) {
         refresh();
       }
@@ -839,12 +844,12 @@ function useTokenRefresh(options = {}) {
       }
     };
   }, [enabled, isAuthenticated, refreshBeforeExpiry, refresh]);
-  const isExpiringSoon = expiresInRef.current !== null && expiresInRef.current <= refreshBeforeExpiry;
+  const isExpiringSoon = expiresIn !== null && expiresIn <= refreshBeforeExpiry;
   return {
-    expiresIn: expiresInRef.current,
+    expiresIn,
     isExpiringSoon,
     refresh,
-    lastRefresh: lastRefreshRef.current
+    lastRefresh
   };
 }
 
@@ -985,7 +990,7 @@ function MsalAuthProvider({
   onTenantDenied,
   ...config
 }) {
-  const [msalInstance, setMsalInstance] = useState(null);
+  const [msalInstance, setMsalInstance] = useState2(null);
   const instanceRef = useRef2(null);
   const { scopes = ["User.Read"], enableLogging = false } = config;
   useEffect2(() => {
@@ -1155,7 +1160,7 @@ function MSALProvider({ children, protection, onTenantDenied, ...props }) {
 }
 
 // src/components/MicrosoftSignInButton.tsx
-import { useState as useState2, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useState as useState3, useEffect as useEffect3, useRef as useRef3 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function MicrosoftSignInButton({
   text = "Sign in with Microsoft",
@@ -1168,7 +1173,7 @@ function MicrosoftSignInButton({
   onError
 }) {
   const { loginRedirect, inProgress, isAuthenticated } = useMsalAuth();
-  const [isLoading, setIsLoading] = useState2(false);
+  const [isLoading, setIsLoading] = useState3(false);
   const timeoutRef = useRef3(null);
   useEffect3(() => {
     return () => {
@@ -1356,10 +1361,10 @@ function MicrosoftLogo2() {
 }
 
 // src/components/UserAvatar.tsx
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/hooks/useUserProfile.ts
-import { useState as useState3, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
 
 // src/hooks/useGraphApi.ts
 import { useCallback as useCallback3 } from "react";
@@ -1490,9 +1495,9 @@ function enforceCacheLimit() {
 function useUserProfile() {
   const { isAuthenticated, account } = useMsalAuth();
   const graph = useGraphApi();
-  const [profile, setProfile] = useState3(null);
-  const [loading, setLoading] = useState3(false);
-  const [error, setError] = useState3(null);
+  const [profile, setProfile] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
   const fetchProfile = useCallback4(async () => {
     if (!isAuthenticated || !account) {
       setProfile(null);
@@ -1626,8 +1631,8 @@ function UserAvatar({
   fallbackImage
 }) {
   const { profile, loading } = useUserProfile();
-  const [photoUrl, setPhotoUrl] = useState4(null);
-  const [photoError, setPhotoError] = useState4(false);
+  const [photoUrl, setPhotoUrl] = useState5(null);
+  const [photoError, setPhotoError] = useState5(false);
   useEffect5(() => {
     if (profile?.photo) {
       setPhotoUrl(profile.photo);
@@ -1907,10 +1912,10 @@ var ErrorBoundary = class extends Component {
 // src/hooks/useMultiAccount.ts
 import { useMsal as useMsal3 } from "@azure/msal-react";
 import { InteractionStatus as InteractionStatus2 } from "@azure/msal-browser";
-import { useCallback as useCallback5, useMemo as useMemo2, useState as useState5, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo2, useState as useState6, useEffect as useEffect7 } from "react";
 function useMultiAccount(defaultScopes = ["User.Read"]) {
   const { instance, accounts, inProgress } = useMsal3();
-  const [activeAccount, setActiveAccount] = useState5(
+  const [activeAccount, setActiveAccount] = useState6(
     instance.getActiveAccount()
   );
   useEffect7(() => {
@@ -2060,7 +2065,7 @@ function useMultiAccount(defaultScopes = ["User.Read"]) {
 }
 
 // src/components/AccountSwitcher.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function AccountSwitcher({
   showAvatars = true,
@@ -2084,8 +2089,8 @@ function AccountSwitcher({
     isActiveAccount,
     accountCount
   } = useMultiAccount();
-  const [isOpen, setIsOpen] = useState6(false);
-  const [removingAccount, setRemovingAccount] = useState6(null);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [removingAccount, setRemovingAccount] = useState7(null);
   const handleSwitch = (account) => {
     switchAccount(account);
     setIsOpen(false);
@@ -2614,7 +2619,7 @@ function useTenant() {
 }
 
 // src/hooks/useRoles.ts
-import { useState as useState7, useEffect as useEffect8, useCallback as useCallback6 } from "react";
+import { useState as useState8, useEffect as useEffect8, useCallback as useCallback6 } from "react";
 var rolesCache = /* @__PURE__ */ new Map();
 var CACHE_DURATION2 = 5 * 60 * 1e3;
 var MAX_CACHE_SIZE2 = 100;
@@ -2636,10 +2641,10 @@ function enforceCacheLimit2() {
 function useRoles() {
   const { isAuthenticated, account } = useMsalAuth();
   const graph = useGraphApi();
-  const [roles, setRoles] = useState7([]);
-  const [groups, setGroups] = useState7([]);
-  const [loading, setLoading] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [roles, setRoles] = useState8([]);
+  const [groups, setGroups] = useState8([]);
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(null);
   const fetchRolesAndGroups = useCallback6(async () => {
     if (!isAuthenticated || !account) {
       setRoles([]);
@@ -3005,7 +3010,7 @@ function createScopedLogger(scope, config) {
 }
 
 // src/protection/ProtectedPage.tsx
-import { useEffect as useEffect9, useState as useState8 } from "react";
+import { useEffect as useEffect9, useState as useState9 } from "react";
 import { useRouter } from "next/navigation";
 import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function ProtectedPage({
@@ -3019,8 +3024,8 @@ function ProtectedPage({
   const router = useRouter();
   const { isAuthenticated, account, inProgress } = useMsalAuth();
   const tenantInfo = useTenant();
-  const [isValidating, setIsValidating] = useState8(true);
-  const [isAuthorized, setIsAuthorized] = useState8(false);
+  const [isValidating, setIsValidating] = useState9(true);
+  const [isAuthorized, setIsAuthorized] = useState9(false);
   useEffect9(() => {
     async function checkAuth() {
       if (debug) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chemmangat/msal-next",
-  "version": "5.3.3",
+  "version": "5.3.4",
   "description": "Production-ready Microsoft/Azure AD authentication for Next.js App Router. Zero-config setup, TypeScript-first, multi-account support, auto token refresh. The easiest way to add Microsoft login to your Next.js app.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",