Migration/update authentication flow to use info banners replacing all toasts#3488
Conversation
…eplace inline alerts with scoped InfoBanner
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAuth UIs (login, forgot-password, Google auth) replaced local/toast notifications with the banner context (useBanner + BannerSlot). Routing and middleware were updated to remove special-case handling for /forgot-password, and the changelog records the release notes. ChangesAuth Flow Banner Migration
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginPage
participant AuthService
participant BannerContext
User->>LoginPage: submit credentials
LoginPage->>AuthService: signIn(credentials)
AuthService-->>LoginPage: success|error
LoginPage->>BannerContext: showBanner({severity, message, scoped:true})
BannerContext->>LoginPage: BannerSlot displays banner
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
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)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
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 |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/vertex/app/forgot-password/page.tsx`:
- Around line 41-45: The onSubmit function is currently logging the submitted
form values (console.log(values)) which exposes user email PII; remove that
console.log from the onSubmit handler (the function named onSubmit that accepts
z.infer<typeof forgotPasswordSchema>) and, if telemetry is needed, replace it
with a non-PII message such as a generic event or masked info before calling
showBanner({ severity: 'success', message: 'A password reset link has been sent
to your email.', scoped: true }).
In `@src/vertex/app/login/page.tsx`:
- Around line 149-150: The success banner call showBanner({ severity: 'success',
message: 'Welcome back!', scoped: true }) is immediately followed by
window.location.replace(result.url || redirectUrl), preventing the banner from
rendering; change the flow so navigation is deferred a short moment after
showing the banner (e.g., use a small setTimeout or await a resolved
promise/microtask) and then call window.location.replace(result.url ||
redirectUrl) so the banner can briefly appear; update the code around showBanner
and the subsequent window.location.replace to implement this delay.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a9982d36-60ed-4de5-8e0f-9bca2081bf8f
📒 Files selected for processing (3)
src/vertex/app/forgot-password/page.tsxsrc/vertex/app/login/page.tsxsrc/vertex/components/features/auth/google-auth-section.tsx
…paint the success banner
Codebmk
left a comment
There was a problem hiding this comment.
For testing, please use https://staging-vertex.airqo.net — we have separate staging and production environments, and the env variables handle that distinction.
Also worth noting: Forgot Password and Create Account are handled by a separate application (Analytics). Vertex simply redirects users there and does nothing else. Please verify that the redirect is the only behaviour happening on our end — we shouldn't be doing anything beyond that.
Let me know if this makes sense! @BwanikaRobert
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
| throw new Error("Could not confirm session. Please try again."); | ||
| } | ||
| ReusableToast({ message: "Welcome back!", type: "SUCCESS" }); | ||
| window.location.replace(result.url || redirectUrl); |
There was a problem hiding this comment.
only replace the toast, keep the window.location.... code as previously was @BwanikaRobert
|
Codebmk
left a comment
There was a problem hiding this comment.
Great work. Thanks @BwanikaRobert
Summary of Changes (What does this PR do?)
from floating toast notifications to top-of-page InfoBanners. This required
building a centralized banner infrastructure first a
BannerContext,BannerProvider,useBannerhook,BannerSlot, andGlobalBannerContainerthen wiring it into the root layout and replacing every
ReusableToastcall across the three auth pages.
forgot passwordandGoogle authlocally because the button links toa production page.
No new dependencies required.
Status of maturity (all need to be checked before merging):
How should this be manually tested?
/login, enter a valid email and click Continuebanner appears above the "Signing in as" box
before redirect
/forgot-password, submit the form — confirm the banner appearsabove the email input
the error banner appears in the login card rather than a floating toast
What are the relevant tickets?
Screenshots (optional)
Summary by CodeRabbit
Refactor
Chores
Documentation