@reachfive/identity-ui 1.26.0 → 1.26.1

package/es/identity-ui.js

@@ -1,6 +1,6 @@
 /**
- * @reachfive/identity-ui - v1.26.0
- * Compiled Tue, 09 Apr 2024 15:08:41 UTC
+ * @reachfive/identity-ui - v1.26.1
+ * Compiled Fri, 19 Apr 2024 13:15:48 UTC
  *
  * Copyright (c) ReachFive.
  *
@@ -4551,6 +4551,7 @@ function isValued(v, rawProperty = "raw") {
   const unwrap = v !== null && typeof v === "object" ? v[rawProperty] : v;
   return unwrap !== null && unwrap !== void 0 && unwrap !== "" && !Number.isNaN(unwrap) && (Array.isArray(unwrap) ? unwrap.length > 0 : true);
 }
+const isCustomIdentifier = (identifier) => "customIdentifier" in identifier;
 const specializeIdentifier = (identifier) => isValidEmail(identifier) ? { email: identifier } : libphonenumber.isValidNumber(identifier) ? { phoneNumber: identifier.replace(/\s+/g, "") } : { customIdentifier: identifier };
 function specializeIdentifierData(data) {
   if ("identifier" in data && typeof data.identifier === "string") {
@@ -5243,7 +5244,7 @@ function createForm(config) {
       }, () => callback && callback(!this.state.hasErrors));
     }
     render() {
-      const { submitLabel, i18n, fieldValidationDebounce } = this.props;
+      const { submitLabel, allowWebAuthnLogin, i18n, fieldValidationDebounce } = this.props;
       const { errorMessage, isLoading, fields } = this.state;
       return /* @__PURE__ */ React.createElement(Form, { noValidate: true, onSubmit: this.handleSubmit }, errorMessage && /* @__PURE__ */ React.createElement(Error$1, null, errorMessage), this.allFields.map((field) => !field.staticContent ? field.render({
         state: fields[field.key],
@@ -5254,7 +5255,7 @@ function createForm(config) {
           }, fieldValidationDebounce)(this);
         },
         ...this.props.sharedProps
-      }) : field.staticContent), /* @__PURE__ */ React.createElement(PrimaryButton, { disabled: isLoading }, i18n(submitLabel)));
+      }) : field.staticContent), !allowWebAuthnLogin && /* @__PURE__ */ React.createElement(PrimaryButton, { disabled: isLoading }, i18n(submitLabel)), allowWebAuthnLogin && this.props.webAuthnButtons(isLoading, this.handleClick));
     }
   }
   __publicField$8(FormComponent, "defaultProps", {
@@ -5948,7 +5949,7 @@ const simpleField = ({ type, placeholder, ...config }) => createField({
   }
 });
 
-const ForgotPasswordWrapper = styled.div`
+const ForgotPasswordWrapper$1 = styled.div`
     margin-bottom: ${(props) => props.theme.spacing}px;
     text-align: right;
     ${(props) => props.floating && `
@@ -5989,7 +5990,7 @@ const LoginForm = createForm({
         canShowPassword
       }),
       showForgotPassword && {
-        staticContent: /* @__PURE__ */ React.createElement(ForgotPasswordWrapper, { key: "forgot-password", floating: showRememberMe }, /* @__PURE__ */ React.createElement(Link, { target: "forgot-password" }, i18n("login.forgotPasswordLink")))
+        staticContent: /* @__PURE__ */ React.createElement(ForgotPasswordWrapper$1, { key: "forgot-password", floating: showRememberMe }, /* @__PURE__ */ React.createElement(Link, { target: "forgot-password" }, i18n("login.forgotPasswordLink")))
       },
       showRememberMe && checkboxField({
         key: "auth.persistent",
@@ -6059,6 +6060,290 @@ const LoginView = ({
   ), allowSignup && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement("span", null, i18n("login.signupLinkPrefix")), "\xA0", /* @__PURE__ */ React.createElement(Link, { target: "signup", controller }, i18n("login.signupLink"))));
 };
 
+var _path$3, _path2$1;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var SvgFingerprint = function SvgFingerprint(props) {
+  return /*#__PURE__*/reactExports.createElement("svg", _extends$3({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/reactExports.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0z"
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/reactExports.createElement("path", {
+    d: "M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2a.506.506 0 0 1 .2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67a.49.49 0 0 1-.44.28M3.5 9.72a.499.499 0 0 1-.41-.79c.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25a.5.5 0 0 1-.12.7c-.23.16-.54.11-.7-.12a9.4 9.4 0 0 0-3.39-2.94c-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21m6.25 12.07a.47.47 0 0 1-.35-.15c-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39s-4.66 1.97-4.66 4.39c0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15m7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12M14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1a7.3 7.3 0 0 1-2.17-5.22c0-1.62 1.38-2.94 3.08-2.94s3.08 1.32 3.08 2.94c0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29a11.1 11.1 0 0 1-.73-3.96c0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38"
+  })));
+};
+
+var _path$2, _path2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var SvgKeyboard = function SvgKeyboard(props) {
+  return /*#__PURE__*/reactExports.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/reactExports.createElement("path", {
+    d: "M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m-9 3h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-1 2H5v-2h2zm0-3H5V8h2zm9 7H8v-2h8zm0-4h-2v-2h2zm0-3h-2V8h2zm3 3h-2v-2h2zm0-3h-2V8h2z"
+  })), _path2 || (_path2 = /*#__PURE__*/reactExports.createElement("path", {
+    fill: "none",
+    d: "M0 0h24v24H0zm0 0h24v24H0z"
+  })));
+};
+
+const iconStyle$1 = `
+    width: 40px;
+    height: 40px;
+`;
+const FingerPrintIcon = styled(SvgFingerprint)`${iconStyle$1}`;
+const KeyboardIcon = styled(SvgKeyboard)`${iconStyle$1}`;
+const PrimaryButtonWithIcon = styled(({
+  type = "submit",
+  disabled = false,
+  text,
+  children,
+  className,
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      type,
+      disabled,
+      ...props,
+      className: classes(["r5-button-with-icon"], className),
+      background: theme.backgroundColor,
+      border: theme.backgroundColor,
+      color: theme.primaryColor
+    },
+    children,
+    text && /* @__PURE__ */ React.createElement("span", { className: "r5-button-text" }, text)
+  );
+})`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .r5-button-text {
+        margin-left: 10px;
+        text-transform: uppercase;
+    }
+`;
+const ButtonsSeparator = styled.div`
+    text-align: center;
+    color: ${(props) => props.theme.mutedTextColor}
+`;
+const WebAuthnLoginViewButtons = styled(({ disabled, onPasswordClick, className, ...props }) => {
+  const i18n = useI18n();
+  return /* @__PURE__ */ React.createElement("div", { className: classes(["r5-webauthn-login-buttons"], className) }, /* @__PURE__ */ React.createElement(
+    PrimaryButtonWithIcon,
+    {
+      type: "submit",
+      dataTestId: "webauthn-button",
+      title: i18n("login.withBiometrics"),
+      disabled,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(FingerPrintIcon, null)
+  ), /* @__PURE__ */ React.createElement(ButtonsSeparator, null, i18n("or")), /* @__PURE__ */ React.createElement(
+    PrimaryButtonWithIcon,
+    {
+      dataTestId: "password-button",
+      title: i18n("login.withPassword"),
+      disabled,
+      onClick: onPasswordClick
+    },
+    /* @__PURE__ */ React.createElement(KeyboardIcon, null)
+  ));
+})`
+    display: flex;
+    align-items: center;
+
+    & > :not(:last-child) {
+        margin-right: 20px;
+    }
+`;
+const WebAuthnSignupViewButtons = styled(({ onBiometricClick, onPasswordClick, className }) => {
+  const i18n = useI18n();
+  return /* @__PURE__ */ React.createElement("div", { className: classes(["r5-webauthn-signup-buttons"], className) }, /* @__PURE__ */ React.createElement(
+    PrimaryButtonWithIcon,
+    {
+      dataTestId: "webauthn-button",
+      onClick: onBiometricClick,
+      title: i18n("signup.withBiometrics"),
+      text: i18n("biometrics")
+    },
+    /* @__PURE__ */ React.createElement(FingerPrintIcon, null)
+  ), /* @__PURE__ */ React.createElement(Separator, { text: i18n("or") }), /* @__PURE__ */ React.createElement(
+    PrimaryButtonWithIcon,
+    {
+      dataTestId: "password-button",
+      onClick: onPasswordClick,
+      title: i18n("signup.withPassword"),
+      text: i18n("password")
+    },
+    /* @__PURE__ */ React.createElement(KeyboardIcon, null)
+  ));
+})``;
+
+const LoginWithWebAuthnForm = createForm({
+  prefix: "r5-login-",
+  fields({ showIdentifier = true, defaultIdentifier, config }) {
+    return [
+      identifierField(
+        {
+          defaultValue: defaultIdentifier,
+          withPhoneNumber: showIdentifier && config.sms,
+          required: true,
+          autoComplete: "username webauthn"
+        },
+        config
+      )
+    ];
+  },
+  allowWebAuthnLogin: true
+});
+const LoginWithWebAuthnView = ({ acceptTos, allowSignup = true, auth, showLabels = false, socialProviders }) => {
+  const coreClient = useReachfive();
+  const { goTo } = useRouting();
+  const i18n = useI18n();
+  const session = useSession();
+  const controller = new AbortController();
+  const signal = controller.signal;
+  React.useEffect(() => {
+    coreClient.loginWithWebAuthn({
+      conditionalMediation: "preferred",
+      auth: {
+        ...auth
+      },
+      signal
+    }).catch(() => void 0);
+  }, [coreClient, auth, signal]);
+  const handleWebAuthnLogin = React.useCallback(
+    (data) => {
+      const { auth: dataAuth, ...identifier } = specializeIdentifierData(data);
+      if (isCustomIdentifier(identifier)) {
+        console.error("Custom identifier is not a valid WebAuthn identifier.");
+        return Promise.reject(new Error("Custom identifier is not a valid WebAuthn identifier."));
+      }
+      return coreClient.loginWithWebAuthn({
+        ...identifier,
+        auth: {
+          ...dataAuth,
+          ...auth
+        }
+      });
+    },
+    [coreClient, auth]
+  );
+  const redirectToPasswordLoginView = reactExports.useCallback(
+    (data) => {
+      const username = "identifier" in data ? data.identifier : "email" in data ? data.email : "";
+      goTo("login-with-password", { username });
+    },
+    [goTo]
+  );
+  const defaultIdentifier = session?.lastLoginType === "password" ? session.email : void 0;
+  const webAuthnButtons = (disabled, handleClick) => /* @__PURE__ */ React.createElement(
+    WebAuthnLoginViewButtons,
+    {
+      disabled,
+      onPasswordClick: handleClick
+    }
+  );
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, i18n("login.title")), socialProviders && socialProviders.length > 0 && /* @__PURE__ */ React.createElement(SocialButtons, { providers: socialProviders, auth, acceptTos }), socialProviders && socialProviders.length > 0 && /* @__PURE__ */ React.createElement(Separator, { text: i18n("or") }), /* @__PURE__ */ React.createElement(
+    LoginWithWebAuthnForm,
+    {
+      showLabels,
+      defaultIdentifier,
+      handler: handleWebAuthnLogin,
+      redirect: redirectToPasswordLoginView,
+      webAuthnButtons
+    }
+  ), allowSignup && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement("span", null, i18n("login.signupLinkPrefix")), "\xA0", /* @__PURE__ */ React.createElement(Link, { controller, target: "signup" }, i18n("login.signupLink"))));
+};
+
+const ForgotPasswordWrapper = styled.div`
+    margin-bottom: ${(props) => props.theme.spacing}px;
+    text-align: right;
+    ${(props) => props.floating && `
+        position: absolute;
+        right: 0;
+    `};
+`;
+const LoginWithPasswordForm = createForm({
+  prefix: "r5-login-",
+  fields({ username, showRememberMe, canShowPassword, showForgotPassword, i18n, config }) {
+    return [
+      config.sms ? identifierField({
+        key: "identifier",
+        defaultValue: username,
+        withPhoneNumber: true,
+        readOnly: true
+      }, config) : identifierField({
+        key: "identifier",
+        defaultValue: username,
+        withPhoneNumber: false,
+        readOnly: true
+      }, config),
+      simplePasswordField({
+        key: "password",
+        label: "password",
+        autoComplete: "current-password",
+        canShowPassword
+      }),
+      showForgotPassword && {
+        staticContent: /* @__PURE__ */ React.createElement(ForgotPasswordWrapper, { key: "forgot-password", floating: showRememberMe }, /* @__PURE__ */ React.createElement(Link, { target: "forgot-password" }, i18n("login.forgotPasswordLink")))
+      },
+      showRememberMe && checkboxField({
+        key: "auth.persistent",
+        label: "rememberMe",
+        defaultValue: false
+      })
+    ];
+  },
+  submitLabel: "login.submitLabel"
+});
+const LoginWithPasswordView = ({
+  allowForgotPassword = true,
+  auth,
+  canShowPassword,
+  recaptcha_enabled = false,
+  recaptcha_site_key,
+  showLabels,
+  showRememberMe
+}) => {
+  const i18n = useI18n();
+  const coreClient = useReachfive();
+  const { goTo, params } = useRouting();
+  const { username } = params;
+  reactExports.useLayoutEffect(() => {
+    importGoogleRecaptchaScript(recaptcha_site_key);
+  }, [recaptcha_site_key]);
+  const callback = (data) => {
+    const { auth: dataAuth, ...specializedData } = specializeIdentifierData(data);
+    return coreClient.loginWithPassword({
+      ...specializedData,
+      captchaToken: data.captchaToken,
+      auth: {
+        ...dataAuth,
+        ...auth
+      }
+    }).then((res) => res?.stepUpToken ? goTo("fa-selection", { token: res.stepUpToken, amr: res.amr ?? [] }) : res);
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, i18n("login.title")), /* @__PURE__ */ React.createElement(
+    LoginWithPasswordForm,
+    {
+      username,
+      showLabels,
+      showRememberMe,
+      showForgotPassword: allowForgotPassword,
+      canShowPassword,
+      handler: (data) => ReCaptcha.handle(data, { recaptcha_enabled, recaptcha_site_key }, callback, "login")
+    }
+  ), /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: "login-with-web-authn" }, i18n("login.password.userAnotherIdentifier"))));
+};
+
 const SelectField = (props) => {
   const {
     value = "",
@@ -6948,100 +7233,10 @@ const PasswordSignupForm = ({
   );
 };
 
-var _path$3, _path2$1;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-var SvgFingerprint = function SvgFingerprint(props) {
-  return /*#__PURE__*/reactExports.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
-    viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/reactExports.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  })), _path2$1 || (_path2$1 = /*#__PURE__*/reactExports.createElement("path", {
-    d: "M17.81 4.47c-.08 0-.16-.02-.23-.06C15.66 3.42 14 3 12.01 3c-1.98 0-3.86.47-5.57 1.41-.24.13-.54.04-.68-.2a.506.506 0 0 1 .2-.68C7.82 2.52 9.86 2 12.01 2c2.13 0 3.99.47 6.03 1.52.25.13.34.43.21.67a.49.49 0 0 1-.44.28M3.5 9.72a.499.499 0 0 1-.41-.79c.99-1.4 2.25-2.5 3.75-3.27C9.98 4.04 14 4.03 17.15 5.65c1.5.77 2.76 1.86 3.75 3.25a.5.5 0 0 1-.12.7c-.23.16-.54.11-.7-.12a9.4 9.4 0 0 0-3.39-2.94c-2.87-1.47-6.54-1.47-9.4.01-1.36.7-2.5 1.7-3.4 2.96-.08.14-.23.21-.39.21m6.25 12.07a.47.47 0 0 1-.35-.15c-.87-.87-1.34-1.43-2.01-2.64-.69-1.23-1.05-2.73-1.05-4.34 0-2.97 2.54-5.39 5.66-5.39s5.66 2.42 5.66 5.39c0 .28-.22.5-.5.5s-.5-.22-.5-.5c0-2.42-2.09-4.39-4.66-4.39s-4.66 1.97-4.66 4.39c0 1.44.32 2.77.93 3.85.64 1.15 1.08 1.64 1.85 2.42.19.2.19.51 0 .71-.11.1-.24.15-.37.15m7.17-1.85c-1.19 0-2.24-.3-3.1-.89-1.49-1.01-2.38-2.65-2.38-4.39 0-.28.22-.5.5-.5s.5.22.5.5c0 1.41.72 2.74 1.94 3.56.71.48 1.54.71 2.54.71.24 0 .64-.03 1.04-.1.27-.05.53.13.58.41.05.27-.13.53-.41.58-.57.11-1.07.12-1.21.12M14.91 22c-.04 0-.09-.01-.13-.02-1.59-.44-2.63-1.03-3.72-2.1a7.3 7.3 0 0 1-2.17-5.22c0-1.62 1.38-2.94 3.08-2.94s3.08 1.32 3.08 2.94c0 1.07.93 1.94 2.08 1.94s2.08-.87 2.08-1.94c0-3.77-3.25-6.83-7.25-6.83-2.84 0-5.44 1.58-6.61 4.03-.39.81-.59 1.76-.59 2.8 0 .78.07 2.01.67 3.61.1.26-.03.55-.29.64-.26.1-.55-.04-.64-.29a11.1 11.1 0 0 1-.73-3.96c0-1.2.23-2.29.68-3.24 1.33-2.79 4.28-4.6 7.51-4.6 4.55 0 8.25 3.51 8.25 7.83 0 1.62-1.38 2.94-3.08 2.94s-3.08-1.32-3.08-2.94c0-1.07-.93-1.94-2.08-1.94s-2.08.87-2.08 1.94c0 1.71.66 3.31 1.87 4.51.95.94 1.86 1.46 3.27 1.85.27.07.42.35.35.61-.05.23-.26.38-.47.38"
-  })));
-};
-
-var _path$2, _path2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-var SvgKeyboard = function SvgKeyboard(props) {
-  return /*#__PURE__*/reactExports.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor",
-    viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/reactExports.createElement("path", {
-    d: "M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m-9 3h2v2h-2zm0 3h2v2h-2zM8 8h2v2H8zm0 3h2v2H8zm-1 2H5v-2h2zm0-3H5V8h2zm9 7H8v-2h8zm0-4h-2v-2h2zm0-3h-2V8h2zm3 3h-2v-2h2zm0-3h-2V8h2z"
-  })), _path2 || (_path2 = /*#__PURE__*/reactExports.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0zm0 0h24v24H0z"
-  })));
-};
-
-const iconStyle$1 = `
-    width: 40px;
-    height: 40px;
-`;
-const FingerPrintIcon = styled(SvgFingerprint)`${iconStyle$1}`;
-const KeyboardIcon = styled(SvgKeyboard)`${iconStyle$1}`;
-const PrimaryButtonWithIcon = styled(({
-  type = "submit",
-  disabled = false,
-  text,
-  children,
-  className,
-  ...props
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      type,
-      disabled,
-      ...props,
-      className: classes(["r5-button-with-icon"], className),
-      background: theme.backgroundColor,
-      border: theme.backgroundColor,
-      color: theme.primaryColor
-    },
-    children,
-    text && /* @__PURE__ */ React.createElement("span", { className: "r5-button-text" }, text)
-  );
-})`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .r5-button-text {
-        margin-left: 10px;
-        text-transform: uppercase;
-    }
-`;
-const WebAuthnSignupViewButtons = styled(({ onBiometricClick, onPasswordClick, className }) => {
-  const i18n = useI18n();
-  return /* @__PURE__ */ React.createElement("div", { className: classes(["r5-webauthn-signup-buttons"], className) }, /* @__PURE__ */ React.createElement(
-    PrimaryButtonWithIcon,
-    {
-      dataTestId: "webauthn-button",
-      onClick: onBiometricClick,
-      title: i18n("signup.withBiometrics"),
-      text: i18n("biometrics")
-    },
-    /* @__PURE__ */ React.createElement(FingerPrintIcon, null)
-  ), /* @__PURE__ */ React.createElement(Separator, { text: i18n("or") }), /* @__PURE__ */ React.createElement(
-    PrimaryButtonWithIcon,
-    {
-      dataTestId: "password-button",
-      onClick: onPasswordClick,
-      title: i18n("signup.withPassword"),
-      text: i18n("password")
-    },
-    /* @__PURE__ */ React.createElement(KeyboardIcon, null)
-  ));
-})``;
-
 const SignupView = ({
   allowLogin = true,
+  initialScreen,
+  allowWebAuthnLogin = false,
   allowWebAuthnSignup = false,
   socialProviders,
   ...props
@@ -7054,7 +7249,7 @@ const SignupView = ({
       onPasswordClick: () => goTo("signup-with-password"),
       onBiometricClick: () => goTo("signup-with-web-authn")
     }
-  ) : /* @__PURE__ */ React.createElement(PasswordSignupForm, { ...props }), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement("span", null, i18n("signup.loginLinkPrefix")), "\xA0", /* @__PURE__ */ React.createElement(Link, { target: "login" }, i18n("signup.loginLink"))));
+  ) : /* @__PURE__ */ React.createElement(PasswordSignupForm, { ...props }), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement("span", null, i18n("signup.loginLinkPrefix")), "\xA0", /* @__PURE__ */ React.createElement(Link, { target: selectLogin(initialScreen, allowWebAuthnLogin) }, i18n("signup.loginLink"))));
 };
 
 const SignupWithPasswordView = (props) => {
@@ -7127,7 +7322,9 @@ const ForgotPasswordView = ({
   allowLogin = true,
   displaySafeErrorMessage = false,
   showLabels = false,
+  allowWebAuthnLogin = false,
   recaptcha_enabled = false,
+  initialScreen,
   recaptcha_site_key,
   redirectUrl,
   returnToAfterPasswordReset
@@ -7155,18 +7352,18 @@ const ForgotPasswordView = ({
       onSuccess: () => goTo("forgot-password-success"),
       skipError: displaySafeErrorMessage && skipError
     }
-  ), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: "login" }, i18n("forgotPassword.backToLoginLink"))));
+  ), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: selectLogin(initialScreen, allowWebAuthnLogin) }, i18n("forgotPassword.backToLoginLink"))));
 };
-const ForgotPasswordSuccessView = ({ allowLogin }) => {
+const ForgotPasswordSuccessView = ({ allowLogin, initialScreen, allowWebAuthnLogin }) => {
   const i18n = useI18n();
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, i18n("forgotPassword.title")), /* @__PURE__ */ React.createElement(Info, null, i18n("forgotPassword.successMessage")), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: "login" }, i18n("back"))));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, i18n("forgotPassword.title")), /* @__PURE__ */ React.createElement(Info, null, i18n("forgotPassword.successMessage")), allowLogin && /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: selectLogin(initialScreen, allowWebAuthnLogin) }, i18n("back"))));
 };
 
-const QuickLoginView = ({ auth, session }) => {
+const QuickLoginView = ({ initialScreen, allowWebAuthnLogin = false, auth, session }) => {
   const i18n = useI18n();
   if (!session)
     return null;
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, session.name || session.email), /* @__PURE__ */ React.createElement(Intro, null, i18n("lastTimeYouLoggedInWith")), /* @__PURE__ */ React.createElement(SocialButtons, { providers: session.lastLoginType ? [session.lastLoginType] : [], auth }), /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: "login" }, i18n("notYourAccount"))));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, session.name || session.email), /* @__PURE__ */ React.createElement(Intro, null, i18n("lastTimeYouLoggedInWith")), /* @__PURE__ */ React.createElement(SocialButtons, { providers: session.lastLoginType ? [session.lastLoginType] : [], auth }), /* @__PURE__ */ React.createElement(Alternative, null, /* @__PURE__ */ React.createElement(Link, { target: selectLogin(initialScreen, allowWebAuthnLogin) }, i18n("notYourAccount"))));
 };
 
 const ReauthView = ({ allowForgotPassword = true, auth, session, showLabels = false, socialProviders }) => {
@@ -7317,20 +7514,28 @@ var mfaStepUpWidget = createMultiViewWidget({
   }
 });
 
+function selectLogin(initialScreen, allowWebAuthnLogin) {
+  if (initialScreen === "login" || initialScreen === "login-with-web-authn")
+    return initialScreen;
+  return !allowWebAuthnLogin ? "login" : "login-with-web-authn";
+}
 var authWidget = createMultiViewWidget({
   initialView({
     initialScreen,
     allowLogin = true,
     allowQuickLogin = true,
     allowSignup = true,
+    allowWebAuthnLogin,
     socialProviders,
     session = {}
   }) {
     const quickLogin = allowQuickLogin && !session.isAuthenticated && session.lastLoginType && socialProviders ? socialProviders.indexOf(session.lastLoginType) >= 0 : false;
-    return initialScreen || quickLogin && "quick-login" || session.isAuthenticated && "reauth" || allowLogin && "login" || allowSignup && "signup" || "forgot-password";
+    return initialScreen || quickLogin && "quick-login" || session.isAuthenticated && "reauth" || allowLogin && !allowWebAuthnLogin && "login" || allowLogin && "login-with-web-authn" || allowSignup && "signup" || "forgot-password";
   },
   views: {
     "login": LoginView,
+    "login-with-web-authn": LoginWithWebAuthnView,
+    "login-with-password": LoginWithPasswordView,
     "signup": SignupView,
     "signup-with-password": SignupWithPasswordView,
     "signup-with-web-authn": SignupWithWebAuthnView,