![]() ![]() Create an Express API to send customized email templates Later on, we’ll use the route created in React to send customized emails to users. We’ll start by creating a POST route in Express that will receive the necessary data from the request body, then use that information to send an email to the user. You can access the route using in your browser, and you should see a welcome message. I’ve also created a GET route just to check that our app works fine. In the Express app, I’ve set up the basic configurations needed for our build, including the necessary dependencies in the package.json file. Otherwise, there will be conflict in the folder name because they have been cloned from the same repo. Note: Either use the commands below in another folder or change the folder name of the cloned React app. Now, let’s clone the starter Express app with the commands below: At the end of this tutorial, our custom verification email will look like the following image: The image above is the default Firebase email with limited customizability. When we register or try to log in with an unverified registered email address, Firebase will send us an email saying that we should verify our email address: ![]() You can go ahead and view the hosted app. Right now, if we start the app with the npm start command, it won’t work properly because we haven’t provided the necessary Firebase configuration, which is in the firebase.js file. The cloned repo is a React app where I’ve created user registration, verification, and authentication functionality using the Firebase JavaScript SDK. Let’s start by cloning the React repo with the following commands: $ git clone -b userAuth-starter For our first step, we’ll clone the repos. I’ve already created starter repos for both the React and Express apps, so we can focus solely on the topic at hand. We’ll generate an email action link to verify registered user accounts using the Firebase Authentication service. We won’t use the Firebase Admin SDK to generate an action link, but rather, we’ll generate the link ourselves and create an API that uses the Admin SDK to handle the action to be taken whenever the link is clicked.įor this tutorial, we’ll demonstrate how to send customized emails using the first method. On the other hand, we can take full control over the workflow. When a user clicks the link, it will be processed by Firebase to carry out the action it is intended for, like verifying a user’s email or resetting their password. ![]() As the most efficient method, it requires that we use the Firebase Admin SDK to generate a link that will be embedded in emails sent to our users. However, the drawback is that we’ll have to create a backend to send the email ourselves rather than just using a function from the SDK that handles everything automatically.įor one, we can generate email action links. Luckily for us, there are two different ways to solve the problem in Firebase. Most of the time, this isn’t sufficient for how much detail we want to see in our emails. On this page, Firebase allows us to customize only a few things, like the Sender name, the Reply to field, and the action URL. Normally, to customize Firebase email templates, we’d go to the Templates section on the Authentication page of our Firebase project, which looks like the image below: How to send customized email templates in Firebase Set up SendGrid to send transactional emails.Generate the email verification action link.Create an Express API to send customized email templates.How to send customized email templates in Firebase.You can view the repo for the completed Express app and the completed React app. You’ll also need to have Node.js installed on your machine.Īlthough we’re using React for the frontend of our tutorial, you can still follow along with other frameworks or simply vanilla JavaScript. To follow along with this tutorial, you should be familiar with both JavaScript and Firebase and have basic knowledge of Express. In this tutorial, we’ll learn to overcome this limitation and use customized email templates with Firebase. ![]() However, Firebase offers limited customizability in this regard, which is a security measure implemented to prevent the use of Firebase for spamming. When using Firebase Authentication service to carry out actions like password reset, email address verification, and email-based sign in, you might want to customize the email template sent by Firebase, for example, by changing the styling or including your logo. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |