@nibssplc/cams-sdk-react 1.0.0-rc.134 → 1.0.0-rc.136

package/README.md

@@ -293,6 +293,105 @@ export default function RootLayout({ children }) {
 }
 ```
 
+## Sample Implementation - MSAL Mode with MFA
+
+### Environment Variables
+
+```bash
+# .env.local
+NEXT_PUBLIC_AZURE_MSAL_CLIENT_ID=your-client-id
+NEXT_PUBLIC_AZURE_MSAL_ALLOWED_TENANT_GROUP=your-tenant-id
+NEXTAUTH_URL=http://localhost:3000
+NEXT_PUBLIC_CAMS_APP_ID=your-app-guid
+NEXT_PUBLIC_CAMS_SDK_BASE_URL=https://your-cams-api-endpoint.com
+AUTH_MAX_TIMEOUT=60000
+```
+
+### Configuration Setup
+
+```tsx
+// lib/msalConfig.ts
+import { Configuration } from '@azure/msal-browser';
+
+export const msalConfig: Configuration = {
+  auth: {
+    clientId: process.env.NEXT_PUBLIC_AZURE_MSAL_CLIENT_ID ?? "",
+    authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_MSAL_ALLOWED_TENANT_GROUP}`,
+    redirectUri: process.env.NEXTAUTH_URL || (typeof window !== "undefined" ? window.location.origin : ""),
+  },
+  system: {
+    loadFrameTimeout: Number(process.env.AUTH_MAX_TIMEOUT) || 60000,
+    allowNativeBroker: false,
+  },
+};
+```
+
+### Provider Setup with MFA
+
+```tsx
+// app/providers.tsx
+'use client';
+
+import { UnifiedCAMSProvider, MFAGate } from '@nibssplc/cams-sdk-react';
+import { msalConfig } from '@/lib/msalConfig';
+import { toast } from 'sonner'; // or your preferred toast library
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <UnifiedCAMSProvider
+      mode="MSAL"
+      appCode={process.env.NEXT_PUBLIC_CAMS_APP_ID!}
+      ValidateUserEndpoint={`${process.env.NEXT_PUBLIC_CAMS_SDK_BASE_URL}/api/Auth/AuthenticateUserMFA`}
+      msalConfig={msalConfig}
+      DisableCAMSUserProfileValidation={true}
+    >
+      <MFAGate
+        requiresMFA={false}
+        DisableCAMSUserProfileValidation={true}
+        MFAEndpoints={{
+          ValidateUserMFA: `${process.env.NEXT_PUBLIC_CAMS_SDK_BASE_URL}/api/Auth/AuthenticateUserMFA`,
+          RetrieveAuthChallenge: `${process.env.NEXT_PUBLIC_CAMS_SDK_BASE_URL}/api/Auth/RetrieveAuthChallenge`,
+          AuthChallengeVerify: `${process.env.NEXT_PUBLIC_CAMS_SDK_BASE_URL}/api/Auth/AuthChallengeVerification`,
+        }}
+        onAuthError={(err) => 
+          toast.error(`Authentication Error: ${err.message || "An Error Occurred During Authentication."}`)
+        }
+        onAuthSuccess={async (tokens) => {
+          toast.success("Authentication successful!");
+          // Handle successful authentication
+        }}
+      >
+        {children}
+      </MFAGate>
+    </UnifiedCAMSProvider>
+  );
+}
+```
+
+### Usage in Components
+
+```tsx
+// app/dashboard.tsx
+'use client';
+
+import { useCAMSContext } from '@nibssplc/cams-sdk-react';
+
+export default function Dashboard() {
+  const { isAuthenticated, userProfile, logout } = useCAMSContext();
+
+  if (!isAuthenticated) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>Welcome, {userProfile?.name}!</h1>
+      <button onClick={logout}>Logout</button>
+    </div>
+  );
+}
+```
+
 ## Styling
 
 The SDK bundles all required Tailwind CSS, so you don't need to configure Tailwind in your project. Simply import the styles:
@@ -312,12 +411,6 @@ 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:
-- `integrated-mfa-example.tsx` - MSAL mode with MFA
-- `popup-auth-example.tsx` - Regular popup authentication
-
 ## License
 
 MIT

package/dist/index.cjs.js

@@ -473,13 +473,13 @@ function useCAMSMSALAuth(options) {
                 case 2:
                     response = _e.sent();
                     authenticator = new camsSdk.CAMSMFAAuthenticator();
-                    if (!DisableCAMSUserProfileValidation) return [3 /*break*/, 3];
                     email_1 = ((_a = response.account) === null || _a === void 0 ? void 0 : _a.username) || ((_b = response.idTokenClaims) === null || _b === void 0 ? void 0 : _b.preferred_username) || "";
+                    localStorage.setItem(storageKey, JSON.stringify({ accessToken: response.accessToken, idToken: response.idToken, email: email_1, appCode: appCode }));
+                    if (!DisableCAMSUserProfileValidation) return [3 /*break*/, 3];
                     setAccessToken(response.accessToken);
                     setIdToken(response.idToken);
                     setEmail(email_1);
                     setRequiresMFA(false);
-                    localStorage.setItem(storageKey, JSON.stringify({ accessToken: response.accessToken, idToken: response.idToken, email: email_1, appCode: appCode }));
                     camsSdk.Logger.info("CAMS User Profile Validation Disabled. Skipping MFA config fetch.");
                     return [3 /*break*/, 7];
                 case 3:
@@ -1759,13 +1759,13 @@ var DefaultLoginPage = function (_a) {
                         onADLoginSuccess === null || onADLoginSuccess === void 0 ? void 0 : onADLoginSuccess();
                     } }) }) }));
     }
