Supabase Auth with token refresh

[isabelleilyia]

Hey everyone! I'm using Supabase Auth in my Chrome extension (built in React). I'm trying to get token refresh to be as consistent as possible, but the behavior has been quite inconsistent and I can't seem to pinpoint why. Here is my current setup:

1. Initializing supabase client using useClient from supabase-js library. I initialize it once and always return this Singleton. I initalize it with the following options:

// To fetch items from storage
export const getLocalStorage = async (key: string): Promise<any> =>
	(await chrome.storage.local.get(key))[key];

// To remove storage key from the chrome storage
export const removeLocalStorage = async (key: string): Promise<void> =>
	await chrome.storage.local.remove(key);

// For setting storage
export const setLocalStorage = async (dataObject: any): Promise<void> =>
	await chrome.storage.local.set(dataObject);

const storageAdapter: SupportedStorage = {
	getItem: async (name: string) => {
		return await getLocalStorage(name);
	},

	setItem: async (name: string, value: string) => {
		return await setLocalStorage({ [name]: value });
	},

	removeItem: async (name: string) => {
		return await removeLocalStorage(name);
	},
};

const options: SupabaseClientOptions<
	'public' extends keyof Database ? 'public' : string & keyof Database
> = {
	auth: {
		debug: true,
		persistSession: true,
		storage: storageAdapter,
		detectSessionInUrl: true,
		autoRefreshToken: true,
		flowType: 'pkce',
	},
};

2. I have an AuthContext that is initialized with the onAuthStateChange supabase listener:

const [session, setSession] = useState<Session | null>(null);
	const [user, setUser] = useState<User | null>(null);
	const [accessToken, setAccessToken] = useState<string | null>(null);
	const [isOpen, setIsOpen] = useState(false);

	const supabase = createClient();

	useEffect(() => {
		// Get initial session
		supabase.auth.getSession().then(({ data: { session } }) => {
			setSession(session);
			setUser(session?.user ?? null);
		});

		// Listen for auth changes
		const {
			data: { subscription },
		} = supabase.auth.onAuthStateChange((event, session) => {
			console.log(`Supabase auth event: ${event}`);
			setSession(session);
			setUser(session?.user ?? null);

			// Handle different auth events
			switch (event) {
				case 'SIGNED_IN':
					// Handle sign in (e.g., store user info in localStorage)
					setUser(session.user);
					setSession(session);

					break;
				case 'SIGNED_OUT':
					// Handle sign out (e.g., clear user info from localStorage)
					setUser(null);
					setSession(null);
					setAccessToken(null);
					break;
				case 'TOKEN_REFRESHED':
					// There is a background process that keeps track of when the session should be refreshed so we will always receive valid tokens by listening to this event.
					// The frequency of this event is related to the JWT expiry limit configured on the project, currently 1 hour.
					setAccessToken(session.access_token);
					setSession(session);
					setUser(session.user);

					break;
			}
		});

		// Cleanup subscription on unmount
		return () => {
			subscription.unsubscribe();
		};
	}, [supabase.auth]);

3. I have an auth wrapper for functions that access the database that accesses the session stored from this context to see if the user can make that db call. If not, I open the log in modal.

I can see in the console logs that the refresh is happening. However, if I close my laptop overnight, the next day it'll say the user needs to log in again. I'm wondering if this might have something to do with the app reinitializing/supabase client reinitializing? Is there anything that looks wrong in the code?

Thanks for the help :)

[rdavidwu]

if i'm reading your code correctly, your code in (2.) is part of your content script?

If so, your issue is happening because the content script reloads after you close your laptop and reopen it. So you lose the entire session.
I see you posted code for storing/retrieving from chrome storage, but you aren't using it?