diff --git a/frontend/elements/src/contexts/AppProvider.tsx b/frontend/elements/src/contexts/AppProvider.tsx index ae789f966..d0f3417d7 100644 --- a/frontend/elements/src/contexts/AppProvider.tsx +++ b/frontend/elements/src/contexts/AppProvider.tsx @@ -77,7 +77,7 @@ interface Context extends States { enablePasskeys: boolean; lang: string; hidePasskeyButtonOnLogin: boolean; - prefilledEmail: string; + prefilledEmail?: string; } export const AppContext = createContext(null); diff --git a/frontend/elements/src/pages/LoginEmailPage.tsx b/frontend/elements/src/pages/LoginEmailPage.tsx index 31e5b30d9..78d1bf740 100644 --- a/frontend/elements/src/pages/LoginEmailPage.tsx +++ b/frontend/elements/src/pages/LoginEmailPage.tsx @@ -59,7 +59,7 @@ const LoginEmailPage = (props: Props) => { } = useContext(AppContext); const [emailAddress, setEmailAddress] = useState( - props.emailAddress || prefilledEmail + props.emailAddress || prefilledEmail || "" ); const [isPasskeyLoginLoading, setIsPasskeyLoginLoading] = useState(); const [isPasskeyLoginSuccess, setIsPasskeyLoginSuccess] = useState(); @@ -387,7 +387,12 @@ const LoginEmailPage = (props: Props) => { }, [hanko, setPage, isThirdPartyLoginLoading]); useEffect(() => { - setEmailAddress(prefilledEmail); + if (emailAddress.length === 0 && prefilledEmail !== undefined) { + setEmailAddress(prefilledEmail); + } + // The dependency array is missing the emailAddress parameter intentionally because if it is not missing the email + // would always be reset to the prefilledEmail when the input is empty + // eslint-disable-next-line react-hooks/exhaustive-deps }, [prefilledEmail]); return (