Fixing Token Expiration and Session Management in Lovable

Why sessions expire unexpectedly in Lovable apps

Lovable projects use Supabase for authentication, which issues JWT (JSON Web Token) access tokens with a default expiry of one hour. When that token expires and your app does not refresh it, every authenticated request starts failing — the user appears logged out even though they never clicked 'sign out'. The Supabase client library includes built-in token refresh logic, but it only works if you set up an auth state listener at the top level of your React app. Many Lovable-generated projects either skip this listener or place it inside a component that unmounts during navigation, breaking the refresh cycle. Another common cause is tab backgrounding. When a user leaves your app tab inactive for an extended period, the browser may throttle JavaScript timers. The Supabase client tries to refresh the token before it expires, but if the timer was throttled, the refresh fires too late. The token is already expired, and the refresh token itself may have also expired if the gap is long enough.

• Missing onAuthStateChange listener at the app root, so token refresh never triggers
• Auth state listener placed inside a component that unmounts during route changes
• Browser tab backgrounded for longer than the JWT expiry window, causing both tokens to expire
• Supabase JWT expiry set too short (under 3600 seconds) for a typical user session
• Multiple Supabase client instances competing for the same session storage

Error messages you might see

Before you start

• A Lovable project with Supabase authentication enabled
• At least one sign-in method configured (email, magic link, or OAuth)
• Access to your Supabase dashboard to check JWT settings
• The project open in Lovable's editor or Dev Mode

How to fix it

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Index from "./pages/Index";
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Index />} />
      </Routes>
    </BrowserRouter>
  );
}

import { useEffect, useState } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Session } from "@supabase/supabase-js";
import { supabase } from "@/integrations/supabase/client";
import Index from "./pages/Index";
function App() {
  const [session, setSession] = useState<Session | null>(null);
  useEffect(() => {
    // Get the initial session on mount
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
    });
    // Listen for all auth changes including token refresh
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
      }
    );
    // Clean up the listener when App unmounts
    return () => subscription.unsubscribe();
  }, []);
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Index />} />
      </Routes>
    </BrowserRouter>
  );
}

// src/pages/Dashboard.tsx - BAD: creating a second client
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
);

// src/pages/Dashboard.tsx - GOOD: import the shared client
import { supabase } from "@/integrations/supabase/client";
// Use this single instance for all Supabase operations
// The shared client in client.ts handles token refresh globally

async function fetchUserData() {
  const { data, error } = await supabase
    .from("profiles")
    .select("*")
    .single();
  // No error handling — app breaks silently on expired session
  setProfile(data);
}

async function fetchUserData() {
  const { data: { session } } = await supabase.auth.getSession();
  if (!session) {
    // Session is completely gone — redirect to login
    navigate("/login", { replace: true });
    return;
  }
  const { data, error } = await supabase
    .from("profiles")
    .select("*")
    .single();
  if (error?.message?.includes("JWT expired")) {
    // Token expired mid-request — force a refresh attempt
    const { error: refreshError } = await supabase.auth.refreshSession();
    if (refreshError) {
      navigate("/login", { replace: true });
      return;
    }
    // Retry the original request after refresh
    const { data: retryData } = await supabase
      .from("profiles")
      .select("*")
      .single();
    setProfile(retryData);
    return;
  }
  setProfile(data);
}

Complete code example

1import { useEffect, useState } from "react";
2import { useNavigate } from "react-router-dom";
3import { Session, AuthChangeEvent } from "@supabase/supabase-js";
4import { supabase } from "@/integrations/supabase/client";
5
6export function useAuth(requireAuth = true) {
7  const navigate = useNavigate();
8  const [session, setSession] = useState<Session | null>(null);
9  const [isLoading, setIsLoading] = useState(true);
10
11  useEffect(() => {
12    // Fetch current session on mount
13    supabase.auth.getSession().then(({ data: { session } }) => {
14      setSession(session);
15      setIsLoading(false);
16
17      if (requireAuth && !session) {
18        navigate("/login", { replace: true });
19      }
20    });
21
22    // Subscribe to all auth state changes
23    const { data: { subscription } } = supabase.auth.onAuthStateChange(
24      (event: AuthChangeEvent, session: Session | null) => {
25        setSession(session);
26
27        if (event === "SIGNED_OUT" && requireAuth) {
28          navigate("/login", { replace: true });
29        }
30
31        if (event === "TOKEN_REFRESHED") {
32          // Token was refreshed successfully — no action needed
33          console.log("Session token refreshed");
34        }
35      }
36    );
37
38    return () => subscription.unsubscribe();
39  }, [navigate, requireAuth]);
40
41  const signOut = async () => {
42    await supabase.auth.signOut();
43    navigate("/login", { replace: true });
44  };
45
46  return { session, isLoading, signOut, user: session?.user ?? null };
47}

Best practices to prevent this

• Always place the onAuthStateChange listener in your root App component so it persists across all route changes and never unmounts
• Use a single shared Supabase client instance — search your project for createClient() and ensure there is exactly one call
• Keep JWT expiry at 3600 seconds (the default) unless you have a specific security requirement for shorter sessions
• Handle the SIGNED_OUT event by redirecting to the login page to prevent users from seeing broken authenticated pages
• Wrap authenticated API calls in error handlers that detect 401 responses and attempt a session refresh before giving up
• Test session persistence by leaving your app tab inactive for over an hour, then returning and verifying you are still logged in
• Never store access tokens in React state alone — Supabase stores them in localStorage automatically, which survives page refreshes

Still stuck?

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

Related error patterns