@oneblink/apps-react 10.3.1 → 11.0.0-beta.1

package/dist/hooks/useMfa.d.ts

@@ -4,19 +4,39 @@ type MfaState = {
     isExternalIdentityProviderUser: boolean;
     isLoading: boolean;
     isMfaEnabled: boolean;
+    mfaSettings: authService.MfaSettings;
+    isSetupSuccessOpen: boolean;
     loadingError?: Error;
     isSettingUpMfa: boolean;
-    isDisablingMfa: boolean;
+    settingUpMfaMethod?: authService.MfaMethod;
+    isSetupMethodDialogOpen: boolean;
+    disablingMfaMethod?: authService.MfaMethod;
+    isSettingPreferredMfaMethod: boolean;
     setupError?: Error;
-    mfaSetup?: Awaited<ReturnType<typeof authService.setupMfa>>;
+    mfaAuthenticatorAppSetup?: Awaited<ReturnType<typeof authService.setupMfaAuthenticatorApp>>;
+    isPhoneNumberDialogOpen: boolean;
+    phoneVerificationCodeSentAt?: number;
+    isRemovePhoneNumberDialogOpen: boolean;
 };
 export declare const MfaContext: React.Context<MfaState & {
-    beginMfaSetup: () => void;
-    cancelMfaSetup: () => void;
-    completeMfaSetup: () => void;
-    beginDisablingMfa: () => void;
+    beginMfaSetup: (mfaMethod: authService.MfaMethod) => Promise<void>;
+    openMfaSetupMethodDialog: () => void;
+    closeMfaSetupMethodDialog: () => void;
+    beginDisablingMfaMethod: (mfaMethod: authService.MfaMethod) => void;
+    setPreferredMfaMethod: (mfaMethod: authService.MfaMethod) => Promise<void>;
+    openPhoneNumberDialog: () => void;
+    closePhoneNumberDialog: () => void;
+    savePhoneNumber: (phoneNumber: string) => Promise<void>;
+    verifyPhoneNumber: (code: string) => Promise<void>;
+    resendPhoneNumberVerificationCode: () => Promise<void>;
+    beginRemovingPhoneNumber: () => void;
+    cancelRemovingPhoneNumber: () => void;
+    completeRemovingPhoneNumber: () => Promise<void>;
+    hideSetupSuccess: () => void;
+    cancelMfaAuthenticatorAppSetup: () => void;
+    completeMfaAuthenticatorAppSetup: () => Promise<void>;
     cancelDisablingMfa: () => void;
-    completeDisablingMfa: () => void;
+    completeDisablingMfa: () => Promise<void>;
     clearMfaSetupError: () => void;
     loadMfa: () => void;
 }>;
