How to keep Supabase session synced between Next.js app and Plasmo Chrome extension?

I'm building a Chrome extension using Plasmo and a web app using Next.js (App Router). I'm using Supabase for authentication, and I want the auth session to stay in sync between the web app and the extension.

Currently, I'm:

• Logging in on the web app.
• Sending the session to the extension via chrome.runtime.sendMessage.
• Setting the session in the extension's background script using supabase.auth.setSession.

This works when logging in but sometimes in the extension it logs out automatically for some reason.

Here’s what I’m doing:

Web app code (sends session to extension):

"use client";

import { createClient } from "@/utils/supabase/client";
import { useEffect } from "react";

export default function SendSessionToExtension() {
  useEffect(() => {
    const supabase = createClient();

    const { data: listener } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        if (!chrome.runtime) return;

        const crxId = process.env.NEXT_PUBLIC_CRX_ID;
        if (!crxId) return;

        chrome.runtime.sendMessage(
          crxId,
          { type: "SYNC_SESSION", event, session },
          (response) => {
            if (chrome.runtime.lastError) {
              console.error("Error sending message:", chrome.runtime.lastError);
            } else {
              console.log("Message sent successfully:", response);
            }
          }
        );
      }
    );

    return () => listener.subscription.unsubscribe();
  }, []);

  return null;
}

Extension background script (sets session):

import { supabase } from "~core/supabase";

chrome.runtime.onMessageExternal.addListener(
  async (message, sender, sendResponse) => {
    if (message.type === "SYNC_SESSION") {
      if (message.session) {
        await supabase.auth.setSession({
          access_token: message.session.access_token,
          refresh_token: message.session.refresh_token
        });

        chrome.storage.local.set({ user: message.session });
        sendResponse({ success: true });
      } else {
        await supabase.auth.signOut();
        chrome.storage.local.remove("user");
        sendResponse({ success: true });
      }
    }
    return true;
  }
);

Problem:

• Sometimes the extension gets logged out randomly.
• Not sure if I'm syncing the session correctly or handling it the right way.
• Maybe cookies or background service worker behavior are affecting this?

Questions:

• What's the correct way to persist and sync auth session between a Next.js app and a Chrome extension using Supabase?
• Do I need to handle token refresh manually inside the extension?
• Am I missing something with cookies or permissions?

Let me know if more context is needed. Thanks!