If you are building a SaaS, you know the pain of fake signups.
Standard email regex (^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$) is no longer enough. It passes temp-mail.org, yopmail, and fat-finger typos like user@gmil.com. This leads to a database full of garbage and high bounce rates that ruin your email deliverability.
I only have a couple of hours a day to work on my side projects, so I got tired of dealing with this. I spent the weekend building a "Smart" Email Input component in React that actually does deep validation.
What it does differently:
- Live DNS/MX Check: It pings the domain to ensure it actually has active mail servers.
- Burner Block: It checks against a constantly updated list of disposable email providers.
- Typosquatting Autocorrect: It detects typos on major providers and prompts the user (e.g., "Did you mean user@gmail.com?").
-
Saves API calls: It only triggers on
onBlur(when the user clicks out of the input).
The Code (Open Source)
I styled it with Tailwind, so it's super easy to drop into your Next.js or React forms.
You can grab the full SmartEmailInput.jsx file from my GitHub repository here:
👉 https://github.com/yahyalazrek/react-smart-email-input
(Note: The logic runs on an edge-optimized Cloudflare Worker I deployed to RapidAPI. The GitHub Readme has a link to grab a free API key with 100 requests/mo so you can test the component instantly).
How do you handle validation?
Let me know what you think of the code! Do you guys use double opt-in, or do you block fake domains at the form level? Would love to hear how other devs are handling this!
Top comments (2)
This is a cool solution. Regex alone definitely misses a lot of cases, especially disposable emails and common typos. The typo-correction for providers like gmail sounds particularly useful!
Thanks so much! Exactly regex is a great first step for formatting, but it really falls short when it comes to actual deliverability.