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

package/dist/hooks/useMfa.js

@@ -1,21 +1,82 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { authService } from '../apps';
+import { mfaService } from '../apps';
+import useLoadDataEffect from './useLoadDataEffect';
 export const MfaContext = React.createContext({
     isExternalIdentityProviderUser: false,
     isLoading: true,
     isMfaEnabled: false,
+    mfaSettings: mfaService.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 () => { },
+    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 />`
@@ -32,23 +93,36 @@ export const MfaContext = React.createContext({
  *   useUserMeetsMfaRequirement,
  * } from '@oneblink/apps-react'
  *
- * function Component() {
- *   const { isLoading, userMeetsMfaRequirement } =
- *     useUserMeetsMfaRequirement(true)
- *   // use MFA Requirement details here
+ * function Component({ teamMemberMfaRequirement }) {
+ *   const { mfaSetupRequired, isLoading, loadingError, refreshMfa } =
+ *     useUserMeetsMfaRequirement(teamMemberMfaRequirement)
+ *
+ *   if (isLoading) {
+ *     return <Loading />
+ *   }
+ *
+ *   if (loadingError) {
+ *     return <Error onRetry={refreshMfa} />
+ *   }
+ *
+ *   if (mfaSetupRequired) {
+ *     return <ConfigureMfa />
+ *   }
+ *
+ *   return <Application />
  * }
  *
- * function App() {
+ * function App({ teamMemberMfaRequirement }) {
  *   return (
  *     <MfaProvider isExternalIdentityProviderUser={false}>
- *       <Component />
+ *       <Component teamMemberMfaRequirement={teamMemberMfaRequirement} />
  *     </MfaProvider>
  *   )
  * }
  *
  * const root = document.getElementById('root')
  * if (root) {
- *   ReactDOM.render(<App />, root)
+ *   ReactDOM.render(<App teamMemberMfaRequirement={mfaRequirement} />, root)
  * }
  * ```
  *
@@ -61,112 +135,366 @@ export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
         isExternalIdentityProviderUser,
         isLoading: !isExternalIdentityProviderUser,
         isMfaEnabled: false,
+        mfaSettings: mfaService.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: mfaService.DEFAULT_MFA_SETTINGS,
             loadingError: undefined,
         }));
         try {
-            const newIsMfaEnabled = await authService.checkIsMfaEnabled();
-            if (!(abortSignal === null || abortSignal === void 0 ? void 0 : abortSignal.aborted)) {
+            const mfaSettings = await mfaService.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,
+            isSetupMethodDialogOpen: false,
+        }));
+    }, []);
+    const hideSetupSuccess = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isSetupSuccessOpen: false,
+        }));
+    }, []);
+    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 mfaService.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 mfaService.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 mfaService.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 beginRemovingPhoneNumber = React.useCallback(() => {
+        setState((currentState) => ({
+            ...currentState,
+            isRemovePhoneNumberDialogOpen: true,
+            setupError: undefined,
+        }));
+    }, []);
+    const cancelRemovingPhoneNumber = React.useCallback(() => {
         setState((currentState) => ({
             ...currentState,
-            mfaSetup: undefined,
+            isRemovePhoneNumberDialogOpen: false,
         }));
     }, []);
