@nibssplc/cams-sdk-react 0.0.1-beta.61 → 0.0.1-beta.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/OTPAuthentication.svg +1 -0
- package/dist/index.cjs.js +32 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +33 -11
- package/dist/index.esm.js.map +1 -1
- package/dist/microsoftauthenticator.svg +18 -0
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { useState, useRef, useEffect, useCallback, createContext, useContext, useMemo } from 'react';
|
|
3
|
-
import { isPopupWindow, initializePopupAuth, CAMSSessionManager, Logger, CAMSError, CAMSErrorType
|
|
3
|
+
import { isPopupWindow, initializePopupAuth, CAMSSessionManager, CAMSMFAAuthenticator, Logger, CAMSError, CAMSErrorType } from '@nibssplc/cams-sdk';
|
|
4
4
|
export * from '@nibssplc/cams-sdk';
|
|
5
5
|
import { useMsal, useAccount, MsalProvider } from '@azure/msal-react';
|
|
6
6
|
import { InteractionStatus, PublicClientApplication } from '@azure/msal-browser';
|
|
@@ -267,11 +267,25 @@ function useCAMSMSALAuth(options) {
|
|
|
267
267
|
var stored = localStorage.getItem(options.storageKey);
|
|
268
268
|
if (stored) {
|
|
269
269
|
try {
|
|
270
|
-
var _a = JSON.parse(stored), accessToken_1 = _a.accessToken, idToken_1 = _a.idToken, appCode = _a.appCode;
|
|
270
|
+
var _a = JSON.parse(stored), accessToken_1 = _a.accessToken, idToken_1 = _a.idToken, appCode = _a.appCode, storedRequiresMFA = _a.requiresMFA, storedIsAuthenticated = _a.isAuthenticated;
|
|
271
271
|
if (accessToken_1 && isTokenValid(accessToken_1)) {
|
|
272
272
|
setAccessToken(accessToken_1);
|
|
273
273
|
setIdToken(idToken_1);
|
|
274
|
+
// Restore MFA state
|
|
275
|
+
if (storedRequiresMFA && !storedIsAuthenticated) {
|
|
276
|
+
var mfaConfig = {
|
|
277
|
+
accessToken: accessToken_1,
|
|
278
|
+
idToken: idToken_1,
|
|
279
|
+
appCode: options.appCode,
|
|
280
|
+
provider: "MSAL",
|
|
281
|
+
apiEndpoint: options.MFAEndpoint,
|
|
282
|
+
};
|
|
283
|
+
var authenticator = new CAMSMFAAuthenticator(mfaConfig);
|
|
284
|
+
setMfaAuthenticator(authenticator);
|
|
285
|
+
setRequiresMFA(true);
|
|
286
|
+
}
|
|
274
287
|
console.log("App Code >>>", appCode, options.appCode);
|
|
288
|
+
console.log("MFA Endpoint >>>", appCode, options.MFAEndpoint);
|
|
275
289
|
}
|
|
276
290
|
else {
|
|
277
291
|
localStorage.removeItem(options.storageKey);
|
|
@@ -279,8 +293,12 @@ function useCAMSMSALAuth(options) {
|
|
|
279
293
|
}
|
|
280
294
|
catch (_b) { }
|
|
281
295
|
}
|
|
296
|
+
else if (account) {
|
|
297
|
+
// Storage cleared but MSAL account exists - clear MSAL state
|
|
298
|
+
instance.logoutRedirect().catch(function () { });
|
|
299
|
+
}
|
|
282
300
|
}
|
|
283
|
-
}, [accessToken]);
|
|
301
|
+
}, [accessToken, account, instance, options.storageKey]);
|
|
284
302
|
// useEffect(() => {
|
|
285
303
|
// const handleRedirect = async () => {
|
|
286
304
|
// try {
|
|
@@ -1456,9 +1474,9 @@ var GenericOTPVerifier = function (_a) {
|
|
|
1456
1474
|
resolver: a$1(Schema),
|
|
1457
1475
|
defaultValues: (_c = {}, _c[fieldName] = "", _c),
|
|
1458
1476
|
});
|
|
1459
|
-
return (jsxRuntimeExports.jsxs(
|
|
1477
|
+
return (jsxRuntimeExports.jsxs(Card, { className: "relative rounded space-y-4 p-0 m-0 py-8 space-x-6", children: [jsxRuntimeExports.jsxs(CardHeader, { className: "flex items-center justify-center flex-col gap-2 mt-2 text-center mb-8", children: [jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gradient-to-br from-lime-400 via-green-500 to-emerald-600 rounded-xl flex items-center justify-center text-white text-2xl mb-6 group-hover:scale-110 transition-transform duration-300", children: jsxRuntimeExports.jsx(RectangleEllipsis, {}) }), jsxRuntimeExports.jsx(CardTitle, { className: "font-bold text-emerald-700 text-2xl", children: "One-Time-Password (OTP)" }), attemptCount > 0 && (jsxRuntimeExports.jsx("div", { className: "text-sm mt-2 ".concat(isMaxAttemptsReached ? 'text-red-600' : 'text-orange-600'), children: isMaxAttemptsReached
|
|
1460
1478
|
? 'Maximum attempts reached. Please try again later.'
|
|
1461
|
-
: "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx(
|
|
1479
|
+
: "Attempt ".concat(attemptCount, "/3 - ").concat(remainingAttempts, " attempts remaining") }))] }), jsxRuntimeExports.jsx(CardContent, { className: "space-y-6", children: jsxRuntimeExports.jsx(Form, __assign({}, form, { children: jsxRuntimeExports.jsx("form", { className: "flex items-center justify-center my-4 ", children: jsxRuntimeExports.jsx(FormField, { control: form.control, name: fieldName, render: function () { return (jsxRuntimeExports.jsxs(FormItem, { className: "flex items-center justify-center flex-col gap-y-1 space-y-4", children: [jsxRuntimeExports.jsx(FormControl, { children: jsxRuntimeExports.jsx(InputOTP, { maxLength: 6, value: value, disabled: isMaxAttemptsReached, onChange: function (authenticationValue) {
|
|
1462
1480
|
setValue(authenticationValue);
|
|
1463
1481
|
if (authenticationValue.length === 6 && !isMaxAttemptsReached) {
|
|
1464
1482
|
setLoading === null || setLoading === void 0 ? void 0 : setLoading(true);
|
|
@@ -1467,6 +1485,10 @@ var GenericOTPVerifier = function (_a) {
|
|
|
1467
1485
|
}, pattern: REGEXP_ONLY_DIGITS, children: jsxRuntimeExports.jsx(InputOTPGroup, { className: "space-x-2", children: __spreadArray([], Array(6), true).map(function (_, idx) { return (jsxRuntimeExports.jsx(InputOTPSlot, { className: "border border-l-2 ".concat(isMaxAttemptsReached ? 'opacity-50 cursor-not-allowed' : ''), index: idx }, idx + 1)); }) }) }) }), jsxRuntimeExports.jsx(FormMessage, {})] })); } }) }) })) })] }));
|
|
1468
1486
|
};
|
|
1469
1487
|
|
|
1488
|
+
var OTPAuthenticationImg = "OTPAuthentication.svg";
|
|
1489
|
+
|
|
1490
|
+
var MicrosoftAuthenticatorImg = "microsoftauthenticator.svg";
|
|
1491
|
+
|
|
1470
1492
|
var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
1471
1493
|
variants: {
|
|
1472
1494
|
variant: {
|
|
@@ -1664,9 +1686,7 @@ var MFAOptions = function (_a) {
|
|
|
1664
1686
|
var _f = useState(null), authType = _f[0], setAuthType = _f[1];
|
|
1665
1687
|
var context = useCAMSContext();
|
|
1666
1688
|
var isSDKMode = context.authMode === "MSAL" && "completeMFA" in context;
|
|
1667
|
-
var sendEmailOTP = (isSDKMode
|
|
1668
|
-
? context
|
|
1669
|
-
: { sendEmailOTP: null }).sendEmailOTP;
|
|
1689
|
+
var sendEmailOTP = (isSDKMode ? context : { sendEmailOTP: null }).sendEmailOTP;
|
|
1670
1690
|
var accessToken = context.authMode === "MSAL" ? context.accessToken : "";
|
|
1671
1691
|
var idToken = context.authMode === "MSAL" ? context.idToken : "";
|
|
1672
1692
|
var _g = useOTPHandler({
|
|
@@ -1675,7 +1695,9 @@ var MFAOptions = function (_a) {
|
|
|
1675
1695
|
idToken: idToken || "",
|
|
1676
1696
|
appCode: context.appCode || "",
|
|
1677
1697
|
authenticationType: authType,
|
|
1678
|
-
validateTokenUrl: (
|
|
1698
|
+
validateTokenUrl: (context.authMode === "MSAL" && "MFAEndpoint" in context
|
|
1699
|
+
? context.MFAEndpoint || "/api/auth/verify-mfa"
|
|
1700
|
+
: "/api/validate-token"),
|
|
1679
1701
|
onAuthComplete: function (success, data) {
|
|
1680
1702
|
if (success) {
|
|
1681
1703
|
setShowSuccessAnimation(true);
|
|
@@ -1727,7 +1749,7 @@ var MFAOptions = function (_a) {
|
|
|
1727
1749
|
resetAttempts();
|
|
1728
1750
|
setAuthType("AuthenticatorCode");
|
|
1729
1751
|
setOtpVisible(true);
|
|
1730
|
-
}, children: [jsxRuntimeExports.jsx("img", { src:
|
|
1752
|
+
}, children: [jsxRuntimeExports.jsx("img", { src: MicrosoftAuthenticatorImg, alt: "Authenticator", className: "rounded-full", width: 24, height: 24 }), jsxRuntimeExports.jsxs("div", { className: "text-left", children: [jsxRuntimeExports.jsx("div", { className: "font-medium", children: "Authenticator App" }), jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-500", children: "Use Authenticator App" })] })] })] })] }));
|
|
1731
1753
|
}
|
|
1732
1754
|
else if (authType === "EmailOTP") {
|
|
1733
1755
|
content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: function () {
|
|
@@ -1739,7 +1761,7 @@ var MFAOptions = function (_a) {
|
|
|
1739
1761
|
else if (authType === "AuthenticatorCode") {
|
|
1740
1762
|
content = (jsxRuntimeExports.jsxs(Dialog, { open: otpVisible, onOpenChange: handleGoBack, children: [jsxRuntimeExports.jsx(DialogHeader, { children: jsxRuntimeExports.jsx(DialogTitle, { children: "Authenticator App" }) }), jsxRuntimeExports.jsx(DialogContent, { className: "sm:max-w-[425px]", children: loading ? (jsxRuntimeExports.jsx("div", { className: "p-3 flex justify-center items-center", children: jsxRuntimeExports.jsx(LoadingSpinner, {}) })) : (jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 text-center", children: "Enter the 6-digit Code from your Authenticator app" }), jsxRuntimeExports.jsx(GenericOTPVerifier, { value: value, setValue: setValue, isDisabled: loading || isMaxAttemptsReached, onChangeOTP: handleSubmitOTP, fieldName: "AuthenticatorCode", attemptCount: attemptCount, remainingAttempts: remainingAttempts, isMaxAttemptsReached: isMaxAttemptsReached })] })) })] }));
|
|
1741
1763
|
}
|
|
1742
|
-
return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", children: jsxRuntimeExports.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("img", { src:
|
|
1764
|
+
return (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center h-dvh", children: jsxRuntimeExports.jsxs(Card, { className: "mx-auto space-y-6 p-6 bg-white rounded-lg shadow-md", children: [jsxRuntimeExports.jsxs(CardHeader, { children: [jsxRuntimeExports.jsx("img", { src: OTPAuthenticationImg, alt: "NIBSS Logo", width: 365, height: 365 }), jsxRuntimeExports.jsx(CardTitle, { className: "text-3xl font-bold mb-6 text-center", children: "Two-Factor Authentication" }), jsxRuntimeExports.jsx(CardTitle, { className: "text-gray-300 text-sm -tracking-wide text-center", children: "Your Microsoft account has been validated. Please complete two-factor authentication to continue." })] }), jsxRuntimeExports.jsx(CardContent, { children: content }), jsxRuntimeExports.jsxs(CardFooter, { className: "flex items-center justify-center mt-6 space-x-2 text-gray-400 text-sm", children: [jsxRuntimeExports.jsx(ShieldCheck, { className: "w-4 h-4 text-[#506f4a] pulse-glow" }), jsxRuntimeExports.jsx("span", { children: "Powered By NIBSS" })] })] }) }));
|
|
1743
1765
|
};
|
|
1744
1766
|
|
|
1745
1767
|
var LoginButton = function () {
|