CODEWITHSUNDEEP
firebaseflutterfirebase-authentication
progNewbie
progNewbie

Reputation: 4812

Firebase custom verification email

I read some other posts about this topic but couldn't finally figure out how to accomplish this.

I want to send the email-verification email normally send from firebase itself from my own email-provider (like mailjet e. g.) The reason is that I want to customize the email text etc.

I also read about creating a custom email handler which I would do too. But this just handles the action that happens when the user clicks on the link in the email.

At the moment I call this from my flutter app after the users sign up:

user.sendEmailVerification();

this makes firebase send the standard verification email to the user. Instead of doing that I'd need to send the email myself. But like seen here I need to have this oobCode generated. to generate a correct link to handle. I just can't find an example on how to do that. What would be the right approach to send the email myself? Maybe I just did not find the right resource. Thanks a lot.

Upvotes: 0

Views: 1370

Answers (2)

Abhijeet Jha
Abhijeet Jha

Reputation: 119

The answer mentioned above is absolutely correct , I am just adding to that how you can create action url in two ways for testing and then deployment way. 1> for custom email action handler you would have to create your own handlers (using HTML and js , react app , flutter anything you want) after doing that you can either test your handler by routing traffic to it (localhost) using ngrok(that will provide you with https url to route traffic on localhost, preferred method for testing) , or you can deploy it and directly use that url . now with that url go to firebase(your project) -> authentication -> templates -> use whatever handler you want( example reset password or email verification) -> edit and add custom action url to route traffic to your handler( hosted(deployed) or local(ngrok routing) .

Upvotes: 0

Renaud Tarnec
Renaud Tarnec

Reputation: 83058

You need to generate and send the email via a backend, by using the Admin SDK. The easiest is to use a Cloud Function, from which you use the Mailjet NodeJS API wrapper.

So, in the Cloud Function, you need to:

  1. Call the generateEmailVerificationLink() method of the Admin SDK, which returns a link
  2. Generate an email containing this link
  3. Send the email to the user (see the Mailjet NodeJS API wrapper documentation)

The first steps are detailed here in the doc.

In order to customize the URL of the verification link (e.g. you want to redirect to https://www.myrapp.com/emailVerifyScreen) you need to change the base URL as shown in the below image ("Customize action URL"). Also explained here in the doc.

enter image description here

Then, when the user clicks on the link in the email he/she has received, you need to do what is explained in the doc you referred to in your question: Create custom email action handlers. See the point #4 "Handle email address verification by calling applyActionCode".

Concretely, in the page of your app https://www.myrapp.com/emailVerifyScreen, you get the query string values from the URL (e.g. var actionCode = getParameterByName('oobCode');) and you use these values to call the applyActionCode(actionCode) method. When the promise returned by this method is fullfilled, you know that the email has been verified.

  var actionCode = getParameterByName('oobCode'); 
  auth.applyActionCode(actionCode).then((resp) => {
    // Email address has been verified.

    // TODO: Display a confirmation message to the user.
    // You could also provide the user with a link back to the app.

    // TODO: If a continue URL is available, display a button which on
    // click redirects the user back to the app via continueUrl with
    // additional state determined from that URL's parameters.
  }).catch((error) => {
    // Code is invalid or expired. Ask the user to verify their email address
    // again.
  });

One last point to note: you cannot directly get the oobCode alone. The generateEmailVerificationLink() method generates the full URL.

Upvotes: 3

Related Questions