-    const completeMfaSetup = React.useCallback(() => {
+    const completeRemovingPhoneNumber = React.useCallback(async () => {
         setState((currentState) => ({
             ...currentState,
-            isMfaEnabled: true,
-            mfaSetup: undefined,
+            setupError: undefined,
         }));
+        try {
+            await mfaService.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 () => {
+    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 = mfaService.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 mfaService.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 mfaService.disableMfaMethod(disablingMfaMethod);
+        const mfaSettings = await mfaService.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 mfaService.setPreferredMfaMethod(mfaMethod);
+            setState((currentState) => ({
+                ...currentState,
+                isSettingPreferredMfaMethod: false,
+                mfaSettings: setPreferredMfaMethodInSettings(currentState.mfaSettings, mfaMethod),
+            }));
         }
-        loadMfa();
-        return () => { };
-    }, [isExternalIdentityProviderUser, loadMfa]);
+        catch (error) {
+            setState((currentState) => ({
+                ...currentState,
+                isSettingPreferredMfaMethod: false,
+                setupError: error,
+            }));
+        }
+    }, []);
     const value = React.useMemo(() => {
         return {
             ...state,
             clearMfaSetupError,
             loadMfa,
             beginMfaSetup,
-            cancelMfaSetup,
-            completeMfaSetup,
-            beginDisablingMfa,
+            openMfaSetupMethodDialog,
+            closeMfaSetupMethodDialog,
+            beginDisablingMfaMethod,
+            setPreferredMfaMethod,
+            openPhoneNumberDialog,
+            closePhoneNumberDialog,
+            savePhoneNumber,
+            verifyPhoneNumber,
+            beginRemovingPhoneNumber,
+            cancelRemovingPhoneNumber,
+            completeRemovingPhoneNumber,
+            hideSetupSuccess,
+            cancelMfaAuthenticatorAppSetup,
+            completeMfaAuthenticatorAppSetup,
             cancelDisablingMfa,
             completeDisablingMfa,
         };
@@ -175,9 +503,20 @@ export function MfaProvider({ children, isExternalIdentityProviderUser, }) {
         clearMfaSetupError,
         loadMfa,
         beginMfaSetup,
-        cancelMfaSetup,
-        completeMfaSetup,
-        beginDisablingMfa,
+        openMfaSetupMethodDialog,
+        closeMfaSetupMethodDialog,
+        beginDisablingMfaMethod,
+        setPreferredMfaMethod,
+        openPhoneNumberDialog,
+        closePhoneNumberDialog,
+        savePhoneNumber,
+        verifyPhoneNumber,
+        beginRemovingPhoneNumber,
+        cancelRemovingPhoneNumber,
+        completeRemovingPhoneNumber,
+        hideSetupSuccess,
+        cancelMfaAuthenticatorAppSetup,
+        completeMfaAuthenticatorAppSetup,
         cancelDisablingMfa,
         completeDisablingMfa,
     ]);
@@ -187,35 +526,64 @@ 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.
+ * React hook to determine whether the logged in user must set up MFA before
+ * accessing your application. Reads MFA settings from the `<MfaProvider />`
+ * context. Will throw an Error if used outside of `<MfaProvider />`.
  *
- * Example
+ * Users signed in via an external identity provider are not required to set up
+ * MFA.
+ *
+ * #### Example
  *
  * ```js
- * import { useUserMeetsMfaRequirement } from '@oneblink/apps-react'
+ * import { MfaProvider, useUserMeetsMfaRequirement } from '@oneblink/apps-react'
+ *
+ * function Component({ teamMemberMfaRequirement }) {
+ *   const { mfaSetupRequired, isLoading, loadingError, refreshMfa } =
+ *     useUserMeetsMfaRequirement(teamMemberMfaRequirement)
+ *
+ *   if (isLoading) {
+ *     return <Loading />
+ *   }
  *
- * const isMfaRequired = true
+ *   if (loadingError) {
+ *     return <Error onRetry={refreshMfa} />
+ *   }
  *
- * function Component() {
- *   const userMeetsMfaRequirement =
- *     useUserMeetsMfaRequirement(isMfaRequired)
+ *   if (mfaSetupRequired) {
+ *     return <ConfigureMfa />
+ *   }
+ *
+ *   return <Application />
  * }
  * ```
  *
- * @returns
+ * @param mfaRequirement - The MFA requirement to enforce, e.g. from your
+ * organisation or app settings.
+ * @returns Whether MFA setup is required, along with loading state from the MFA
+ * provider.
  * @group Hooks
  */
-export function useUserMeetsMfaRequirement(isMfaRequired) {
-    const context = React.useContext(MfaContext);
-    if (!context) {
-        throw new Error(`"useUserMeetsMfaRequirement" hook was used outside of the "<MfaProvider />" component's children.`);
-    }
-    const { isMfaEnabled, isExternalIdentityProviderUser } = context;
-    if (!isMfaRequired || isExternalIdentityProviderUser) {
-        return true;
-    }
-    return isMfaEnabled;
+export function useUserMeetsMfaRequirement(mfaRequirement) {
+    const { isLoading, loadingError, mfaSettings, loadMfa, isExternalIdentityProviderUser, } = useMfa();
+    return React.useMemo(() => {
+        const mfaRequired = mfaService.isMfaRequired(mfaRequirement);
+        const shouldCheckMfa = mfaRequired && !isExternalIdentityProviderUser;
+        const meetsRequirement = mfaService.userMeetsMfaRequirement(mfaRequirement, mfaSettings);
+        const mfaSetupRequired = shouldCheckMfa && !isLoading && !loadingError && !meetsRequirement;
+        return {
+            mfaSetupRequired,
+            isLoading: shouldCheckMfa && isLoading,
+            loadingError: shouldCheckMfa ? loadingError : undefined,
+            refreshMfa: loadMfa,
+        };
+    }, [
+        mfaRequirement,
+        isExternalIdentityProviderUser,
+        mfaSettings,
+        isLoading,
+        loadingError,
+        loadMfa,
+    ]);
 }
 //# sourceMappingURL=useMfa.js.map