How to create custom firebase email templates and action handlers link #13

Learn how to create custom email action handlers and change the Firebase email templates using Firebase email link authentication. Detailed how to implement the custom Firebase Auth Email verification template and send to user on signup. And the verification URL would contain URL to your site instead of Firebase default URL. And on visit of this URL, how to call verify method of Firebase Auth in Laravel PHP with little help of JavaScript SDK.

Here, we assume, your are clear about Firebase Auth and you have enabled the Email/Password in the Sign-in method

Now lets begin to customize the URL, you get in your firebase email verification template. It looks like something https://test-cc4d3.firebaseapp.com/__/auth/action?mode=<action>&oobCode=<code>

Here, in above image, you have edit button for the editing the template. Click on that, then you will have "customize action URL" link at the bottom. You know for security rules, you can edit message, if you use firebase domain. But we can if we are using our own customized template. Now click on the button "customize action URL".

Here, we have added our domain url http://localhost/yourproject/yourmethod, so the email template would have this. (Note: This change is action url, will reflect to all your email templates like reset password etc.)

Now Firebase side work is done. Now lets come to Laravel PHP side.
First, we use our smtp to send email, inside of Firebase send mail.This has been covered in previous chapter also

Fetch link

 $link = app('firebase.auth')->getEmailVerificationLink('someone@example.com');  

Then use Mail of Laravel, (assuming you are pretty much clear, to have template blade file in views folder and that blade will have your content and a dynamic variables like name, link etc.)

 use Mail;  
 $data['link'] = $link;  
 Mail::send('email-verification', compact('data'),  
           function ($m) {  
         $m->to('someone@example.com', 'John Carry')  
             ->subject('Email Verification');  
       });  

So, when you send your email, it would receive something as below with your domain url

Note: This email template is yours, not firebase, you can design any way you want. So now look at url. it is something like this
http://localhost/yourproject/yourmethod?mode=verifyEmail&oobCode=2WGHWEUiMmIqTALRuWTGE4bD1XvzoYgYAO0G21Ve_-XXXXXXXXXXXX&apiKey=AIzaSyAxk3OUAewXXXXXXXXXXXXXXXXXXX&lang=en

It has appended its parameter like mode, oobCode and the apiKey. Now as soon as this url is hit. You will have a route for this

 Route::get('yourmethod', 'YourController@yourmethod')->name('yourmethod');  

In your controller, just call a view

 public function yourmethod(Request $request)  
 {  
 return view('yourview');  
 }  

Now in yourview.blade.php, you have to add a script file. From here begins the work of Javascript SDK

 <script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"></script>  

Now add some script code

 <script>  
 document.addEventListener('DOMContentLoaded', function() {  
 var mode = fetchParamsbyUrl('mode');  
 var actionCode = fetchParamsbyUrl('oobCode');  
 var continueUrl = fetchParamsbyUrl('continueUrl');  
 var lang = fetchParamsbyUrl('lang') || 'en';  
 var apiKey = fetchParamsbyUrl('apiKey');  
 var config = {  
     'apiKey': apiKey  
   };  
 var app = firebase.initializeApp(config);  
 var auth = app.auth();  
 switch (mode) {  
     case 'resetPassword':  
       // Display reset password handler and UI.  
       handleResetPassword(auth, actionCode, continueUrl, lang);  
       break;  
     case 'recoverEmail':  
       // Display email recovery handler and UI.  
       handleRecoverEmail(auth, actionCode, lang);  
       break;  
     case 'verifyEmail':  
       // Display email verification handler and UI.  
       handleVerifyEmail(auth, actionCode, continueUrl, lang);  
       break;  
     default:  
       // Error: invalid mode.  
   }  
 }, false);  
 function fetchParamsbyUrl(name, url) {  
     if (!url) url = window.location.href;  
     name = name.replace(/[\[\]]/g, '\\$&');  
     var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),  
       results = regex.exec(url);  
     if (!results) return null;  
     if (!results[2]) return '';  
     return decodeURIComponent(results[2].replace(/\+/g, ' '));  
 }  
 function handleVerifyEmail(auth, actionCode, continueUrl, lang) {  
   auth.applyActionCode(actionCode).then(function(resp) {  
 //SUCCESS: EMAIL VERIFIED  
   }).catch(function(error) {  
 //ERROR: INVALID CODE OR EXPIRED  
   })  
 }  
 </script>  

Your are done. The email verification flow has been completed. This example contains only for email verification. In further chapters will cover rest options. So hope your are clear how to customize the email process of Firebase Auth. Please let us know if you have any doubt in above in comment section and also let us know if you require chapter on specific topic. Thanks for reading.