Connection refused error with Supabase after implementing protected routes

[Ceejay222]

When implementing protected routes in a React application using Supabase authentication, users are experiencing connection refused errors with the message "project-id.supabase.co refused to connect". This occurs specifically after adding protected route functionality and affects the application's ability to authenticate users.

Steps to Reproduce

1. Set up a new React + Vite project with Supabase authentication
2. Implement protected routes using React Router
3. Configure Supabase client with authentication
4. Attempt to access a protected route
5. Connection is refused with the error: "project-id. superbase.co refused to connect"

Expected Behavior

• Protected routes should properly authenticate with Supabase
• No connection refused errors should occur
• Smooth transition between public and protected routes

Actual Behavior

• Connection to Supabase is being refused
• Authentication flow is broken
• Users cannot access protected routes
• Application becomes unresponsive

Environment

• React 18.3.1
• Vite 5.4.2
• @supabase/supabase-js latest
• React Router DOM 6.22.2
• Browser: Latest Chrome/Firefox
• OS: Windows/Mac/Linux

Relevant Code

The issue appears after implementing the following authentication flow:

// ProtectedRoute.tsx
export function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { user, initialized } = useAuthStore();
  const location = useLocation();

  if (!initialized) {
    return <LoadingSpinner />;
  }

  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return <>{children}</>;
}

[Ceejay222]

Additional Context
The error occurs consistently after implementing protected routes
No network errors are shown in the browser's developer tools before the connection refusal
The issue persists even after clearing browser cache and cookies
The Supabase project is confirmed to be active and running
Environment variables are correctly set
Possible Solutions Attempted
Added CORS headers to Vite configuration
Updated Supabase client configuration
Simplified authentication state management
Removed retry mechanisms
Verified environment variables
Impact
This issue blocks users from accessing protected routes and effectively breaks the authentication system, making the application unusable for authenticated features.

Additional Notes
The error seems to be related to the interaction between the authentication state management and the protected route implementation, possibly causing a race condition or improper initialisation of the Supabase client.