supabase.auth.onAuthStateChange Not Working when React app is in iframe

Question

I am using Supabase user authentication in a React app hosted at https://example.com that is running inside an iframe injected by a Chrome extension chrome-sidebar when the browser is on a different domain/website https://google.com.

By adding console.log calls into the React app and observing for them, I notice that the React effect is run once as expected, but supabase.auth.onAuthStateChange is never fired when the user logs in successfully.

function App() {
  const [session, setSession] = useState(null);

  useEffect(() => {
    setSession(supabase.auth.session());
    console.log("session:", session);

    supabase.auth.onAuthStateChange((_event, session) => {
      console.log("supabase.auth.onAuthStateChange"); // THIS DOES NOT RUN WHEN USER LOGS IN
      setSession(session);
    });
  }, []);

...

❌ Browser at https://google.com, iframe at https://example.com:

1. session is null when useEffect first runs, as expected since the user is not logged in yet
2. supabase.auth.onAuthStateChange never runs on user login
3. supabase.auth.token is not found in Local Storage on user login

However, if we also run the React app directly by navigating a Chrome browser to https://example.com, everything works as expected:

✅ Browser at https://example.com, no iframe:

1. supabase.auth.onAuthStateChange fires and prints the console.log message
2. The session data is stored in Storage > Local Storage > https://example.com under the key supabase.auth.token

How can we get supabase.auth.onAuthStateChange to work when the React app is inside an iframe?

---

✅ Browser and Iframe both at https://example.com:

Both browser and iframe works as expected!