@nibssplc/cams-sdk-react 1.0.0-rc.135 → 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

@@ -1763,7 +1763,7 @@ var DefaultLoginPage = function (_a) {
                                     // 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 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;