Merge pull request #932 from teamhanko/fix-email-not-set-internally

fix: only set prefilledEmail when email input is empty
teamhanko · Jul 26, 2023 · 17f6ed4 · 17f6ed4
2 parents 7ae10a4 + bb017ec
commit 17f6ed4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git 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<Context>(null);

diff --git 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<string>(
-    props.emailAddress || prefilledEmail
+    props.emailAddress || prefilledEmail || ""
   );
   const [isPasskeyLoginLoading, setIsPasskeyLoginLoading] = useState<boolean>();
   const [isPasskeyLoginSuccess, setIsPasskeyLoginSuccess] = useState<boolean>();
@@ -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 (