I'm trying to set up an email verification flow in my project, but I can't seem to get it right.

How my flow works now is the user enters their credentials (email and password), which are used to create a new firebase user. Then, once that promise is resolved, it sends an email verification link to the new user that was created. The code looks like this:

async createUser(email: string, password: string) {
    try {
      console.log("Creating user...");
      const userCredentials = await createUserWithEmailAndPassword(
        auth,
        email,
        password
      );
      console.log("Successfully created user");
      const { user } = userCredentials;
      console.log("Sending email verification link...");
      await this.verifyEmail(user);
      console.log("EMAIL VERIFICATION LINK SUCCESSFULLY SENT");
      return user;
    } catch (err) {
      throw err;
    }
  }

  async verifyEmail(user: User) {
    try {
      sendEmailVerification(user);
    } catch (err) {
      throw err;
    }
  }

The link is sent through fine, but once I press on it, I'm redirected to a page that says this:

Strangely, the user's email is verified after this, in spite of the error message displayed. Any idea why this is happening?

Update:
I managed to figure it out. The email provider I'm using is my university's, and it seems to be preventing the verification link from working properly. I did try with my personal email to see if that was the case, but I wasn't seeing the verification link appearing there. I eventually realized that it was because it was being stored in the spam folder. It's working on other email providers, though, ideally, I'd want it to work on my university's email provider (the emails that users sign up with are supposed to be exclusively student emails). Any ideas how I could resolve this?

CodePudding user response：

I eventually figured out that the issue was with my email provider. I was using my student email, which the university provides, and I imagine they've placed rigorous measures in place to secure them as much as possible. I have no idea what was preventing it from working, but I managed to figure out a workaround.

In brief, I changed the action URL in the template (which can be found in the console for your Firebase project in the Authentication section, under the Templates tab) to a route on my website titled /authenticate. I created a module to handle email verification. Included in it is a function that parses the URL, extracting the mode (email verification, password reset, etc.), actionCode (this is the important one. It stores the id that Firebase decodes to determine if it's valid), continueURL (optional), and lang (optional).

export const parseUrl = (queryString: string) => {
  const urlParams = new URLSearchParams(window.location.search);
  const mode = urlParams.get("mode");
  const actionCode = urlParams.get("oobCode");
  const continueUrl = urlParams.get("continueUrl");
  const lang = urlParams.get("lang") ?? "en";
  return { mode, actionCode, continueUrl, lang };
};

I created another method that handles the email verification by applying the actionCode from the URL using Firebase's applyActionCode.

export const handleVerifyEmail = async (
  actionCode: string,
  continueUrl?: string,
  lang?: string
) => {
  try {
    await applyActionCode(auth, actionCode);
    return { alreadyVerified: false };
  } catch (err) {
    if (err instanceof FirebaseError) {
      switch (err.code) {
        case "auth/invalid-action-code": {
          return { alreadyVerified: true };
        }
      }
    }
    throw err;
  }
};

The auth/invalid-action-code error seems to be thrown when the user is already verified. I don't throw an error for it, because I handle this differently to other errors.

Once the user presses the verification link, they're redirected to the /authenticate page on my website. This page then handles the email verification by parsing the query appended to the route. The URL looks something like this http://localhost:3000/authenticate?mode=verifyEmail&oobCode=FLVl85S-ZI13_am0uwWeb4Jy8DUWC3E6kIiwN2LLFpUAAAGDUJHSwA&apiKey=AIzaSyA_V9nKEZeoTOECWaD7UXuzqCzcptmmHQI&lang=en Of course, in production, the root path would be the name of the website instead of localhost. I have my development environment running on port 3000.

Once the user lands on the authentication page, I handle the email verification in a useEffect() hook (Note: I'm using Next.js, so if you're using a different framework you might have to handle changing the URL differently):

  useEffect(() => {
    verifyEmail();

    async function verifyEmail() {
      const { actionCode } = parseUrl(window.location.search);
      if (!actionCode) return;
      router.replace("/authenticate", undefined, { shallow: true });
      setLoadingState(LoadingState.LOADING);
      try {
        const response = await handleVerifyEmail(actionCode!);
        if (response.alreadyVerified) {
          setEmailAlreadyVerified(true);
          onEmailAlreadyVerified();
          return;
        }
        setLoadingState(LoadingState.SUCCESS);
        onSuccess();
      } catch (err) {
        console.error(err);
        onFailure();
        setLoadingState(LoadingState.ERROR);
      }
    }
  }, []);

It first checks if there is an action code in the URL, in case a user tries to access the page manually. The onSuccess, onFailure, and onEmailAlreadyVerified callbacks just display toasts. loadingState and emailAlreadyVerified are used to conditionally render different responses to the user.