fix: junk email + email verification page#118
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a dedicated, styled email verification landing page in the Next.js App Router so Firebase verification links can direct users to a MobilityDatabase-hosted page (improving perceived legitimacy / domain authority), with localized UI copy.
Changes:
- Added
/email-verification(localized under[locale]) page that reads Firebase action query params and renders a client-side verification flow. - Implemented
EmailVerificationContentclient component to apply the FirebaseoobCodeand display loading/success/error states. - Added
emailVerificationtranslation strings inmessages/en.jsonandmessages/fr.json.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/app/[locale]/email-verification/page.tsx | New server page wiring locale + query params into the verification UI |
| src/app/[locale]/email-verification/EmailVerificationContent.tsx | Client-side Firebase applyActionCode flow and status UI |
| messages/en.json | Added English strings for the verification page |
| messages/fr.json | Added French strings for the verification page |
| interface PageProps { | ||
| params: Promise<{ locale: string }>; | ||
| searchParams: Promise<{ | ||
| mode?: string; | ||
| oobCode?: string; | ||
| }>; |
There was a problem hiding this comment.
The page ignores Firebase’s lang query parameter (action links typically include &lang=en|fr). With localePrefix: 'as-needed', users opening /email-verification?...&lang=fr will still resolve to the default en locale unless the URL is /fr/..., so the French verification email/link can land on an English page. Consider accepting lang in searchParams and, when it matches a supported locale and differs from the current route locale, redirecting to the corresponding localized path before rendering.
| setRequestLocale(locale as Locale); | ||
|
|
There was a problem hiding this comment.
setRequestLocale(locale as Locale) is inconsistent with the rest of the locale pages (they pass locale directly after the [locale] layout validates it). Dropping the cast keeps things consistent and avoids masking potential typing issues.
|
*Lighthouse ran on https://mobilitydatabase-aklse3065-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-aklse3065-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-aklse3065-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-aklse3065-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-aklse3065-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
Co-authored-by: David Gamez <[email protected]>
Summary:
closes #105
When a user creates a new account, the validation email will go to the junk box with many users missing it entirely. This PR + fixes externally gives more credibility to the email validation so that mail services do not view it as spam
changes
@mobilitydatabase.orginstead of@mobility-feeds-dev.firebaseapp.com(done in firebase console)/email-verificationpage (new in this PR) which gives it better styling to the verification page but also better domain authority in the emailImportant notes
Outlook
Our email has
X-MS-Exchange-Organization-SCL: 5which is microsoft way of detecting spammy emails. The rating is 0-9, 5 triggers a junk email. Maybe in PROD not having the words (dev) will push us to a 4 which will not mark as junk. If this doesn't work, the next steps would be a custom emailNext Steps
If changing the sender to mobilitydatabase and changing the internal link to mobilitydatabase does not work, the next step would be to create a custom, less spammy looking email.
Once this PR goes in and works well on staging, there will be a frontend release, and then the settings will change for prod
Expected behavior:
When you get any email from the mobilitydatabase it should not go to junk email box.
When verifying your account using the link, it should now send you to
mobilitydatabase.org/email-verification (prod)
staging.mobilitydatabase.org//email-verification (staging)
Testing tips:
This cannot be tested in the preview URL due to the not stable DEV environment for the captcha and for the email link. Test locally by running the dev environment, creating an account
https://mobility-feeds-dev.firebaseapp.com/__/auth/action?mode=verifyEmail&oobCode=0PzwbD3CDQpmeVnkD1MJ5OsH5-i1KtfQSVfpZy_sR5UAAAGdke5L0Q&apiKey=Aqqq&lang=enchange it to
localhost:3000/email-verification?mode=verifyEmail&oobCode=0PzwbD3CDQpmeVnkD1MJ5OsH5-i1KtfQSVfpZy_sR5UAAAGdke5L0Q&apiKey=aaa&lang=enThe reason for this manual change is because DEV does not have a stable URL to put into firebase
Please make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anything