refactor(experience): add hidden identifier input for browser passwor…

…d manager

packages/experience/src/containers/SetPassword/HiddenIdentifierInput.tsx

@@ -0,0 +1,25 @@
+import { useContext } from 'react';
+
+import UserInteractionContext from '@/Providers/UserInteractionContextProvider/UserInteractionContext';
+
+/**
+ * This component renders a hidden input field that stores the user's identifier.
+ * Its primary purpose is to assist password managers in associating the correct
+ * identifier with the password being set or changed.
+ *
+ * By including this hidden field, we enable password managers to correctly save
+ * or update the user's credentials, enhancing the user experience and security.
+ */
+const HiddenIdentifierInput = () => {
+  const { identifierInputValue } = useContext(UserInteractionContext);
+
+  if (!identifierInputValue) {
+    return null;
+  }
+
+  return (
+    <input readOnly hidden type={identifierInputValue.type} value={identifierInputValue.value} />
+  );
+};
+
+export default HiddenIdentifierInput;

packages/experience/src/containers/SetPassword/Lite.tsx

@@ -7,6 +7,7 @@ import Button from '@/components/Button';
 import ErrorMessage from '@/components/ErrorMessage';
 import { PasswordInputField } from '@/components/InputFields';
 
+import HiddenIdentifierInput from './HiddenIdentifierInput';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -53,6 +54,7 @@ const Lite = ({ className, autoFocus, onSubmit, errorMessage, clearErrorMessage
 
   return (
     <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
+      <HiddenIdentifierInput />
       <PasswordInputField
         className={styles.inputField}
         autoComplete="new-password"

packages/experience/src/containers/SetPassword/SetPassword.tsx

@@ -9,6 +9,7 @@ import IconButton from '@/components/Button/IconButton';
 import ErrorMessage from '@/components/ErrorMessage';
 import { InputField } from '@/components/InputFields';
 
+import HiddenIdentifierInput from './HiddenIdentifierInput';
 import TogglePassword from './TogglePassword';
 import * as styles from './index.module.scss';
 
@@ -67,6 +68,7 @@ const SetPassword = ({
 
   return (
     <form className={classNames(styles.form, className)} onSubmit={onSubmitHandler}>
+      <HiddenIdentifierInput />
       <InputField
         className={styles.inputField}
         type={showPassword ? 'text' : 'password'}

packages/experience/src/types/guard.ts

@@ -125,9 +125,12 @@ export const ssoConnectorMetadataGuard: s.Describe<SsoConnectorMetadata> = s.obj
 /**
  * Defines the type guard for user identifier input value caching.
  *
- * Purpose: cache the identifier so that when the user returns from the verification
- * page or the password page, the identifier they entered will not be cleared.
+ * Purpose:
+ * - Used in conjunction with the HiddenIdentifierInput component to assist
+ * password managers in associating the correct identifier with passwords.
  *
+ * - Cache the identifier so that when the user returns from the verification
+ *  page or the password page, the identifier they entered will not be cleared.
  */
 export const identifierInputValueGuard: s.Describe<IdentifierInputValue> = s.object({
   type: s.optional(