@@ -65,19 +85,31 @@ export declare function MfaProvider({ children, isExternalIdentityProviderUser,
     isExternalIdentityProviderUser: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export default function useMfa(): MfaState & {
-    beginMfaSetup: () => void;
-    cancelMfaSetup: () => void;
-    completeMfaSetup: () => void;
-    beginDisablingMfa: () => void;
+    beginMfaSetup: (mfaMethod: authService.MfaMethod) => Promise<void>;
+    openMfaSetupMethodDialog: () => void;
+    closeMfaSetupMethodDialog: () => void;
+    beginDisablingMfaMethod: (mfaMethod: authService.MfaMethod) => void;
+    setPreferredMfaMethod: (mfaMethod: authService.MfaMethod) => Promise<void>;
+    openPhoneNumberDialog: () => void;
+    closePhoneNumberDialog: () => void;
+    savePhoneNumber: (phoneNumber: string) => Promise<void>;
+    verifyPhoneNumber: (code: string) => Promise<void>;
+    resendPhoneNumberVerificationCode: () => Promise<void>;
+    beginRemovingPhoneNumber: () => void;
+    cancelRemovingPhoneNumber: () => void;
+    completeRemovingPhoneNumber: () => Promise<void>;
+    hideSetupSuccess: () => void;
+    cancelMfaAuthenticatorAppSetup: () => void;
+    completeMfaAuthenticatorAppSetup: () => Promise<void>;
     cancelDisablingMfa: () => void;
-    completeDisablingMfa: () => void;
+    completeDisablingMfa: () => Promise<void>;
     clearMfaSetupError: () => void;
     loadMfa: () => void;
 };
 /**
  * React hook to check if the logged in user meets the MFA requirement of your
- * application. Will throw an Error if used outside of the `<MfaProvider />`
- * component.
+ * application. Will throw an Error if used outside of the
+ * `<MfaProvider />` component.
  *
  * Example
  *

package/dist/hooks/useMfa.js

@@ -1,21 +1,83 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { authService } from '../apps';
+import useLoadDataEffect from './useLoadDataEffect';
 export const MfaContext = React.createContext({
     isExternalIdentityProviderUser: false,
     isLoading: true,
     isMfaEnabled: false,
+    mfaSettings: authService.DEFAULT_MFA_SETTINGS,
+    isSetupSuccessOpen: false,
     isSettingUpMfa: false,
-    isDisablingMfa: false,
-    beginMfaSetup: () => { },
-    cancelMfaSetup: () => { },
-    completeMfaSetup: () => { },
-    beginDisablingMfa: () => { },
+    isSetupMethodDialogOpen: false,
+    isSettingPreferredMfaMethod: false,
+    isPhoneNumberDialogOpen: false,
+    isRemovePhoneNumberDialogOpen: false,
+    beginMfaSetup: async () => { },
+    openMfaSetupMethodDialog: () => { },
+    closeMfaSetupMethodDialog: () => { },
+    beginDisablingMfaMethod: () => { },
+    setPreferredMfaMethod: async () => { },
+    openPhoneNumberDialog: () => { },
+    closePhoneNumberDialog: () => { },
+    savePhoneNumber: async () => { },
+    verifyPhoneNumber: async () => { },
+    resendPhoneNumberVerificationCode: async () => { },
+    beginRemovingPhoneNumber: () => { },
+    cancelRemovingPhoneNumber: () => { },
+    completeRemovingPhoneNumber: async () => { },
+    hideSetupSuccess: () => { },
+    cancelMfaAuthenticatorAppSetup: () => { },
+    completeMfaAuthenticatorAppSetup: async () => { },
     cancelDisablingMfa: () => { },
-    completeDisablingMfa: () => { },
+    completeDisablingMfa: async () => { },
     clearMfaSetupError: () => { },
     loadMfa: () => { },
 });
+function getIsMfaEnabled(mfaSettings) {
+    return mfaSettings.authenticator.enabled || mfaSettings.sms.enabled;
+}
+function hasPreferredMfaMethod(mfaSettings) {
+    return ((mfaSettings.authenticator.enabled &&
+        mfaSettings.authenticator.preferred) ||
+        (mfaSettings.sms.enabled && mfaSettings.sms.preferred));
+}
+function enableSmsMfaInSettings(mfaSettings, smsPreferred) {
+    return {
+        ...mfaSettings,
+        sms: {
+            ...mfaSettings.sms,
+            enabled: true,
+            preferred: smsPreferred,
+        },
+    };
+}
+function enableAuthenticatorMfaInSettings(mfaSettings, authenticatorPreferred) {
+    return {
+        ...mfaSettings,
+        authenticator: {
+            enabled: true,
+            preferred: authenticatorPreferred,
+        },
+        sms: {
+            ...mfaSettings.sms,
+            preferred: authenticatorPreferred ? false : mfaSettings.sms.preferred,
+        },
+    };
+}
+function setPreferredMfaMethodInSettings(mfaSettings, mfaMethod) {
+    return {
+        ...mfaSettings,
+        authenticator: {
+            ...mfaSettings.authenticator,
+            preferred: mfaMethod === 'authenticator',
+        },
+        sms: {
+            ...mfaSettings.sms,
+            preferred: mfaMethod === 'sms',
+        },
+    };
+}
 /**
  * React Component that provides the context for the
  * `useUserMeetsMfaRequirement()` hook and `<MultiFactorAuthentication />`
@@ -61,112 +123,383 @@ export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
         isExternalIdentityProviderUser,
         isLoading: !isExternalIdentityProviderUser,
         isMfaEnabled: false,
+        mfaSettings: authService.DEFAULT_MFA_SETTINGS,
+        isSetupSuccessOpen: false,
         isSettingUpMfa: false,
-        isDisablingMfa: false,
+        isSetupMethodDialogOpen: false,
+        isSettingPreferredMfaMethod: false,
+        isPhoneNumberDialogOpen: false,
+        isRemovePhoneNumberDialogOpen: false,
     });
-    const loadMfa = React.useCallback(async (abortSignal) => {
+    const handleLoadMfa = React.useCallback(async (abortSignal) => {
+        if (isExternalIdentityProviderUser) {
+            return;
+        }
         setState((currentState) => ({
             ...currentState,
             isLoading: true,
             isMfaEnabled: false,
+            mfaSettings: authService.DEFAULT_MFA_SETTINGS,
             loadingError: undefined,
         }));
         try {
-            const newIsMfaEnabled = await authService.checkIsMfaEnabled();
-            if (!(abortSignal === null || abortSignal === void 0 ? void 0 : abortSignal.aborted)) {
+            const mfaSettings = await authService.getMfaSettings(abortSignal);
+            if (!abortSignal.aborted) {
                 setState((currentState) => ({
                     ...currentState,
                     isLoading: false,
-                    isMfaEnabled: newIsMfaEnabled,
+                    mfaSettings,
+                    isMfaEnabled: getIsMfaEnabled(mfaSettings),
                 }));
             }
         }
         catch (error) {
+            if (abortSignal.aborted) {
+                return;
+            }
             setState((currentState) => ({
                 ...currentState,
                 isLoading: false,
                 loadingError: error,
             }));
         }
-    }, []);
+    }, [isExternalIdentityProviderUser]);
+    const loadMfa = useLoadDataEffect(handleLoadMfa);
     const clearMfaSetupError = React.useCallback(() => {
         setState((currentState) => ({
             ...currentState,
             setupError: undefined,
         }));
     }, []);
-    const cancelMfaSetup = React.useCallback(() => {
+    const openMfaSetupMethodDialog = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isSetupMethodDialogOpen: true,
+        }));
+    }, []);
+    const closeMfaSetupMethodDialog = React.useCallback(() => {
         setState((currentState) => ({
             ...currentState,
-            mfaSetup: undefined,
+            isSetupMethodDialogOpen: false,
         }));
     }, []);
-    const completeMfaSetup = React.useCallback(() => {
+    const hideSetupSuccess = React.useCallback(() => {
         setState((currentState) => ({
             ...currentState,
-            isMfaEnabled: true,
-            mfaSetup: undefined,
+            isSetupSuccessOpen: false,
         }));
     }, []);
-    const beginMfaSetup = React.useCallback(async () => {
+    const cancelMfaAuthenticatorAppSetup = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            mfaAuthenticatorAppSetup: undefined,
+            settingUpMfaMethod: undefined,
+        }));
+    }, []);
+    const completeMfaAuthenticatorAppSetup = React.useCallback(async () => {
+        setState((currentState) => {
+            const authenticatorPreferred = !hasPreferredMfaMethod(currentState.mfaSettings);
+            const mfaSettings = enableAuthenticatorMfaInSettings(currentState.mfaSettings, authenticatorPreferred);
+            return {
+                ...currentState,
+                isSetupSuccessOpen: true,
+                isMfaEnabled: getIsMfaEnabled(mfaSettings),
+                mfaSettings,
+                mfaAuthenticatorAppSetup: undefined,
+                settingUpMfaMethod: undefined,
+            };
+        });
+    }, []);
+    const openPhoneNumberDialog = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isPhoneNumberDialogOpen: true,
+            phoneVerificationCodeSentAt: undefined,
+            setupError: undefined,
+        }));
+    }, []);
+    const closePhoneNumberDialog = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isPhoneNumberDialogOpen: false,
+            phoneVerificationCodeSentAt: undefined,
+        }));
+    }, []);
+    const setupSmsMfaMethod = React.useCallback(async () => {
+        let smsPreferred = false;
+        setState((currentState) => {
+            smsPreferred = !hasPreferredMfaMethod(currentState.mfaSettings);
+            return currentState;
+        });
+        await authService.setupSmsMfa({
+            preferred: smsPreferred,
+        });
+        setState((currentState) => {
+            const mfaSettings = enableSmsMfaInSettings(currentState.mfaSettings, smsPreferred);
+            return {
+                ...currentState,
+                isSetupSuccessOpen: true,
+                isSettingUpMfa: false,
+                settingUpMfaMethod: undefined,
+                isMfaEnabled: getIsMfaEnabled(mfaSettings),
+                mfaSettings,
+            };
+        });
+    }, []);
+    const savePhoneNumber = React.useCallback(async (phoneNumber) => {
+        setState((currentState) => ({
+            ...currentState,
+            setupError: undefined,
+        }));
+        try {
+            const { isPhoneNumberVerified } = await authService.updateUserPhoneNumber(phoneNumber);
+            if (!isPhoneNumberVerified) {
+                setState((currentState) => ({
+                    ...currentState,
+                    phoneVerificationCodeSentAt: Date.now(),
+                    mfaSettings: {
+                        ...currentState.mfaSettings,
+                        sms: {
+                            ...currentState.mfaSettings.sms,
+                            phoneNumber,
+                            isPhoneNumberVerified: false,
+                        },
+                    },
+                }));
+                return;
+            }
+            setState((currentState) => ({
+                ...currentState,
+                mfaSettings: {
+                    ...currentState.mfaSettings,
+                    sms: {
+                        ...currentState.mfaSettings.sms,
+                        phoneNumber,
+                        isPhoneNumberVerified,
+                    },
+                },
+                isPhoneNumberDialogOpen: false,
+                phoneVerificationCodeSentAt: undefined,
+            }));
+            await setupSmsMfaMethod();
+        }
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                setupError: error,
+            }));
+        }
+    }, [setupSmsMfaMethod]);
+    const verifyPhoneNumber = React.useCallback(async (code) => {
+        setState((currentState) => ({
+            ...currentState,
+            setupError: undefined,
+        }));
+        try {
+            await authService.verifyUserPhoneNumber(code);
+            setState((currentState) => ({
+                ...currentState,
+                mfaSettings: {
+                    ...currentState.mfaSettings,
+                    sms: {
+                        ...currentState.mfaSettings.sms,
+                        isPhoneNumberVerified: true,
+                    },
+                },
+                isPhoneNumberDialogOpen: false,
+                phoneVerificationCodeSentAt: undefined,
+            }));
+            await setupSmsMfaMethod();
+        }
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                setupError: error,
+            }));
+        }
+    }, [setupSmsMfaMethod]);
+    const resendPhoneNumberVerificationCode = React.useCallback(async () => {
+        setState((currentState) => ({
+            ...currentState,
+            setupError: undefined,
+            phoneVerificationCodeSentAt: Date.now(),
+        }));
+        try {
+            await authService.sendPhoneNumberVerificationCode();
+        }
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                setupError: error,
+            }));
+        }
+    }, []);
+    const beginRemovingPhoneNumber = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isRemovePhoneNumberDialogOpen: true,
+            setupError: undefined,
+        }));
+    }, []);
+    const cancelRemovingPhoneNumber = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isRemovePhoneNumberDialogOpen: false,
+        }));
+    }, []);
+    const completeRemovingPhoneNumber = React.useCallback(async () => {
+        setState((currentState) => ({
+            ...currentState,
+            setupError: undefined,
+        }));
+        try {
+            await authService.removeUserPhoneNumber();
+            setState((currentState) => ({
+                ...currentState,
+                isRemovePhoneNumberDialogOpen: false,
+                mfaSettings: {
+                    ...currentState.mfaSettings,
+                    sms: {
+                        ...currentState.mfaSettings.sms,
+                        phoneNumber: undefined,
+                        isPhoneNumberVerified: false,
+                    },
+                },
+            }));
+        }
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                setupError: error,
+            }));
+        }
+    }, []);
+    const beginMfaSetup = React.useCallback(async (mfaMethod) => {
         setState((currentState) => ({
             ...currentState,
             isSettingUpMfa: true,
-            mfaSetup: undefined,
+            settingUpMfaMethod: mfaMethod,
+            mfaAuthenticatorAppSetup: undefined,
             setupError: undefined,
         }));
         try {
-            const newMfaSetup = await authService.setupMfa();
+            let mfaSettings = authService.DEFAULT_MFA_SETTINGS;
+            setState((currentState) => {
+                mfaSettings = currentState.mfaSettings;
+                return currentState;
+            });
+            if (mfaMethod === 'sms') {
+                if (!mfaSettings.sms.phoneNumber ||
+                    !mfaSettings.sms.isPhoneNumberVerified) {
+                    setState((currentState) => ({
+                        ...currentState,
+                        isSettingUpMfa: false,
+                        settingUpMfaMethod: undefined,
+                        isSetupMethodDialogOpen: false,
+                        isPhoneNumberDialogOpen: true,
+                    }));
+                    return;
+                }
+                await setupSmsMfaMethod();
+                setState((currentState) => ({
+                    ...currentState,
+                    isSetupMethodDialogOpen: false,
+                }));
+                return;
+            }
+            const hasPreferredMethod = hasPreferredMfaMethod(mfaSettings);
+            const newMfaAuthenticatorAppSetup = await authService.setupMfaAuthenticatorApp({
+                preferred: !hasPreferredMethod,
+            });
             setState((currentState) => ({
                 ...currentState,
                 isSettingUpMfa: false,
-                mfaSetup: newMfaSetup,
+                isSetupMethodDialogOpen: false,
+                mfaAuthenticatorAppSetup: newMfaAuthenticatorAppSetup,
             }));
         }
         catch (error) {
             setState((currentState) => ({
                 ...currentState,
                 isSettingUpMfa: false,
+                settingUpMfaMethod: undefined,
                 setupError: error,
             }));
         }
-    }, []);
-    const beginDisablingMfa = React.useCallback(() => {
+    }, [setupSmsMfaMethod]);
+    const disablingMfaMethodRef = React.useRef(undefined);
+    const beginDisablingMfaMethod = React.useCallback((mfaMethod) => {
+        disablingMfaMethodRef.current = mfaMethod;
         setState((currentState) => ({
             ...currentState,
-            isDisablingMfa: true,
+            disablingMfaMethod: mfaMethod,
         }));
     }, []);
     const cancelDisablingMfa = React.useCallback(() => {
+        disablingMfaMethodRef.current = undefined;
         setState((currentState) => ({
             ...currentState,
-            isDisablingMfa: false,
+            disablingMfaMethod: undefined,
         }));
     }, []);
     const completeDisablingMfa = React.useCallback(async () => {
-        await authService.disableMfa();
+        const disablingMfaMethod = disablingMfaMethodRef.current;
+        if (!disablingMfaMethod) {
+            return;
+        }
+        await authService.disableMfaMethod(disablingMfaMethod);
+        const mfaSettings = await authService.getMfaSettings();
+        disablingMfaMethodRef.current = undefined;
         setState((currentState) => ({
             ...currentState,
-            isDisablingMfa: false,
-            isMfaEnabled: false,
+            disablingMfaMethod: undefined,
+            mfaSettings,
+            isMfaEnabled: getIsMfaEnabled(mfaSettings),
         }));
     }, []);
-    React.useEffect(() => {
-        if (isExternalIdentityProviderUser) {
-            return;
+    const setPreferredMfaMethod = React.useCallback(async (mfaMethod) => {
+        setState((currentState) => ({
+            ...currentState,
+            isSettingPreferredMfaMethod: true,
+            setupError: undefined,
+        }));
+        try {
+            await authService.setPreferredMfaMethod(mfaMethod);
+            setState((currentState) => ({
+                ...currentState,
+                isSettingPreferredMfaMethod: false,
+                mfaSettings: setPreferredMfaMethodInSettings(currentState.mfaSettings, mfaMethod),
+            }));
+        }
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                isSettingPreferredMfaMethod: false,
+                setupError: error,
+            }));
         }
-        loadMfa();
-        return () => { };
-    }, [isExternalIdentityProviderUser, loadMfa]);
+    }, []);
     const value = React.useMemo(() => {
         return {
             ...state,
             clearMfaSetupError,
             loadMfa,
             beginMfaSetup,
-            cancelMfaSetup,
-            completeMfaSetup,
-            beginDisablingMfa,
+            openMfaSetupMethodDialog,
+            closeMfaSetupMethodDialog,
+            beginDisablingMfaMethod,
+            setPreferredMfaMethod,
+            openPhoneNumberDialog,
+            closePhoneNumberDialog,
+            savePhoneNumber,
+            verifyPhoneNumber,
+            resendPhoneNumberVerificationCode,
+            beginRemovingPhoneNumber,
+            cancelRemovingPhoneNumber,
+            completeRemovingPhoneNumber,
+            hideSetupSuccess,
+            cancelMfaAuthenticatorAppSetup,
+            completeMfaAuthenticatorAppSetup,
             cancelDisablingMfa,
             completeDisablingMfa,
         };
@@ -175,21 +508,33 @@ export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
         clearMfaSetupError,
         loadMfa,
         beginMfaSetup,
-        cancelMfaSetup,
-        completeMfaSetup,
-        beginDisablingMfa,
+        openMfaSetupMethodDialog,
+        closeMfaSetupMethodDialog,
+        beginDisablingMfaMethod,
+        setPreferredMfaMethod,
+        openPhoneNumberDialog,
+        closePhoneNumberDialog,
+        savePhoneNumber,
+        verifyPhoneNumber,
+        resendPhoneNumberVerificationCode,
+        beginRemovingPhoneNumber,
+        cancelRemovingPhoneNumber,
+        completeRemovingPhoneNumber,
+        hideSetupSuccess,
+        cancelMfaAuthenticatorAppSetup,
+        completeMfaAuthenticatorAppSetup,
         cancelDisablingMfa,
         completeDisablingMfa,
     ]);
-    return _jsx(MfaContext.Provider, { value: value, children: children });
+    return (_jsx(MfaContext.Provider, { value: value, children: children }));
 }
 export default function useMfa() {
     return React.useContext(MfaContext);
 }
 /**
  * React hook to check if the logged in user meets the MFA requirement of your
- * application. Will throw an Error if used outside of the `<MfaProvider />`
- * component.
+ * application. Will throw an Error if used outside of the
+ * `<MfaProvider />` component.
  *
  * Example
  *