Add error-state handling for a failed OAuth callback in src/features/auth/pages/AuthCallbackPage.tsx

[Jagadeeshftw]

📌 Description

src/features/auth/pages/AuthCallbackPage.tsx handles the redirect back from GitHub OAuth. If the backend callback (internal/handlers/github_oauth.go) returns an error (denied consent, expired state, backend failure), this page needs a clear error UI rather than an infinite spinner or a blank screen, which is what typically happens when only the happy path is implemented.

🧩 Requirements and context

• Add explicit handling for an error query param / failed API response on mount.
• Show a clear, actionable error message with a way to retry sign-in, distinct from the loading state.
• Add a test for the error-param and network-failure paths, not just the success path.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b fix/auth-callback-error-state

2. Implement changes

• Modify: src/features/auth/pages/AuthCallbackPage.tsx — add error branch with a retry CTA.
• Add test: new test file covering error and network-failure scenarios.

3. Test and commit

• Run tests:

npm test -- run AuthCallbackPage

• Cover edge cases: GitHub returns an error param (user denied consent), backend session exchange fails with a 500, network failure during the callback request, user double-navigates back to this page after already completing auth.
• Include test output and details in the PR description.

Example commit message

fix: add error-state UI for failed OAuth callback

✅ Acceptance criteria

• A denied-consent or backend-failure callback shows a clear error state with a retry option, not an infinite spinner.
• Navigating back to this page after a completed auth doesn't get stuck.
• The happy-path success flow is unaffected.

🔒 Security notes

An error state that silently hangs could mask a real backend issue (e.g. state-mismatch CSRF rejection) from the user — surfacing it clearly also makes it easier to notice abuse attempts during support triage.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[elcabasa]

Hi Maintainers,

I'd like to work on this issue.

I have experience building and testing React authentication flows, including OAuth callbacks, asynchronous state handling, and error-state UX. This issue improves the resilience of the sign-in experience by ensuring users receive clear feedback when the OAuth callback cannot be completed.

For this task, I will:

Add explicit handling for OAuth callback failures by detecting:
An error query parameter returned from GitHub (e.g. user denied consent).
Backend session exchange failures.
Network failures during the callback request.
Introduce a dedicated error state that clearly explains the failure and provides a retry action to return the user to the sign-in flow, while keeping it visually distinct from the loading state.
Ensure the existing successful authentication flow remains unchanged.
Add comprehensive tests covering:
Error query parameter handling.
Backend API failure responses.
Network request failures.
Successful callback flow regression.
Navigating back to the callback page after authentication has already completed, ensuring the page does not remain stuck in a loading state.
Reuse the project's existing testing patterns and keep the implementation focused, easy to review, and consistent with the existing authentication flow.

I'll include the test results in the PR description and ensure the changes improve both user experience and regression coverage without altering the existing happy path.

Thank you for considering my application. I look forward to contributing!

[Jagadeeshftw]

Assigned @elcabasa to this issue. Please open a PR referencing this issue (e.g. Closes #493) when you're ready. If you have questions along the way, feel free to join our contributor chat: https://t.me/+vTbe0hOUKrFhNTJl

[grantfox-oss]

🦊 GrantFox — @elcabasa has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #493)
2. Your PR will be reviewed by the Grainlify maintainers

Good luck! Track your progress on GrantFox.

[Jagadeeshftw]

Unassigning @elcabasa — this has been assigned for more than 2 days with no PR opened yet. No worries if you're still working on it, just re-comment and we'll happily reassign once you're ready to pick it back up.