Fixing Login Issues on Page Refresh in Lovable Applications

Why auth state resets on page refresh in Lovable apps

Supabase Auth stores session tokens in the browser's localStorage. When you refresh the page, Supabase's client library reads these tokens and silently restores the session. However, this restoration is asynchronous — it does not happen instantly. If your app checks for a logged-in user before Supabase finishes restoring the session, it sees no user and redirects to the login page. This is the most common auth issue in Lovable projects. The AI typically generates authentication code that checks session state on component mount, but it often misses the timing gap between page load and session restoration. The result is a frustrating experience where users are logged in, refresh the page, and get kicked back to login. The fix is to use Supabase's onAuthStateChange listener, which fires whenever the auth state changes — including when the session is restored after a page refresh. By combining this listener with a loading state, your app waits for Supabase to confirm the session before deciding whether to show the dashboard or the login page.

• Missing onAuthStateChange listener: the app checks session state before Supabase restores it from localStorage
• Auth check runs synchronously on mount while session restoration is asynchronous
• getSession() called once on mount but the result arrives after the component already redirected to login
• Auth context provider does not track a loading/initializing state, causing premature redirects
• Session tokens expired and Supabase cannot refresh them (refresh token also expired or was revoked)

Error messages you might see

Before you start

• A Lovable project using Supabase Auth (email/password, magic links, or OAuth)
• An auth context or provider component that manages the current user state
• At least one protected route that should only be accessible to logged-in users
• Supabase project configured with correct Site URL (not localhost) in Supabase Dashboard → Authentication → URL Configuration

How to fix it

// AuthProvider.tsx — checks session once, misses async restoration
const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);
  useEffect(() => {
    // This runs before Supabase restores the session
    const { data } = supabase.auth.getSession();
    // data.session is null because restoration hasn't finished
  }, []);
  return <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>;
};

// AuthProvider.tsx — listens for auth state changes including restoration
const AuthProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true); // Wait for session check
  useEffect(() => {
    // Listen for all auth state changes (login, logout, token refresh, session restore)
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null);
        setLoading(false); // Session check complete
      }
    );
    // Cleanup listener on unmount to prevent memory leaks
    return () => subscription.unsubscribe();
  }, []);
  return (
    <AuthContext.Provider value={{ user, loading }}>
      {children}
    </AuthContext.Provider>
  );
};

// ProtectedRoute.tsx — redirects immediately, no loading check
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { user } = useAuth();
  if (!user) {
    return <Navigate to="/login" replace />;
    // Redirects before session restoration completes
  }
  return <>{children}</>;
};

// ProtectedRoute.tsx — waits for session check before redirecting
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const { user, loading } = useAuth();
  if (loading) {
    // Show loading while Supabase restores the session from localStorage
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
      </div>
    );
  }
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  return <>{children}</>;
};

// Only using onAuthStateChange — may miss already-restored session
useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (_event, session) => {
      setUser(session?.user ?? null);
      setLoading(false);
    }
  );
  return () => subscription.unsubscribe();
}, []);

// Using both getSession and onAuthStateChange for complete coverage
useEffect(() => {
  // Get current session (may already be restored from localStorage)
  supabase.auth.getSession().then(({ data: { session } }) => {
    setUser(session?.user ?? null);
    setLoading(false);
  });
  // Listen for future auth changes (login, logout, token refresh)
  const { data: { subscription } } = supabase.auth.onAuthStateChange(
    (_event, session) => {
      setUser(session?.user ?? null);
    }
  );
  return () => subscription.unsubscribe();
}, []);

Complete code example

1import { createContext, useContext, useEffect, useState } from "react";
2import { User } from "@supabase/supabase-js";
3import { supabase } from "@/integrations/supabase/client";
4
5interface AuthContextType {
6  user: User | null;
7  loading: boolean;
8  signOut: () => Promise<void>;
9}
10
11const AuthContext = createContext<AuthContextType>({
12  user: null,
13  loading: true,
14  signOut: async () => {},
15});
16
17export const useAuth = () => useContext(AuthContext);
18
19export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
20  const [user, setUser] = useState<User | null>(null);
21  const [loading, setLoading] = useState(true);
22
23  useEffect(() => {
24    // Fetch current session (handles already-restored sessions)
25    supabase.auth.getSession().then(({ data: { session } }) => {
26      setUser(session?.user ?? null);
27      setLoading(false);
28    });
29
30    // Listen for auth changes (login, logout, token refresh)
31    const { data: { subscription } } = supabase.auth.onAuthStateChange(
32      (_event, session) => {
33        setUser(session?.user ?? null);
34      }
35    );
36
37    return () => subscription.unsubscribe();
38  }, []);
39
40  const signOut = async () => {
41    await supabase.auth.signOut();
42    setUser(null);
43  };
44
45  return (
46    <AuthContext.Provider value={{ user, loading, signOut }}>
47      {children}
48    </AuthContext.Provider>
49  );
50};

Best practices to prevent this

• Always use onAuthStateChange to track session changes — never rely on a one-time getSession check alone
• Add a loading state to your auth provider and check it in protected routes before redirecting to login
• Set Supabase Site URL to your published app domain, not localhost, in Supabase Dashboard → Authentication → URL Configuration
• Call supabase.auth.getSession() alongside the listener for faster initial session detection
• Clean up the onAuthStateChange subscription in your useEffect return function to prevent memory leaks
• Add all deployment URLs (lovable.app preview, published URL, custom domain) to Supabase's Redirect URLs list
• Handle expired sessions gracefully — show a re-login prompt instead of a cryptic error page
• Test auth persistence in incognito mode to simulate a clean browser state without cached sessions

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns