@nibssplc/cams-sdk-react 1.0.0-rc.46 → 1.0.0-rc.48

package/README.md

@@ -13,6 +13,19 @@ For MSAL mode, also install:
 npm install @azure/msal-browser @azure/msal-react
 ```
 
+### Importing Styles
+
+The SDK includes bundled Tailwind CSS. Import it in your app entry point:
+
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
+```
+
+For Next.js, add to `app/layout.tsx` or `pages/_app.tsx`:
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
+```
+
 ## Features
 
 - ⚛️ React hooks for authentication
@@ -273,13 +286,14 @@ export default function RootLayout({ children }) {
 
 ## Styling
 
-Components use Tailwind CSS. Ensure Tailwind is configured in your project:
+The SDK bundles all required Tailwind CSS, so you don't need to configure Tailwind in your project. Simply import the styles:
 
-```bash
-npm install -D tailwindcss
-npx tailwindcss init
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
 ```
 
+If your project already uses Tailwind, the SDK styles will work alongside your existing configuration.
+
 ## Examples
 
 See the [examples](../../examples) directory for complete implementations:

package/dist/components/MFAGate.d.ts

@@ -15,6 +15,7 @@ interface MFAGateProps {
     CredentialsAuthEndpoint?: string;
     PassKeysRegisterProps?: Record<string, unknown>;
     MFAEndpoints?: MFAEndpoints;
+    requiresMFA?: boolean;
 }
-declare const MFAGate: ({ children, fallback, usePassKey, useADLogin, CredentialsAuthEndpoint, PassKeysRegisterProps, MFAEndpoints, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
+declare const MFAGate: ({ children, fallback, usePassKey, useADLogin, CredentialsAuthEndpoint, PassKeysRegisterProps, MFAEndpoints, requiresMFA, }: MFAGateProps) => string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null;
 export default MFAGate;

package/dist/components/UnifiedCAMSProvider.d.ts

@@ -14,6 +14,11 @@ interface MSALProviderProps extends BaseProviderProps, Omit<UseCAMSMSALAuthOptio
     mode: "MSAL";
     msalConfig: Configuration;
     msalInstance?: PublicClientApplication;
+    onAuthSuccess?: (tokens: {
+        accessToken: string;
+        idToken: string;
+    }) => void;
+    onAuthError?: (error: any) => void;
 }
 type UnifiedCAMSProviderProps = RegularProviderProps | MSALProviderProps;
 export declare function UnifiedCAMSProvider(props: UnifiedCAMSProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/context/CAMSContext.d.ts

@@ -12,6 +12,11 @@ interface RegularCAMSContextValue extends BaseCAMSContextValue, UseCAMSAuthRetur
 }
 interface MSALCAMSContextValue extends BaseCAMSContextValue, UseCAMSMSALAuthReturn {
     authMode: "MSAL";
+    onAuthSuccess?: (tokens: {
+        accessToken: string;
+        idToken: string;
+    }) => void;
+    onAuthError?: (error: any) => void;
 }
 export type CAMSContextValue = RegularCAMSContextValue | MSALCAMSContextValue;
 export declare const CAMSContext: import("react").Context<CAMSContextValue | null>;

package/dist/hooks/useCAMSMSALAuth.d.ts

@@ -1,11 +1,6 @@
 import "../utils/crypto-polyfill";
 import { CAMSError, CAMSMFAAuthenticator, MFAResponse } from "@nibssplc/cams-sdk";
 export interface UseCAMSMSALAuthOptions {
-    onAuthSuccess?: (tokens: {
-        accessToken: string;
-        idToken: string;
-    }) => void;
-    onAuthError?: (error: CAMSError) => void;
     onTokenExpired?: () => void;
     scopes?: string[];
     storageKey?: string;

package/dist/index.cjs.js

@@ -434,7 +434,7 @@ var deleteCookie = function (name) {
 
 function useCAMSMSALAuth(options) {
     var _this = this;
-    var optStorageKey = options.storageKey, optScopes = options.scopes, prompt = options.prompt, appCode = options.appCode, MFAEndpoint = options.MFAEndpoint, onAuthSuccess = options.onAuthSuccess, onAuthError = options.onAuthError, _a = options.activeCookiePeriod, activeCookiePeriod = _a === void 0 ? 1 : _a;
+    var optStorageKey = options.storageKey, optScopes = options.scopes, prompt = options.prompt, appCode = options.appCode, MFAEndpoint = options.MFAEndpoint, _a = options.activeCookiePeriod, activeCookiePeriod = _a === void 0 ? 1 : _a;
     var storageKey = optStorageKey || "CAMS-MSAL-AUTH-SDK";
     var _b = msalReact.useMsal(), instance = _b.instance, inProgress = _b.inProgress, accounts = _b.accounts;
     var account = msalReact.useAccount(accounts[0] || {});
@@ -563,10 +563,6 @@ function useCAMSMSALAuth(options) {
                             idToken: response.idToken,
                         }));
                     }
-                    onAuthSuccess === null || onAuthSuccess === void 0 ? void 0 : onAuthSuccess({
-                        accessToken: response.accessToken,
-                        idToken: response.idToken,
-                    });
                     return [3 /*break*/, 4];
                 case 3:
                     err_1 = _b.sent();
@@ -586,12 +582,10 @@ function useCAMSMSALAuth(options) {
                         ((_a = err_1.message) === null || _a === void 0 ? void 0 : _a.includes("popup"))) {
                         camsError_1 = new camsSdk.CAMSError(camsSdk.CAMSErrorType.POPUP_BLOCKED, "Popup blocked by browser. Please allow popups and try again.");
                         setError(camsError_1);
-                        onAuthError === null || onAuthError === void 0 ? void 0 : onAuthError(camsError_1);
                         return [2 /*return*/];
                     }
                     camsError = new camsSdk.CAMSError(camsSdk.CAMSErrorType.API_VALIDATION_ERROR, "Login failed: " + err_1.message || err_1);
                     setError(camsError);
-                    onAuthError === null || onAuthError === void 0 ? void 0 : onAuthError(camsError);
                     return [3 /*break*/, 4];
                 case 4: return [2 /*return*/];
             }
@@ -602,8 +596,6 @@ function useCAMSMSALAuth(options) {
         prompt,
         appCode,
         MFAEndpoint,
-        onAuthSuccess,
-        onAuthError,
         storageKey,
         inProgress,
     ]);
@@ -1496,8 +1488,8 @@ function CAMSProviderCore(props) {
     ]);
     var value = React.useMemo(function () {
         auth.logout; var authRest = __rest(auth, ["logout"]);
-        return __assign(__assign({}, authRest), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode });
-    }, [auth, userProfile, mode]);
+        return __assign(__assign({}, authRest), { logout: enhancedLogout, userProfile: userProfile, setUserProfile: setUserProfile, authMode: mode, onAuthSuccess: mode === "MSAL" ? props.onAuthSuccess : undefined, onAuthError: mode === "MSAL" ? props.onAuthError : undefined });
+    }, [auth, userProfile, mode, props]);
     return jsxRuntimeExports.jsx(CAMSContext.Provider, { value: value, children: children });
 }
 function UnifiedCAMSProvider(props) {
@@ -1844,36 +1836,6 @@ function DialogTitle(_a) {
 
 var a="container_f782f4",i="inner_37f4c9",c="bar_409d0f";const r=({size:r=35,color:l="black",speed:d=1,stroke:o=3.5})=>jsxRuntimeExports.jsx("div",{className:a,style:{"--uib-size":r+"px","--uib-color":l,"--uib-speed":d+"s","--uib-stroke":o+"px"},children:jsxRuntimeExports.jsxs("div",{className:i,children:[jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c})]})});
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".container_f782f4 {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--uib-size) * 0.9);\n  width: var(--uib-size);\n}\n\n.inner_37f4c9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: var(--uib-size);\n  height: calc(var(--uib-size) * 0.9);\n}\n\n.bar_409d0f {\n  width: var(--uib-stroke);\n  height: 100%;\n  background-color: var(--uib-color);\n  transition: background-color 0.3s ease;\n}\n\n.bar_409d0f:nth-child(1) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45) infinite;\n}\n\n.bar_409d0f:nth-child(2) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3) infinite;\n}\n\n.bar_409d0f:nth-child(3) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15) infinite;\n}\n\n.bar_409d0f:nth-child(4) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out infinite;\n}\n\n@keyframes grow_ca6a4e {\n  0%, 100% {\n    transform: scaleY(0.3);\n  }\n  50% {\n    transform: scaleY(1);\n  }\n}";
-styleInject(css_248z);
-
 var LoadingSpinner = function (_a) {
     var loadingText = _a.loadingText;
     return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-center items-center h-full w-full py-10", children: [jsxRuntimeExports.jsx("script", { type: "module", defer: true, src: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/waveform.js" }), jsxRuntimeExports.jsx(r, { size: "35", stroke: "3.5", speed: "1", color: "green" }), loadingText && (jsxRuntimeExports.jsx("p", { className: "text-center font-semibold mt-3", children: "Loading..." }))] }));
@@ -2448,7 +2410,7 @@ var MFAGate = function (_a) {
     // loginComponent: LoginComponent = DefaultLoginPage,
     _c = _a.usePassKey, 
     // loginComponent: LoginComponent = DefaultLoginPage,
-    usePassKey = _c === void 0 ? false : _c, _d = _a.useADLogin, useADLogin = _d === void 0 ? false : _d, CredentialsAuthEndpoint = _a.CredentialsAuthEndpoint, PassKeysRegisterProps = _a.PassKeysRegisterProps, MFAEndpoints = _a.MFAEndpoints;
+    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;
     var context = useCAMSContext();
     var validatedMFAEndpoints = React.useMemo(function () {
         var parsed = MFAEndpointsSchema.safeParse(MFAEndpoints);
@@ -2459,19 +2421,32 @@ var MFAGate = function (_a) {
         return parsed.data;
     }, [MFAEndpoints]);
     var handleComplete = React.useCallback(function (success) {
-        if (!success)
+        var _a;
+        if (success && context.authMode === "MSAL") {
+            (_a = context.onAuthSuccess) === null || _a === void 0 ? void 0 : _a.call(context, {
+                accessToken: context.accessToken,
+                idToken: context.idToken,
+            });
+        }
+        else if (!success) {
             camsSdk.Logger.error("MFA authentication failed");
-    }, []);
+        }
+    }, [context]);
     var handleAuthFailed = React.useCallback(function () { return __awaiter$1(void 0, void 0, void 0, function () {
-        return __generator$1(this, function (_a) {
-            switch (_a.label) {
-                case 0: return [4 /*yield*/, context.logout()];
+        var _a;
+        return __generator$1(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (context.authMode === "MSAL" && context.error) {
+                        (_a = context.onAuthError) === null || _a === void 0 ? void 0 : _a.call(context, context.error);
+                    }
+                    return [4 /*yield*/, context.logout()];
                 case 1:
-                    _a.sent();
+                    _b.sent();
                     return [2 /*return*/];
             }
         });
-    }); }, [context.logout]);
+    }); }, [context]);
     if (useADLogin && !CredentialsAuthEndpoint)
         return jsxRuntimeExports.jsx(ErrorFallback, { message: "Invalid AD Login Configuration." });
     if (!validatedMFAEndpoints)
@@ -2480,7 +2455,8 @@ var MFAGate = function (_a) {
         return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
     if (context.isLoading)
         return fallback;
-    if (context.requiresMFA) {
+    var shouldRequireMFA = requiresMFA !== null && requiresMFA !== void 0 ? requiresMFA : context.requiresMFA;
+    if (shouldRequireMFA) {
         return (jsxRuntimeExports.jsx(MFAOptions, { MFAEndpoints: validatedMFAEndpoints, usePassKey: usePassKey, onComplete: handleComplete, onAuthFailed: handleAuthFailed }));
     }
     if (!context.isAuthenticated) {