generateEmailVerificationLink and other Firebase Passing State in Email Actions

Question

So I am working closely with mobile dev team to generate the proper email when the user signs up, resets the pw etc.

With this piece of code that I pasted below and after all the whitelisting & dynamic link config, we are finally generating the link. It works fine with both apps, iOS and Android. The problem comes with the webapp. If an user tries to register through the app and receives this email but opens it at desktop, the webapp will show a 404 and won't go to the url that I set in url: baseUrl (which is the url the user would be able to activate his email).

What am I not understanding here?

exports = module.exports = region('europe-west1').https.onRequest(async (
  request,
  response,
): Promise<any> => {
  const CONFIG = config();
  const { mobile } = CONFIG;
  const baseUrl = CONFIG.bloqify.base_url;

  const actionCodeSettings: authLib.ActionCodeSettings = {
    url: baseUrl,
    iOS: {
      bundleId: mobile.ios.bundle_id,
    },
    android: {
      packageName: mobile.android.package_name,
      installApp: true,
      minimumVersion: mobile.android.moinimum_version,
    },
    handleCodeInApp: true,
    dynamicLinkDomain: mobile.dynamic_link.domain,
  };

  const [generateLinkError, generateLinkSuccess] = await to(
    auth.generateEmailVerificationLink('[email protected]', actionCodeSettings),
  );
  if (generateLinkError) {
    console.log(generateLinkError.message);
    return response.status(500).send({
      success: false,
      refunded: !!generateLinkError,
      message: generateLinkError.message,
    });
  }

  console.log(generateLinkSuccess);

  return response.status(200).send({ success: true });
});

Answer 1

You need to setup the url for verfication link in your firebase project console.

Go to Authentication -> Templates -> Click Edit button in templates section

Then Click the customize url link at the bottom, after that add the domain of your website in the field and add url path unique for this address. e.g.

https://yourdomain/action

After that handle the action code with your web sdk to mark email verified/ update password.

P.S the url you pass in action settings is for redirect purposes. A better way to handle these link is to create separate domain hosting only for handling these links. Give that domain address in your firebase settings, then after performing verification redirect to your Vue website in this case. Here is a React app which achieve this scenario: https://github.com/griffinsockwell/react-firebase-custom-email-handlers

Step1

Step 2

Answer 2

It should fallback to baseUrl when opened in a desktop browser. That page should be implemented on your end. You should follow the steps explained at "completing sign-in in a web page". Otherwise, this will show a 404 error as the page is not available.