DEV Community

Cover image for Sending Client-side Emails using EmailJs in ReactJs App
Adarsh Goyal
Adarsh Goyal

Posted on

Sending Client-side Emails using EmailJs in ReactJs App

  • Go to EmailJs

  • Create a free account (you can send only 200 emails per month in this account) want more emails head to pricing

  • Create a email service

  • Create a email template

  • You can choose the template_id and service_id you want or can genrate one if needed.

  • Setup a react project and install the module using.

npm install @emailjs/browser --save
Enter fullscreen mode Exit fullscreen mode
  • Import and use it in your project.
import emailjs from "@emailjs/browser"

export const sendEmail = (templateParams) => {
    emailjs
        .send(
            process.env.REACT_APP_EMAILJS_SERVICE_ID,
            process.env.REACT_APP_EMAILJS_TEMPLATE_ID,
            templateParams,
            process.env.REACT_APP_EMAILJS_PUBLIC_KEY
        )
        .then(
            (result) => {
                console.log(result.text)
            },
            (error) => {
                console.log(error.text)
            }
        )
}
Enter fullscreen mode Exit fullscreen mode
  • Add REACT_APP_EMAILJS_SERVICE_ID, REACT_APP_EMAILJS_TEMPLATE_ID, REACT_APP_EMAILJS_PUBLIC_KEY to your env file. (do not forgot to restart the server after adding the variables)

  • That's it you are done with sending emails.

  • You can see your logs at events and email history at history.

  • Also you can add reCAPTCHA v2 and google analytics while sending the email.

If you have any query you can leave it in the comment.

Don't forgot to visit my webite and follow me. Thank you.

Oldest comments (20)

Collapse
 
fish1 profile image
Jacob Enders

Interesting, but why would the frontend ever need to send an Email?

Collapse
 
felipey2010 profile image
Philip Mahama Akpanyi

For a simple contact form without the need for a backend.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

But this is still a backend just not one you own. Me personally, I'd rather all communications I own go through my own stuff

Thread Thread
 
xr0master profile image
Sergey Khomushin • Edited

With the growth of professionalism, there is an understanding that you need to do what really requires your attention.

At the same time, the development of your solution will cost many times more, and the quality will be clearly inferior to the work of a specialized team.

Therefore, there are many services and SaaS as a business model.

Thread Thread
 
adarshgoyal profile image
Adarsh Goyal

💯

Thread Thread
 
adam_cyclones profile image
Adam Crockett 🌀

I work for a security focused company, I'm 11yrs into development, my "own stuff" would be a server and a built in to language mailer function. I don't agree with this level of trust, end you can't say I'm unprofessional or inexperienced because I have seen what happens when companies give to much trust.

Collapse
 
xr0master profile image
Sergey Khomushin

While this is not limited to frontend use, there can actually be hundreds of use cases. Let's say someone drew something on the canvas and you want to share it? Or some kind of web game, which at the end can send you a report to the email? Or have you made an order and want to send a notification about it?

Today, a static web frontend is very relevant, static content servers are very cheap, and the speed is virtually unlimited.

Collapse
 
jasoncruzdev profile image
Jason Cruz

Im using this today! Thanks!!

Collapse
 
adarshgoyal profile image
Adarsh Goyal

good to hear

Collapse
 
xr0master profile image
Sergey Khomushin

Thank you for the article!

Collapse
 
phyberapex profile image
PhyberApex

I am not sure that it is wise to do this from the front end. Aren't you exposing your emailJS credentials to everybody? My guess would be yes and it being a third party service everybody could send emails with your account and at your cost / limit. This should not be used from the frontend imho.

~Cheers

Collapse
 
adarshgoyal profile image
Adarsh Goyal • Edited

your credentials will not be exposed as they will be kept in .env which will not be exposed anytime and will be added to the platform you are hosting your frontend.

Collapse
 
phyberapex profile image
PhyberApex

Sorry not really firm with react. But your frontend then makes a call to somewhere right? Either it is your backend (where react is hosted) or to the emailJS service directly both of which can be viewed in the network tab. I'd assume if the backend is actually where you host your react app you are off a bit more secure because you can implement rate limiting etc. that way but I assumed the latter one because your use case was "not worry about backend".

~Cheers

Collapse
 
xr0master profile image
Sergey Khomushin

Indeed, someone could copy your code, but they will only be able to send your templates, with your content, and will not be able to send a custom email with their own content (spam). Which is absolutely not interesting for spammers. A better way to think of EmailJS in terms of security is not as a service that allows you to send email from Javascript, but rather as a service that allows you to create a predefined set of emails via the dashboard, and then just trigger the emails from the Javascript. This is quite similar to how emails are usually sent via a proprietary server code, and also to the way products like Intercom or customer.io are working.

Additionally, we've also developed various tools to prevent abuse – for instance, we have IP based rate limits to prevent bots from spamming, a whitelist of origin, and also support reCAPTCHA tests to make sure that a human is sending the email (although it's up to the developer to turn this feature on).

Please note, EmailJS send endpoints don't require authentication, so you can make the call to our API without worrying about security. The keys in the network tab are public keys.

Collapse
 
adarshgoyal profile image
Adarsh Goyal

it supports only reCAPTCHA v2 not v3 why ? @xr0master

Thread Thread
 
xr0master profile image
Sergey Khomushin

In order not to go deep into the reasons, I will simply answer that there are several problems.

  • V3 does not have a checkbox, and the invisible captcha is difficult to install
  • V3 sometimes gives a low scope for real people.

As a result, our customers will contact our support team instead of Google support, which is why we decided not to add it yet.

Thread Thread
 
adarshgoyal profile image
Adarsh Goyal

ok

Collapse
 
phyberapex profile image
PhyberApex

I see! Thanks for chiming in. Good to see even the devs of the service care enough to address possible issues! Kudos!

Thread Thread
 
xr0master profile image
Sergey Khomushin

These are issues of absolutely any public API. The same public API from Google Maps is no exception, as well as someone's own development. Unfortunately. Therefore, we do our best to make the price of hacking more expensive than the profit.

Collapse
 
westamz profile image
Westly Meza

Like other people here, I was a little concerned about security, but in the end, the message is always going to be the settled template, and the custom message sent is inserted in HTML as plain text.

I had doubts about this last, so I tested it

Image description