@nibssplc/cams-sdk-react 1.0.0-rc.81 → 1.0.0-rc.83

package/dist/components/ADLoginModal.d.ts

@@ -1,4 +1,4 @@
-import { Credentials } from "@nibssplc/cams-sdk";
+import { type Credentials } from "@nibssplc/cams-sdk";
 interface ADLoginModalProps {
     open: boolean;
     isLoading: boolean;

package/dist/index.cjs.js

@@ -441,11 +441,9 @@ function useCAMSMSALAuth(options) {
     var _d = React.useState(""), idToken = _d[0], setIdToken = _d[1];
     var _e = React.useState(""), accessToken = _e[0], setAccessToken = _e[1];
     var _f = React.useState(""), email = _f[0], setEmail = _f[1];
-    // const [mfaAuthenticator, setMfaAuthenticator] =
-    //   useState<CAMSMFAAuthenticator | null>(null);
     var _g = React.useState(false), requiresMFA = _g[0], setRequiresMFA = _g[1];
     var isLoading = inProgress !== msalBrowser.InteractionStatus.None;
-    var isAuthenticated = !!account && !!accessToken && !requiresMFA;
+    var isAuthenticated = !!account && !!accessToken;
     var scopes = optScopes || ["openid", "profile", "email"];
     var isTokenValid = function (token) {
         try {
@@ -1663,12 +1661,13 @@ var credentialsSchema = z.z.object({
 });
 var ADLoginModal = function (_a) {
     var open = _a.open, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, onOpenChange = _a.onOpenChange, onLogin = _a.onLogin;
-    var _b = React.useState("credentials"), step = _b[0], setStep = _b[1];
-    var _c = React.useState({
+    var _b = React.useState("Credentials"), step = _b[0], setStep = _b[1];
+    var _c = React.useState(false), showPassword = _c[0], setShowPassword = _c[1];
+    var _d = React.useState({
         username: "",
         password: "",
-    }), credentials = _c[0], setCredentials = _c[1];
-    var _d = React.useState(""), mfaCode = _d[0], setMfaCode = _d[1];
+    }), credentials = _d[0], setCredentials = _d[1];
+    var _e = React.useState(""), MFACode = _e[0], setMFACode = _e[1];
     var form = reactHookForm.useForm({
         resolver: a$1(credentialsSchema),
         defaultValues: { username: "", password: "" },
@@ -1676,7 +1675,7 @@ var ADLoginModal = function (_a) {
     var handleCredentialsSubmit = function (values) { return __awaiter$1(void 0, void 0, void 0, function () {
         return __generator$1(this, function (_a) {
             setCredentials(values);
-            setStep("mfa");
+            setStep("MFA");
             return [2 /*return*/];
         });
     }); };
@@ -1698,9 +1697,9 @@ var ADLoginModal = function (_a) {
                 case 2:
                     _a.sent();
                     onOpenChange(false);
-                    setStep("credentials");
+                    setStep("Credentials");
                     form.reset();
-                    setMfaCode("");
+                    setMFACode("");
                     return [3 /*break*/, 5];
                 case 3:
                     error_1 = _a.sent();
@@ -1715,17 +1714,18 @@ var ADLoginModal = function (_a) {
     }); };
     var handleClose = function () {
         onOpenChange(false);
-        setStep("credentials");
+        setStep("Credentials");
         form.reset();
-        setMfaCode("");
+        setMFACode("");
+        setShowPassword(false);
     };
-    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntime.jsxs(DialogContent, { className: "min-w-[50vw] max-w-[70vw]", children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntime.jsx(DialogTitle, { className: "text-xl", children: "Sign in with AD Credentials" })] }) }), step === "credentials" ? (jsxRuntime.jsx(Form, __assign({}, form, { children: jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleCredentialsSubmit), className: "space-y-6", children: [jsxRuntime.jsx(FormField, { control: form.control, name: "username", render: function (_a) {
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: handleClose, children: jsxRuntime.jsxs(DialogContent, { className: "min-w-[50vw] max-w-[70vw]", children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "w-8 h-8 text-[#506f4a]" }), jsxRuntime.jsx(DialogTitle, { className: "text-xl", children: "Sign in with AD Credentials" })] }) }), step === "Credentials" ? (jsxRuntime.jsx(Form, __assign({}, form, { children: jsxRuntime.jsxs("form", { onSubmit: form.handleSubmit(handleCredentialsSubmit), className: "space-y-6", children: [jsxRuntime.jsx(FormField, { control: form.control, name: "username", render: function (_a) {
                                     var field = _a.field;
                                     return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Username" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Input, __assign({ className: "h-12", placeholder: "Enter your username" }, field)) }), jsxRuntime.jsx(FormMessage, {})] }));
                                 } }), jsxRuntime.jsx(FormField, { control: form.control, name: "password", render: function (_a) {
                                     var field = _a.field;
-                                    return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Password" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsx(Input, __assign({ className: "h-12", type: "password", placeholder: "Enter your password" }, field)) }), jsxRuntime.jsx(FormMessage, {})] }));
-                                } }), jsxRuntime.jsx(Button, { type: "submit", className: "py-3 w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(GenericOTPVerifier, { value: mfaCode, setValue: setMfaCode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntime.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
+                                    return (jsxRuntime.jsxs(FormItem, { children: [jsxRuntime.jsx(FormLabel, { children: "Password" }), jsxRuntime.jsx(FormControl, { children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Input, __assign({ className: "h-12 pr-10", type: "password", placeholder: "Enter your password" }, field)), jsxRuntime.jsx("button", { type: "button", onClick: function () { return setShowPassword(!showPassword); }, className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: showPassword ? (jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-5 h-5" })) : (jsxRuntime.jsx(lucideReact.Eye, { className: "w-5 h-5" })) })] }) }), jsxRuntime.jsx(FormMessage, {})] }));
+                                } }), jsxRuntime.jsx(Button, { type: "submit", className: "py-3 w-full bg-[#506f4a] hover:bg-[#506f4a]/90", children: "Continue" })] }) }))) : (jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsx(GenericOTPVerifier, { value: MFACode, setValue: setMFACode, setLoading: setIsLoading, isDisabled: isLoading, onChangeOTP: handleMFASubmit, fieldName: "AuthenticatorCode" }), isLoading && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 text-sm text-muted-foreground", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "w-4 h-4 animate-spin" }), jsxRuntime.jsx("span", { children: "Verifying..." })] }))] }))] }) }));
 };
 
 var DefaultLoginPage = function (_a) {
@@ -1750,6 +1750,12 @@ var DefaultLoginPage = function (_a) {
             console.log(data);
             if (state && data && data.isValid) {
                 context.isAuthenticated = true;
+                localStorage.setItem(context.storageKey, JSON.stringify({
+                    isAuthenticated: false,
+                    requiresMFA: false,
+                    accessToken: "Credentials",
+                    idToken: "Credentials",
+                }));
                 context.requiresMFA = false;
                 context.setUserProfile({
                     state: "AUTH_SUCCESS",
@@ -1765,7 +1771,7 @@ var DefaultLoginPage = function (_a) {
                 });
             }
             else {
-                sonner.toast.error("\u274C AD Login failed. ".concat((data === null || data === void 0 ? void 0 : data.message) || 'Unknown error'));
+                sonner.toast.error("\u274C AD Login failed. ".concat((data === null || data === void 0 ? void 0 : data.message) || "Unknown error"));
             }
             return [2 /*return*/];
         });
@@ -1797,7 +1803,12 @@ var DefaultLoginPage = function (_a) {
                     return __generator$1(this, function (_c) {
                         // Implement your AD login logic here
                         console.log("AD Login:", { username: username, MFACode: MFACode });
-                        handleSubmitCredentials(CredentialsAuthEndpoint, { username: username, password: password, MFACode: MFACode, appCode: context.appCode });
+                        handleSubmitCredentials(CredentialsAuthEndpoint, {
+                            username: username,
+                            password: password,
+                            MFACode: MFACode,
+                            appCode: context.appCode,
+                        });
                         return [2 /*return*/];
                     });
                 }); } })] }));
@@ -1816,15 +1827,14 @@ var MFAEndpointsSchema = z.object({
     AuthChallengeVerify: z.url("MFA AuthChallengeVerify must be a valid URL"),
 });
 var MFAGate = function (_a) {
-    var _b, _c, _d;
-    var children = _a.children, _e = _a.fallback, fallback = _e === void 0 ? (jsxRuntime.jsx("div", { className: "h-screen flex items-center justify-center", children: jsxRuntime.jsx(LoadingSpinner, {}) })) : _e, 
+    var children = _a.children, _b = _a.fallback, fallback = _b === void 0 ? (jsxRuntime.jsx("div", { className: "h-screen flex items-center justify-center", children: jsxRuntime.jsx(LoadingSpinner, {}) })) : _b, 
     // loginComponent: LoginComponent = DefaultLoginPage,
-    _f = _a.usePassKey, 
+    _c = _a.usePassKey, 
     // loginComponent: LoginComponent = DefaultLoginPage,
-    usePassKey = _f === void 0 ? false : _f, _g = _a.useADLogin, useADLogin = _g === void 0 ? false : _g, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps, MFAEndpoints = _a.MFAEndpoints, requiresMFA = _a.requiresMFA, onAuthSuccess = _a.onAuthSuccess, onAuthError = _a.onAuthError;
+    usePassKey = _c === void 0 ? false : _c, _d = _a.useADLogin, useADLogin = _d === void 0 ? false : _d, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps, MFAEndpoints = _a.MFAEndpoints, requiresMFA = _a.requiresMFA, onAuthSuccess = _a.onAuthSuccess, onAuthError = _a.onAuthError;
     var context = useCAMSContext();
-    var _h = React.useState("Loading"), authState = _h[0], setAuthState = _h[1];
-    var validatedMFAEndpoints = React.useMemo(function () {
+    var _e = React.useState("Loading"), authState = _e[0], setAuthState = _e[1];
+    var ValidatedMFAEndpoints = React.useMemo(function () {
         var parsed = MFAEndpointsSchema.safeParse(MFAEndpoints);
         if (!parsed.success) {
             camsSdk.Logger.error("Invalid MFAEndpoint", parsed.error);
@@ -1832,6 +1842,9 @@ var MFAGate = function (_a) {
         }
         return parsed.data;
     }, [MFAEndpoints]);
+    // Extract the specific values we need from context for dependencies
+    var contextRequiresMFA = "requiresMFA" in context ? context.requiresMFA : false;
+    var contextAccessToken = "accessToken" in context ? context.accessToken : "";
     var handleComplete = React.useCallback(function (success) {
         var _a;
         if (success && context.authMode === "MSAL") {
@@ -1867,61 +1880,64 @@ var MFAGate = function (_a) {
             }
         });
     }); }, [context, onAuthError]);
-    camsSdk.Logger.debug("User context:", {
-        user: context.user,
-        profile: (_b = context.user) === null || _b === void 0 ? void 0 : _b.profile,
-        email: (_d = (_c = context.user) === null || _c === void 0 ? void 0 : _c.profile) === null || _d === void 0 ? void 0 : _d.email,
-    });
     React.useEffect(function () {
+        console.log("Auth evaluation triggered:", {
+            isLoading: context.isLoading,
+            isAuthenticated: context.isAuthenticated,
+            contextRequiresMFA: contextRequiresMFA,
+            contextAccessToken: !!contextAccessToken,
+            requiresMFA: requiresMFA,
+        });
         if (context.isLoading) {
             setAuthState("Loading");
             return;
         }
-        if (!context.isAuthenticated) {
+        // Check if user has accessToken (MSAL authenticated)
+        if (!contextAccessToken) {
             setAuthState("Unauthenticated");
             return;
         }
-        // Small delay to ensure all context updates are processed
-        var timer = setTimeout(function () {
-            var shouldRequireMFA = requiresMFA !== null && requiresMFA !== void 0 ? requiresMFA : ("requiresMFA" in context ? context.requiresMFA : false);
-            var accessToken = "accessToken" in context ? context.accessToken : "";
-            console.log("Auth State Debug:", {
-                isAuthenticated: context.isAuthenticated,
-                shouldRequireMFA: shouldRequireMFA,
-                accessToken: !!accessToken,
-                requiresMFA: requiresMFA,
-                contextRequiresMFA: "requiresMFA" in context ? context.requiresMFA : "N/A"
-            });
-            if (shouldRequireMFA && accessToken) {
-                setAuthState("MFA_Required");
-            }
-            else {
-                setAuthState("Authenticated");
-            }
-        }, 50);
-        return function () { return clearTimeout(timer); };
+        // User has accessToken, determine if MFA is required
+        var shouldRequireMFA = requiresMFA !== null && requiresMFA !== void 0 ? requiresMFA : contextRequiresMFA;
+        console.log("MFA decision:", {
+            shouldRequireMFA: shouldRequireMFA,
+            hasAccessToken: !!contextAccessToken,
+            finalState: shouldRequireMFA ? "MFA_Required" : "Authenticated",
+        });
+        if (shouldRequireMFA) {
+            setAuthState("MFA_Required");
+        }
+        else {
+            setAuthState("Authenticated");
+        }
     }, [
-        context.accessToken,
         context.isLoading,
         context.isAuthenticated,
-        context.requiresMFA,
+        contextRequiresMFA, // Now this will trigger re-evaluation when requiresMFA changes
+        contextAccessToken, // And this when accessToken changes
         requiresMFA,
-        context,
+        context.authMode,
     ]);
-    // Add this debug useEffect to see what's happening
+    // Debug useEffect
     React.useEffect(function () {
         console.log("Current authState:", authState);
         console.log("Context state:", {
             isLoading: context.isLoading,
             isAuthenticated: context.isAuthenticated,
             authMode: context.authMode,
-            requiresMFA: "requiresMFA" in context ? context.requiresMFA : "N/A",
-            hasAccessToken: "accessToken" in context ? !!context.accessToken : false
+            requiresMFA: contextRequiresMFA,
+            hasAccessToken: !!contextAccessToken,
         });
-    }, [authState, context]);
+    }, [
+        authState,
+        context.isLoading,
+        context.isAuthenticated,
+        contextRequiresMFA,
+        contextAccessToken,
+    ]);
     if (useADLogin && !CredentialsAuthEndpoint)
         return jsxRuntime.jsx(ErrorFallback, { message: "Invalid AD Login Configuration." });
-    if (!validatedMFAEndpoints)
+    if (!ValidatedMFAEndpoints)
         return jsxRuntime.jsx(ErrorFallback, { message: "Invalid MFA Configuration." });
     if (context.authMode !== "MSAL")
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
@@ -1929,12 +1945,12 @@ var MFAGate = function (_a) {
         case "Loading":
             return fallback;
         case "MFA_Required":
-            return (jsxRuntime.jsx(MFAOptions, { MFAEndpoints: validatedMFAEndpoints, usePassKey: usePassKey, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
+            return (jsxRuntime.jsx(MFAOptions, { MFAEndpoints: ValidatedMFAEndpoints, usePassKey: usePassKey, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
         case "Authenticated":
             return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
         case "Unauthenticated":
         default:
-            return (jsxRuntime.jsx(DefaultLoginPage, { usePassKey: usePassKey, useADLogin: useADLogin, MFAEndpoints: MFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps, CredentialsAuthEndpoint: CredentialsAuthEndpoint }));
+            return (jsxRuntime.jsx(DefaultLoginPage, { usePassKey: usePassKey, useADLogin: useADLogin, MFAEndpoints: ValidatedMFAEndpoints, PassKeysRegisterProps: PassKeysRegisterProps, CredentialsAuthEndpoint: CredentialsAuthEndpoint }));
     }
 };