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('testemail@test.com', 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 });
});

is the base url pointing towards web app in firebase hosting? — Umar Hussain, Jul 23 '19 at 10:19
Yes it is. It's a Vuejs app deployed in FB hosting. The 404 is a custom 404 page. — Jesús Fuentes, Jul 23 '19 at 10:20

score 0 · Answer 1 · answered Jul 23 '19 at 10:52

0

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

answered Jul 23 '19 at 10:52

Umar Hussain

3,093
1
14
28

We have this already configured with a custom email handler at frontend. I think you've got the topic confused. – Jesús Fuentes Jul 23 '19 at 11:01
you are able to verify the user email then? and not able to redirect? – Umar Hussain Jul 23 '19 at 11:10
We are using here `generateEmailVerificationLink` (Dynamic links) to generate a proper link that would work with mobile apps, we are not using the standard email sent by google with `createUserWithEmailAndPassword` for example. – Jesús Fuentes Jul 23 '19 at 11:27
Yes I understand that you are using the backend to generate the verification link which you then send via your own email service like send grid. – Umar Hussain Jul 23 '19 at 11:39
what is the difference between urls when handleCodeInApp is true and when it is false. – Umar Hussain Jul 23 '19 at 11:40
Whether the email action link will be opened in a mobile app or a web link first. The default is false. When set to true, the action code link will be be sent as a Universal Link or Android App Link and will be opened by the app if installed. In the false case, the code will be sent to the web widget first and then on continue will redirect to the app if installed. https://firebase.google.com/docs/auth/admin/email-action-links – Jesús Fuentes Jul 23 '19 at 12:29
can you add the front end handler for this link and tell the path to which it will respond? – Umar Hussain Jul 23 '19 at 12:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/196872/discussion-between-jesus-fuentes-and-umar-hussain). – Jesús Fuentes Jul 23 '19 at 12:57

score 0 · Answer 2 · answered Jul 24 '19 at 03:23

0

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.

answered Jul 24 '19 at 03:23

bojeil

24,095
4
51
58

The problem is that it's not falling back to `baseUrl` but to the root of `baseUrl`. F.e: `baseUrl = 'http://myapp.com/#/auth-handler?param1=true` but then the link redirects to `http://myapp.com/someparams&continueUrl=http://myapp.com/#/auth-handler?param1=true`. Am I supposed to detect the `continueUrl` and redirect to it myself? – Jesús Fuentes Jul 24 '19 at 13:20
Did you update your action callback URL in the Firebase Console to `http://myapp.com/...`? – bojeil Jul 25 '19 at 17:57
where exactly? Do you mean Auth-Templates? – Jesús Fuentes Jul 30 '19 at 08:24
There is an email template section in the Firebase Console (in Authentication). The email action callback URL is set there. – bojeil Jul 31 '19 at 17:58

generateEmailVerificationLink and other Firebase Passing State in Email Actions

2 Answers2