Skip to content

Migration/update authentication flow to use info banners replacing all toasts#3488

Merged
Baalmart merged 8 commits into
airqo-platform:stagingfrom
BwanikaRobert:migration/Update-Authentication-Flow-to-use-InfoBanners
May 16, 2026
Merged

Migration/update authentication flow to use info banners replacing all toasts#3488
Baalmart merged 8 commits into
airqo-platform:stagingfrom
BwanikaRobert:migration/Update-Authentication-Flow-to-use-InfoBanners

Conversation

@BwanikaRobert

@BwanikaRobert BwanikaRobert commented May 16, 2026

Copy link
Copy Markdown
Contributor

Summary of Changes (What does this PR do?)

  • Migrates the authentication flow (login, forgot password, Google OAuth)
    from floating toast notifications to top-of-page InfoBanners. This required
    building a centralized banner infrastructure first a BannerContext,
    BannerProvider, useBanner hook, BannerSlot, and GlobalBannerContainer
    then wiring it into the root layout and replacing every ReusableToast
    call across the three auth pages.
  • I couldn't test the forgot password and Google auth locally because the button links to
    a production page.

No new dependencies required.

Status of maturity (all need to be checked before merging):

  • I've tested this locally
  • I consider this code done
  • This change ready to hit production in its current state
  • The title of the PR states what changed and the related issues number (used for the release note).
  • I've included issue number in the "Closes [Vertex: Migration] Update Authentication Flow to use InfoBanners #3450 " part of the "What are the relevant tickets?" section to link the issue.
  • I've updated corresponding documentation for the changes in this PR.
  • I have written unit and/or e2e tests for my change(s).

How should this be manually tested?

  1. Run the Vertex app locally
  2. Go to /login, enter a valid email and click Continue
  3. On the password step, enter a wrong password and submit — confirm an error
    banner appears above the "Signing in as" box
  4. Click Change email — confirm the banner clears and you return to the email step
  5. Sign in with valid credentials — confirm a success banner briefly appears
    before redirect
  6. Go to /forgot-password, submit the form — confirm the banner appears
    above the email input
  7. (If Google OAuth is enabled) Trigger a Google sign-in failure — confirm
    the error banner appears in the login card rather than a floating toast

What are the relevant tickets?

Screenshots (optional)

Add b

before_banner efore/after screenshots of the login password step

page showing the banner in place of the old toast/alert.

after_banner

Summary by CodeRabbit

  • Refactor

    • Unified authentication notifications: login, password recovery, and Google sign-in now use a shared banner system with scoped success/error banners and banner slots on auth screens.
  • Chores

    • Removed the standalone forgot-password page and adjusted routing so forgot-password is now handled by auth middleware.
  • Documentation

    • Added a new changelog entry for Version 1.23.41 documenting these updates.

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 16, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2bb656a5-e4a9-443f-856d-8b8c9e44d1ae

📥 Commits

Reviewing files that changed from the base of the PR and between e10e815 and 6ad9c0d.

📒 Files selected for processing (5)
  • src/vertex/app/changelog.md
  • src/vertex/app/forgot-password/page.tsx
  • src/vertex/app/login/page.tsx
  • src/vertex/core/auth/authProvider.tsx
  • src/vertex/middleware.ts
💤 Files with no reviewable changes (1)
  • src/vertex/app/forgot-password/page.tsx
✅ Files skipped from review due to trivial changes (1)
  • src/vertex/app/changelog.md
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/vertex/app/login/page.tsx

📝 Walkthrough

Walkthrough

Auth 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.

Changes

Auth Flow Banner Migration

Layer / File(s) Summary
Forgot-password page banner migration
src/vertex/app/forgot-password/page.tsx
Removed local status state and useState import; replaced `setStatus("success"
Login page success/error banners and state cleanup
src/vertex/app/login/page.tsx
Imported useBanner and BannerSlot; derived showBanner/hideBanner; show scoped success ("Welcome back!") and error banners during credential sign-in; render BannerSlot in password step and call hideBanner() when returning to email step; added showBanner to onSubmit dependencies; updated “Forgot password?” link to open in a new tab.
Google auth section error banner
src/vertex/components/features/auth/google-auth-section.tsx
Imported useBanner, obtained showBanner, replaced toast-based error handling in handleGoogleAuth with showBanner({ severity: 'error', ... }), and added showBanner to the callback dependency array.
Auth route & middleware matcher update
src/vertex/core/auth/authProvider.tsx, src/vertex/middleware.ts
Removed /forgot-password from authRoutes and removed the forgot-password exclusion from the middleware matcher so those routes are handled by middleware.
Changelog entry
src/vertex/app/changelog.md
Added Version 1.23.41 release notes describing the banner migration, dead-code removal, and files modified/deleted list.

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

ready for review

Suggested reviewers

  • Baalmart
  • Codebmk
  • OchiengPaul442

Poem

🎈 Banners land where toasts once flew,
Messages scoped and neatly in view.
Login, reset, and Google sign-in,
All report status from inside the card within.
Small changes, clearer UI — cheers to that cue.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 25.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main objective: migrating authentication flows from toast notifications to info banners.
Linked Issues check ✅ Passed All code changes align with #3450 requirements: ReusableToast replaced with useBanner in login, forgot-password, and Google OAuth; BannerSlot added to pages; middleware and auth routes updated accordingly.
Out of Scope Changes check ✅ Passed All changes directly support the banner migration objective. Changelog and routing updates are necessary housekeeping for removing the deprecated forgot-password flow.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 8a2d92b and 97ac003.

📒 Files selected for processing (3)
  • src/vertex/app/forgot-password/page.tsx
  • src/vertex/app/login/page.tsx
  • src/vertex/components/features/auth/google-auth-section.tsx

Comment thread src/vertex/app/forgot-password/page.tsx Outdated
Comment thread src/vertex/app/login/page.tsx Outdated

@Codebmk Codebmk left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@Codebmk

Codebmk commented May 16, 2026

Copy link
Copy Markdown
Member

@coderabbitai review

@coderabbitai

coderabbitai Bot commented May 16, 2026

Copy link
Copy Markdown
Contributor
✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

throw new Error("Could not confirm session. Please try again.");
}
ReusableToast({ message: "Welcome back!", type: "SUCCESS" });
window.location.replace(result.url || redirectUrl);

@Codebmk Codebmk May 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

only replace the toast, keep the window.location.... code as previously was @BwanikaRobert

@BwanikaRobert

Copy link
Copy Markdown
Contributor Author

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

@BwanikaRobert
BwanikaRobert requested a review from Codebmk May 16, 2026 14:28

@Codebmk Codebmk left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work. Thanks @BwanikaRobert

@Baalmart
Baalmart merged commit ba2cfd1 into airqo-platform:staging May 16, 2026
17 of 18 checks passed
@Baalmart Baalmart mentioned this pull request May 16, 2026
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Vertex: Migration] Update Authentication Flow to use InfoBanners

3 participants