diff --git a/packages/experience/src/containers/SetPassword/HiddenIdentifierInput.tsx b/packages/experience/src/containers/SetPassword/HiddenIdentifierInput.tsx new file mode 100644 index 000000000000..a1fc5eeebed5 --- /dev/null +++ b/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 ( + + ); +}; + +export default HiddenIdentifierInput; diff --git a/packages/experience/src/containers/SetPassword/Lite.tsx b/packages/experience/src/containers/SetPassword/Lite.tsx index d13bc778c4ec..ec8d65f0d489 100644 --- a/packages/experience/src/containers/SetPassword/Lite.tsx +++ b/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 (