fix(auth): implement toast notifications and resolve connection issue…

[atmihaa-06]

Description
This PR addresses critical issues regarding backend connectivity and user-facing error states during authentication, specifically closing SYS-01: Replace Blank Screen with Toast Notifications for Connection Failures.

Key Changes
Backend Environment Setup: Created and configured backend/.env to ensure the Python API correctly recognizes environment variables and binds to the appropriate port.

Server Initialization: Standardized backend startup using uvicorn, ensuring the API correctly loads required ML models and listens for requests on port 8000.

Frontend Error Resilience: Updated AuthPage.tsx to include try/catch logic and loading state management (idle | processing | error). This ensures that if the backend is unreachable, the application displays a professional error notification rather than failing silently or showing a broken interface.

OAuth Flow Improvements: Refactored handleGoogleLogin to utilize explicit window.location.href navigation, ensuring a reliable handshake between the frontend and the authentication server.

Verification Results
Backend Stability: Confirmed Application startup complete on port 8000 via Uvicorn.

Connection Resilience: Successfully validated that a Failed to fetch error (e.g., when the backend is offline) triggers the toast notification and updates the UI status to error, preventing a blank screen.

UI/UX: The application now provides clear visual feedback during authentication attempts.

Evidence:

1. Validation of SYS-01: Error-handling logic correctly intercepts connection failures (e.g., when the backend is offline) and displays a user-friendly toast notification instead of leaving the application in a broken state.

2.Robust Routing: Implemented a global 404 catch-all route to handle invalid navigation, ensuring a consistent user experience with a "Return Home" fallback instead of a blank or native browser error page.

Closes #12

---

Summary by cubic

Show toast notifications for auth and API errors and centralize network/HTTP handling with a safeFetch wrapper to avoid blank screens and connection failures. Added a global Toaster using react-hot-toast and a dark/light theme toggle with saved preference; completes SYS-01.

• Bug Fixes

  • Introduced safeFetch and handleResponse in src/lib/api.ts to standardize 4xx/5xx handling and show toasts for server/network errors; applied to apiFetch, submitScan, and getGradcam.
  • Improved OAuth in src/pages/AuthPage.tsx with full-page navigation, try/catch, and clearer "AUTH_INITIATED" messaging; handles query param errors without flicker.
  • Installed react-hot-toast, added a global Toaster in src/App.tsx, and a catch-all * route with src/pages/NotFound.tsx.

• New Features

  • Light/dark theme with toggleTheme and initTheme, CSS variables, early init, and a navbar toggle; persisted in localStorage to prevent flicker.

^{Written for commit 95f51cc. Summary will update on new commits.}

[vercel]

@atmihaa-06 is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

No issues found across 6 files

_{Re-trigger cubic}

[jpdevhub]

Great work on the routing and extracting the handleResponse logic!

However, there's one issue left: you added the try/catch block to catch network TypeErrors inside apiFetch, but you forgot to wrap the raw fetch calls inside submitScan and getGradcam in a try/catch as well.

If the backend drops during an image upload, fetch will throw an exception before it ever reaches your handleResponse, which will cause an unhandled rejection without a toast.

Could you please extract the try/catch logic into a reusable wrapper, or make sure all raw fetch calls in api.ts are wrapped so that ECONNREFUSED is caught everywhere?

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fresh-scan-ai	Ready	Preview, Comment	May 30, 2026 6:25pm

[atmihaa-06]

Thanks for the feedback! I've refactored the API layer to centralize error handling as suggested. Here’s a summary of the changes:

Created safeFetch: I moved the network-level try/catch logic into a reusable safeFetch wrapper, ensuring that any connection-related exceptions (like TypeError for ECONNREFUSED) are caught in one place.

Refactored apiFetch: apiFetch now calls safeFetch internally, maintaining consistent error handling for all JSON-based requests.

Updated submitScan & getGradcam: I refactored these methods to use safeFetch instead of raw fetch calls. This ensures that the FormData requests now properly trigger the toast notification and handle connection drops, preventing unhandled rejections.

[jpdevhub]

Thanks for contributing the code is clean, robust and satisfies all the contraints given.

[jpdevhub]

Just one quick housekeeping thing before we merge: could you edit the PR description and add the text Closes #12 anywhere in the body. This helps GitHub auto-close the issue for us.
Let me know when you've done that and I'll hit merge. Also, huge congrats on getting the very first SSoC PR shipped for FreshScan AI, also dont forget to star the repo!

[atmihaa-06]

Done! You can merge the PR now. Thank you so much

[atmihaa-06]

Can I know when this will be merged?

[cubic-dev-ai]

1 issue found across 6 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/main.tsx">

<violation number="1" location="src/main.tsx:10">
P1: Unprotected top-level `initTheme()` call can crash app startup on exceptions</violation>
</file>

<sub>Tip: Review your code locally with the cubic CLI to iterate faster.

Re-trigger cubic</sub>

[cubic-dev-ai]

P1: Unprotected top-level initTheme() call can crash app startup on exceptions

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/main.tsx, line 10:

<comment>Unprotected top-level `initTheme()` call can crash app startup on exceptions</comment>

<file context>
@@ -4,6 +4,10 @@ import posthog from 'posthog-js'
+import { initTheme } from './lib/theme';
+
+// Initialize theme before rendering the app to prevent flicker
+initTheme();
 
 // PostHog is only initialized when the key is present.
</file context>

Suggested change

	initTheme();
	try {
	initTheme();
	} catch {
	// Silently degrade if theme init fails — avoids a blank screen.
	}

[jpdevhub]

why you have push another pr in this branch ?

[atmihaa-06]

Sorry for that, that was by mistake. I have changed it.

[jpdevhub]

It will be merged when the SSoC website will be live and fully functional. As of know 1 june is the starting date.

[atmihaa-06]

hey! since its june 1st today, hoping that you will merge the PR.

[jpdevhub]

hehe i said i will merge means i will merge. Dont forget to star the repo and looking forward for more contributions !