Fix newsletter subscription functionality using EmailJS#495
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
Your plan includes 1 review of capacity. Refill in 26 minutes and 14 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. 📝 WalkthroughWalkthroughThis PR integrates EmailJS into the newsletter subscription form, adding environment variable configuration, the ChangesEmailJS Newsletter Subscription
Sequence DiagramsequenceDiagram
participant User
participant Footer
participant EmailJS
User->>Footer: Submit email form
Footer->>Footer: Validate email not empty
Footer->>EmailJS: emailjs.send with VITE_EMAILJS_* config
EmailJS->>EmailJS: Send email via service
alt Success
EmailJS-->>Footer: Promise resolved
Footer->>User: Alert success, clear input
else Failure
EmailJS-->>Footer: Promise rejected
Footer->>Footer: Log error
Footer->>User: Alert failure message
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @GkBuilds16 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
|
Implemented the newsletter subscription functionality using EmailJS with validation and environment variable support. Kindly review the PR. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/Footer.tsx (2)
28-35: ⚡ Quick winAdd environment variable validation.
The code assumes EmailJS environment variables are configured but doesn't validate them. If these are missing or undefined,
emailjs.send()will fail with a cryptic error.🛡️ Proposed validation
const handleSubscribe = async ( e: React.FormEvent<HTMLFormElement> ) => { e.preventDefault(); if (!email) { toast.error('Please enter a valid email'); return; } + const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID; + const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID; + const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY; + + if (!serviceId || !templateId || !publicKey) { + console.error('EmailJS configuration missing'); + toast.error('Newsletter service is not configured. Please contact support.'); + return; + } setIsSubmitting(true); try { await emailjs.send( - import.meta.env.VITE_EMAILJS_SERVICE_ID, - import.meta.env.VITE_EMAILJS_TEMPLATE_ID, + serviceId, + templateId, { user_email: email, }, - import.meta.env.VITE_EMAILJS_PUBLIC_KEY + publicKey );🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Footer.tsx` around lines 28 - 35, Validate the EmailJS environment variables before calling emailjs.send: check import.meta.env.VITE_EMAILJS_SERVICE_ID, import.meta.env.VITE_EMAILJS_TEMPLATE_ID, and import.meta.env.VITE_EMAILJS_PUBLIC_KEY for non-empty values (and the email param) inside the Footer component or the function that invokes emailjs.send; if any are missing, short-circuit and surface a clear error (e.g., throw or display a user-friendly message/log via console.error or the component's error state) instead of calling emailjs.send to avoid cryptic failures.
17-43: 🏗️ Heavy liftConsider adding bot protection for client-side email submission.
Since EmailJS credentials are exposed in client-side code, the subscription endpoint can be abused by bots to send spam. While EmailJS has some built-in rate limiting, consider adding additional protection like reCAPTCHA v3, honeypot fields, or moving email handling to a backend endpoint with rate limiting.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Footer.tsx` around lines 17 - 43, The client-side handleSubscribe function currently calls emailjs.send with exposed env keys (import.meta.env.VITE_EMAILJS_*) which risks abuse; to fix, remove direct public key usage from the browser by moving subscription handling to a backend endpoint (create a POST /subscribe handler) that receives the email and a bot-proof token, verifies the token (e.g., verify reCAPTCHA v3/enterprise server-side) and calls EmailJS (or sends the email) from the server with rate limiting and logging; alternatively, if you must keep client-side sending, integrate reCAPTCHA v3 in the handleSubscribe flow to obtain a token and require server-side verification or add a hidden honeypot input that handleSubscribe checks and aborts if filled, and implement rate limiting/validation around the send logic (referencing handleSubscribe and emailjs.send to locate where to change).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.gitignore:
- Line 49: Duplicate .env ignore entry found in .gitignore; remove the later
".env" line so only the original entry (the one in the "Environment Variables"
section) remains. Locate the ".env" token in the file (the duplicate entry) and
delete that line, leaving the existing earlier ".env" entry intact.
In `@src/components/Footer.tsx`:
- Around line 17-43: Replace blocking alert() calls in handleSubscribe with
react-hot-toast notifications and add a loading state: add a boolean state like
isLoading with setIsLoading in the Footer component, set isLoading(true) before
calling emailjs.send and setIsLoading(false) in finally; replace
alert('Subscribed successfully!') with toast.success(...) and
alert('Subscription failed...') with toast.error(...), and replace the
empty-email alert with toast.error(...) as well; update the form submit button
(the element that triggers handleSubscribe) to be disabled when isLoading is
true and show a loading indicator/changed label while loading so users cannot
resubmit while the async emailjs.send call is in progress.
- Line 3: The call to emailjs.send in Footer.tsx passes
import.meta.env.VITE_EMAILJS_PUBLIC_KEY directly as the 4th arg but EmailJS v4
requires an options object; locate the emailjs.send(...) invocation in the
Footer component and replace the fourth parameter with an object like {
publicKey: import.meta.env.VITE_EMAILJS_PUBLIC_KEY } so the call becomes
emailjs.send(serviceID, templateID, templateParams, { publicKey:
import.meta.env.VITE_EMAILJS_PUBLIC_KEY }).
---
Nitpick comments:
In `@src/components/Footer.tsx`:
- Around line 28-35: Validate the EmailJS environment variables before calling
emailjs.send: check import.meta.env.VITE_EMAILJS_SERVICE_ID,
import.meta.env.VITE_EMAILJS_TEMPLATE_ID, and
import.meta.env.VITE_EMAILJS_PUBLIC_KEY for non-empty values (and the email
param) inside the Footer component or the function that invokes emailjs.send; if
any are missing, short-circuit and surface a clear error (e.g., throw or display
a user-friendly message/log via console.error or the component's error state)
instead of calling emailjs.send to avoid cryptic failures.
- Around line 17-43: The client-side handleSubscribe function currently calls
emailjs.send with exposed env keys (import.meta.env.VITE_EMAILJS_*) which risks
abuse; to fix, remove direct public key usage from the browser by moving
subscription handling to a backend endpoint (create a POST /subscribe handler)
that receives the email and a bot-proof token, verifies the token (e.g., verify
reCAPTCHA v3/enterprise server-side) and calls EmailJS (or sends the email) from
the server with rate limiting and logging; alternatively, if you must keep
client-side sending, integrate reCAPTCHA v3 in the handleSubscribe flow to
obtain a token and require server-side verification or add a hidden honeypot
input that handleSubscribe checks and aborts if filled, and implement rate
limiting/validation around the send logic (referencing handleSubscribe and
emailjs.send to locate where to change).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e0095902-cc6a-4b89-812e-e64e794761bd
📒 Files selected for processing (4)
.env.example.gitignorepackage.jsonsrc/components/Footer.tsx
|
Addressed the review comments by updating the EmailJS v4 send configuration and cleaning up duplicate |
|
Implemented the suggested UX improvements by replacing alert() with toast notifications, adding loading state handling, and updating the EmailJS v4 configuration. |
|
Please review the changes... |
|
not needed as of now |
2 participants
Related Issue
Description
Implemented working newsletter subscription functionality using EmailJS.
The previous Subscribe button only displayed a success alert without actually sending any email. This update integrates EmailJS to provide real email subscription support with proper validation and user feedback.
How Has This Been Tested?
Screenshots (if applicable)
Type of Change
Summary by CodeRabbit
Enhancements
Dependencies