Understanding GeneratePasswordResetEmailLink in Firebase

Issue

I am trying to build a function on the web that allows a user to enter their email address and receive a custom password reset link. When I try using the Firebase recommended function here, I'm left with an error having to do with configuring my app bundle. Since I'm developing on the web, I am not sure what the correct way to send a password reset email is. I do have the Firebase Mail Extension installed, but it is not being deployed at all (when I look at the Function Logs). The following is my code:

const actionCodeSettings = {
  url: "https://www.example.com/",

  handleCodeInApp: true,
  iOS: {
    bundleId: "",
  },
  android: {
    packageName: "",
    installApp: true,
    minimumVersion: "12",
  },
  dynamicLinkDomain: "",
};
const userEmail = doc.data().email;
firebase
  .auth()
  .generatePasswordResetLink(userEmail, actionCodeSettings)
  .then((link) => {
    firestore
      .collection("mail")
      .doc()
      .set({
        to: userEmail,
        from: "",
        message: {
          subject: "Reset Password - SWS Records Platform",
          html: `

                ${link}
 
                `,
        },
      })
      .catch((error) => {
        alert(error);
      });
  })
  .catch((error) => {
    alert(error);
  });
  };

Solution

There are a couple work arounds to this issue. First, you can make the mobile values undefined. The ActionCodeSettings documentation has more information.

const actionCodeSettings = {
  url: 'https://example.com',
  //This domain must be verified in your Firebase Console
  // 'Authentication -> Templates -> Password reset -> Edit Template -> Customize domain'

  handleCodeInApp: undefined,
  iOS: {
    bundleId: undefined,
  },
  android: {
    packageName: undefined,
    installApp: undefined,
    minimumVersion: undefined,
  },
  dynamicLinkDomain: undefined,
};

Alternatively, you can use the old-fashioned sendPasswordResetEmail function:

firebase.auth().sendPasswordResetEmail(email)
  .then(() => {
    // Password reset email sent... no need to deploy to SMTP server. 
    // ..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

The latter is generally the better solution when working on the web: you do not have to push multiple functions simultaneously and you also still have the option to edit the email contents, link and domain directly from the Firebase Console: 'Authentication -> Templates -> Password reset'. You also do not have to have a SMTP server connected to your application, which can be costly to maintain.

Answered By - EJZ