feat: update passwordless to support OTP based MFA (#759)

* chore: update to mfa branch of web-js

* feat: mfa recipe setup

* feat: add support for firstFactor

* fix: fix chooseComponentBasedOnFirstFactors to properly get the max count

* feat: navigation based on claim validation failures

* feat: implement factor chooser screen

* feat: factor chooser fixes and updates

* feat: update pwless to support otp based mfa

* feat: add back button to factor chooser and filter the options

* feat: update how back buttons are styled

* test: update how back button is selected in tests

* feat: self-review fixes & updates

* feat: self-review fixes&cleanup

* fix: firstFactors + test helpers

* fix: small test based fixes

* feat: clean up first factor handling

* refactor: rename passwordlessFirstFactors since it's not only first factors

* feat: self-review fixes

* chore: add mfa ui to size limits

* refactor: remove updates that will be added in other PRs + simplifications

* chore: increase size limits

* test: add reset method to mfa recipe

* feat: make sure firstFactor conflicts hit user error boundaries

* feat: update design and fix font-weight issues

* chore: update web-js dep

* feat: update design

* refactor: self-review fixes

* refactor: self-review fixes

* chore: update changelog

* feat: use redirect info if available on mfa success

* refactor: use redirectToFactor instead of re-implementing

* fix: add missing param into redirectToFactorChooser call

* fix: override and routing fixes

* feat: allow showing matching sub-recipe components if not on websitebasepath

* fix: exposing mfa in tppwless + cleanup/refactor

CHANGELOG.md

@@ -35,6 +35,25 @@ To use this you'll need compatible versions:
 -   Refactored/renamed some styling options (`resetPasswordHeaderTitle` -> `headerTitle withBackButton`)
 -   Added a `useShadowDom` prop to the `AccessDeniedScreen`
 -   Added an `error` prop to the `AccessDeniedScreen` that can be used to describe the reason access is denied.
+-   Added new MFA related components to Passwordless
+    -   Added new prop `mfaFeature` to recipe config
+        -   `disableDefaultUI`: can be used to disable paths: `${websiteBasePath}/mfa/otp-phone`, `${websiteBasePath}/mfa/otp-email`
+        -   `style`: is applied on top of normal sign in/up styles on the MFA paths
+    -   New embeddable components:
+        -   `MfaOtpPhone` (by default handling path `${websiteBasePath}/mfa/otp-phone`)
+        -   `MfaOtpEmail` (by default handling path `${websiteBasePath}/mfa/otp-email`)
+    -   New overrideable components:
+        -   `PasswordlessMFAHeader_Override`
+        -   `PasswordlessMFAFooter_Override`
+        -   `PasswordlessMFAOTPHeader_Override`
+        -   `PasswordlessMFAOTPFooter_Override`
+    -   Please note, that during MFA we re-use the existing overrideable comps for the form section:
+        -   `PasswordlessEmailForm_Override`
+        -   `PasswordlessPhoneForm_Override`
+        -   `PasswordlessEmailOrPhoneForm_Override`
+-   Removed an `ErrorBoundary` wrapping all our feature components to make sure all errors are properly catchable by the app
+-   Added a `footer` prop to `EmailOrPhoneForm`, `EmailForm` and `PhoneForm` which is used to override the default sign in/up footers in case the component is for MFA
+-   The passwordless and thirdpartypasswordless sign in/up screens now respect the first configuration (defined in the `MultiFactorAuth` recipe or in the tenant information) when selecting the available contact methods.
 -   Fixed a font loading issue, that caused apps using the default (Rubik) font to appear with the incorrect font weights
 -   Some default styling has changed related to how fonts/font-weights are applied
 

examples/for-tests-react-16/src/App.js

@@ -767,6 +767,10 @@ function getThirdPartyPasswordlessConfigs({ staticProviderList, disableDefaultUI
             disableDefaultUI,
             style: theme.style,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }
 
@@ -845,6 +849,10 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
             disableDefaultUI,
             style: theme.style,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }
 

examples/for-tests/src/App.js

@@ -991,6 +991,10 @@ function getThirdPartyPasswordlessConfigs({ staticProviderList, disableDefaultUI
             disableDefaultUI,
             style: theme,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }
 
@@ -1078,6 +1082,10 @@ function getPasswordlessConfigs({ disableDefaultUI }) {
             disableDefaultUI,
             style: theme,
         },
+        mfaFeature: {
+            disableDefaultUI,
+            style: theme,
+        },
     });
 }