Firebase passwordless sign-up email address without localStorage

Question

When using passwordless sign-up for web with Firebase the expectation for same-device sign-up is that you enter your email address, a magic link is sent to your email address, you click the magic link which returns you to the website with a parameter in the URL that should give Firebase almost enough information to finish the sign-up process.

However, as a safety check, if the device/browser used when clicking the link is not the same as the device/browser that was used to initiate the sign-up Firebase expects the user to re-confirm their email address. For same device/browser sign-ups, Firebase is supposed to remember the email address locally to skip/avoid this step.

In the past it seems Firebase has been able to skip over this extra email entry check by putting the email address on sign-up into localStorage, as per numerous references and documentation around the web and in their docs (see the localStorage.set). However, it seems Firebase doesn't use localStorage for this anymore, but instead stores the information in indexedDB.

My issue is that when the user returns to the page in order to finish sign-up I need to call signInWithEmailLink(auth, email, window.location.href);, but I don't have the email parameter and there doesn't seem to be an API call in Firebase (unless I've missed it) to fetch this email address from indexedDB at this stage. I can see that it's stored there in the browser storage, but short of directly calling indexedDB APIs themselves (which runs the risk of breaking changes in future updates to firebase) I'm not sure how to retrieve this value.

There's some suggestion that the answer may be in implementing onAuthStateChanged, but this returns null at this stage (presumably because the user is not yet confirmed?).

Currently, this is leaving me in the position of having to re-prompt the user to enter their email address even on the same device, or to instead manually set localStorage, sessionStorage, or access indexedDB directly.

Answer 1

I've read you're concern and figured out the solution You should include the query parameters email in your redirection url when creating the authenticating link instead of save the email in localstorage.

 try {
  await sendSignInLinkToEmail(FirebaseInstance.auth, email, {
    url: `${process.env.REACT_APP_URL}/verify-business?email=${email}`,
    handleCodeInApp: true,
  });
  return withSuccess(data, "Email has sent!");
} catch (e) {
  return withError("Error Creating User");
}

You will receive a "email" from query parameters after you validate that Link, and you can then easily sign in with your email.

static async SignIn(email: string) {
try {
  const res = await signInWithEmailLink(
    FirebaseInstance.auth,
    email,
    window.location.href
  );
  const idToken = await res.user.getIdToken();
  localStorage.setItem("token", idToken);
  localStorage.setItem("account_type", "business");
} catch (error) {
  showErrorToast("You are not Authorized");
}
}