-    return (jsxRuntime.jsxs("main", { className: "cams-sdk min-h-screen bg-gray-50", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntime.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntime.jsxs(framerMotion.motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-4 rounded-2xl shadow-2xl", children: [jsxRuntime.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntime.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 225, height: 225 }) }), jsxRuntime.jsx(CardTitle, { className: "text-3xl font-bold", children: "NIBSS CAMS" }), jsxRuntime.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-lg", children: "Centralized Authentication" })] }), jsxRuntime.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-8", children: [jsxRuntime.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 365, height: 365 }), "Use Below Identity Providers To Authenticate"] }), jsxRuntime.jsxs("div", { className: "space-y-4", children: [jsxRuntime.jsxs(Button
+    return (jsxRuntime.jsxs("main", { className: "cams-sdk min-h-screen bg-gray-50", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.5 }, children: jsxRuntime.jsx("div", { className: "flex h-screen items-center justify-center", children: jsxRuntime.jsxs(framerMotion.motion.div, { variants: cardVariants, initial: "hidden", animate: "visible", exit: "exit", className: "w-full max-w-md p-6 space-y-6 rounded-2xl shadow-2xl", children: [jsxRuntime.jsxs(CardHeader, { className: "text-center space-y-3", children: [jsxRuntime.jsx("div", { className: "w-full flex items-center justify-center", children: jsxRuntime.jsx("img", { src: NIBSSLogo, alt: "NIBSS Logo", width: 250, height: 250 }) }), jsxRuntime.jsx(CardTitle, { className: "text-3xl font-bold", children: "NIBSS CAMS" }), jsxRuntime.jsx(CardTitle, { className: "text-gray-500 dark:text-gray-400 font-bold text-2xl", children: "Centralized Authentication" })] }), jsxRuntime.jsxs(CardAction, { className: "w-full flex flex-col items-center justify-center text-center text-gray-500 dark:text-gray-400 mb-8", children: [jsxRuntime.jsx("img", { src: AuthLogo, alt: "Auth Logo", width: 385, height: 385 }), "Use Below Identity Providers To Authenticate"] }), jsxRuntime.jsxs("div", { className: "space-y-6", children: [jsxRuntime.jsxs(Button
                                     // variant="outline"
                                     , { 
                                         // variant="outline"
-                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: handleMSALLogin, disabled: isLoading, children: [jsxRuntime.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntime.jsx("span", { className: "ml-2", children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), useADLogin && (jsxRuntime.jsxs(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return setShowADModal(true); }, disabled: isLoading, children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntime.jsx("span", { children: isLoading
+                                        className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] text-white rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: handleMSALLogin, disabled: isLoading, children: [jsxRuntime.jsx("img", { src: MicrosoftLogo, alt: "Microsoft Logo", width: 35, height: 35 }), jsxRuntime.jsx("span", { className: "ml-2", children: isLoading ? "Logging in..." : "Sign in with Microsoft" })] }), useADLogin && (jsxRuntime.jsxs(Button, { className: "w-full flex items-center justify-center cursor-pointer bg-[#506f4a] hover:bg-[#506f4a] rounded-lg border border-transparent px-5 py-8 text-base font-medium transition-colors duration-250", onClick: function () { return setShowADModal(true); }, disabled: isLoading, children: [jsxRuntime.jsx(lucideReact.KeyIcon, { className: "text-[#506f4a]", size: 64 }), jsxRuntime.jsx("span", { children: isLoading
                                                     ? "Logging in..."
-                                                    : "Sign in with ActiveDirectory" })] }))] }), jsxRuntime.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntime.jsx("span", { children: "Powered By NIBSS" })] })] }) }) }, "landing"), jsxRuntime.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, isLoading: context.isLoading || isCredAuthLoading, setIsLoading: setIsCredAuthLoading, onLogin: function (_a) { return __awaiter$1(void 0, [_a], void 0, function (_b) {
+                                                    : "Sign in with Active Directory" })] }))] }), jsxRuntime.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "w-6 h-6 text-[#506f4a] pulse-glow" }), jsxRuntime.jsx("span", { className: "font-semibold", children: "Powered By NIBSS" })] })] }) }) }, "landing"), jsxRuntime.jsx(ADLoginModal, { open: showADModal, onOpenChange: setShowADModal, isLoading: context.isLoading || isCredAuthLoading, setIsLoading: setIsCredAuthLoading, onLogin: function (_a) { return __awaiter$1(void 0, [_a], void 0, function (_b) {
                     var username = _b.username, password = _b.password, MFACode = _b.MFACode, appCode = _b.appCode;
                     return __generator$1(this, function (_c) {
                         switch (_c.label) {