@reachfive/identity-ui 1.26.0 → 1.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@reachfive/identity-ui",
-    "version": "1.26.0",
+    "version": "1.26.1",
     "description": "ReachFive Identity Web UI SDK",
     "author": "ReachFive",
     "repository": {

package/types/identity-ui.d.ts

@@ -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.
  *
@@ -367,6 +367,44 @@ type LoginViewProps = {
     socialProviders?: string[];
 };
 
+interface LoginWithWebAuthnViewProps {
+    /**
+     * @deprecated
+     */
+    acceptTos?: boolean;
+    /**
+     * Boolean that specifies whether signup is enabled.
+     *
+     * @default true
+     */
+    allowSignup?: boolean;
+    /**
+     * List of authentication options
+     */
+    auth?: AuthOptions;
+    /**
+     * Whether the signup form fields' labels are displayed on the login view.
+     *
+     * @default false
+     */
+    showLabels?: boolean;
+    /**
+     * Lists the available social providers. This is an array of strings.
+     * Tip: If you pass an empty array, social providers will not be displayed.
+     */
+    socialProviders?: string[];
+}
+
+interface LoginWithPasswordViewProps {
+    allowForgotPassword?: boolean;
+    auth?: AuthOptions;
+    canShowPassword?: boolean;
+    recaptcha_enabled?: boolean;
+    recaptcha_site_key?: string;
+    showLabels?: boolean;
+    showRememberMe?: boolean;
+}
+
 interface PasswordSignupFormProps {
     auth?: AuthOptions;
     beforeSignup?: <T>(param: T) => T;
@@ -423,6 +461,12 @@ interface SignupWithWebAuthnViewProps {
     userAgreement?: string;
 }
 
+/**
+ * The widget’s initial screen.
+ * @enum {('login' | 'login-with-web-authn' | 'signup' | 'forgot-password')}
+ */
+type InitialScreen = 'login' | 'login-with-web-authn' | 'signup' | 'forgot-password';
+
 interface SignupViewProps extends SignupWithPasswordViewProps, SignupWithWebAuthnViewProps {
     /**
      * Boolean that specifies whether login is enabled.
@@ -430,6 +474,13 @@ interface SignupViewProps extends SignupWithPasswordViewProps, SignupWithWebAuth
      * @default true
      */
     allowLogin?: boolean;
+    initialScreen?: InitialScreen;
+    /**
+     * Boolean that specifies whether biometric login is enabled.
+     *
+     * @default false
+     */
+    allowWebAuthnLogin?: boolean;
     /**
      * Boolean that specifies whether biometric signup is enabled.
      *
@@ -463,6 +514,13 @@ interface ForgotPasswordViewProps {
      * @default false
      */
     showLabels?: boolean;
+    initialScreen?: InitialScreen;
+    /**
+     * Boolean that specifies whether biometric login is enabled.
+     *
+     * @default false
+     */
+    allowWebAuthnLogin?: boolean;
     /**
      * Boolean that specifies whether reCAPTCHA is enabled or not.
      */
@@ -485,9 +543,18 @@ interface ForgotPasswordViewProps {
 }
 interface ForgotPasswordSuccessViewProps {
     allowLogin?: boolean;
+    initialScreen?: InitialScreen;
+    allowWebAuthnLogin?: boolean;
 }
 
 interface QuickLoginViewProps {
+    initialScreen?: InitialScreen;
+    /**
+     * Boolean that specifies whether biometric login is enabled.
+     *
+     * @default false
+     */
+    allowWebAuthnLogin?: boolean;
     /**
      * List of authentication options
      */
@@ -566,7 +633,7 @@ type VerificationCodeViewProps$3 = Prettify<Partial<StepUpHandlerResponse> & {
 type MfaStepUpProps = MainViewProps$5 & FaSelectionViewProps & VerificationCodeViewProps$3;
 type MfaStepUpWidgetProps = MfaStepUpProps;
 
-interface AuthWidgetProps extends LoginViewProps, SignupViewProps, SignupWithPasswordViewProps, SignupWithWebAuthnViewProps, ForgotPasswordViewProps, ForgotPasswordSuccessViewProps, QuickLoginViewProps, ReauthViewProps, Omit<FaSelectionViewProps, keyof FaSelectionViewState>, Omit<VerificationCodeViewProps$3, keyof VerificationCodeViewState> {
+interface AuthWidgetProps extends LoginViewProps, LoginWithWebAuthnViewProps, LoginWithPasswordViewProps, SignupViewProps, SignupWithPasswordViewProps, SignupWithWebAuthnViewProps, ForgotPasswordViewProps, ForgotPasswordSuccessViewProps, QuickLoginViewProps, ReauthViewProps, Omit<FaSelectionViewProps, keyof FaSelectionViewState>, Omit<VerificationCodeViewProps$3, keyof VerificationCodeViewState> {
     /**
      * Boolean that specifies whether quick login is enabled.
      *
@@ -574,13 +641,15 @@ interface AuthWidgetProps extends LoginViewProps, SignupViewProps, SignupWithPas
      */
     allowQuickLogin?: boolean;
     /**
-     * The widget’s initial screen.
-     *
-     * - if `allowLogin` is set to `true`, it defaults to `login`.
-     * - if `allowLogin` is set to `false` and `allowSignup` is set to `true`, it defaults to `signup`.
+     * The widget’s initial screen if a value is provided, otherwise:
+     * - if `quickLogin` is set to `true`, it defaults to `quick-login`.
+     * - otherwise if the user is authenticated, it defaults to `reauth`.
+     * - otherwise if `allowLogin` is set to `true` and `allowWebAuthnLogin` is not set to `true`, it defaults to `login`.
+     * - otherwise if `allowLogin` is set to `true`, it defaults to `login-with-web-authn`.
+     * - otherwise if `allowSignup` is set to `true`, it defaults to `signup`.
      * - otherwise, defaults to `forgot-password`.
      */
-    initialScreen?: 'login' | 'signup' | 'forgot-password';
+    initialScreen?: InitialScreen;
 }
 
 interface MainViewProps$4 {

package/umd/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.
  *
@@ -46782,6 +46782,7 @@
 	  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 } : isValidNumber(identifier) ? { phoneNumber: identifier.replace(/\s+/g, "") } : { customIdentifier: identifier };
 	function specializeIdentifierData(data) {
 	  if ("identifier" in data && typeof data.identifier === "string") {
@@ -47474,7 +47475,7 @@
 	      }, () => 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],
@@ -47485,7 +47486,7 @@
 	          }, 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", {
@@ -56195,7 +56196,7 @@
 	  }
 	});
 
-	const ForgotPasswordWrapper = styled.div`
+	const ForgotPasswordWrapper$1 = styled.div`
     margin-bottom: ${(props) => props.theme.spacing}px;
     text-align: right;
     ${(props) => props.floating && `
@@ -56236,7 +56237,7 @@
 	        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",
@@ -56306,6 +56307,290 @@
 	  ), 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 = "",
@@ -66610,100 +66895,10 @@
 	  );
 	};
 
-	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
@@ -66716,7 +66911,7 @@
 	      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) => {
@@ -66789,7 +66984,9 @@
 	  allowLogin = true,
 	  displaySafeErrorMessage = false,
 	  showLabels = false,
+	  allowWebAuthnLogin = false,
 	  recaptcha_enabled = false,
+	  initialScreen,
 	  recaptcha_site_key,
 	  redirectUrl,
 	  returnToAfterPasswordReset
@@ -66817,18 +67014,18 @@
 	      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$1, 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$1, 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 }) => {
@@ -66979,20 +67176,28 @@
 	  }
 	});
 
+	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,