Estoy usando la autenticación de usuario de Supabase en una aplicación React alojada en https://example.com que se ejecuta dentro de un iframe inyectado por una extensión de Chrome chrome-sidebar cuando el navegador está en un dominio/sitio web diferente https://google.com .

Al agregar llamadas a console.log en la aplicación React y observarlas, observo que el efecto React se ejecuta una vez como se esperaba, pero supabase.auth.onAuthStateChange nunca se activa cuando el usuario inicia sesión correctamente.

 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); }); }, []); ...

❌ Navegador en https://google.com , iframe en https://example.com :

1. session es null cuando useEffect se ejecuta por primera vez, como se esperaba, ya que el usuario aún no ha iniciado sesión
2. supabase.auth.onAuthStateChange nunca se ejecuta en el inicio de sesión del usuario
3. supabase.auth.token no se encuentra en el almacenamiento local en el inicio de sesión del usuario

Sin embargo, si también ejecutamos la aplicación React directamente navegando un navegador Chrome a https://example.com , todo funciona como se esperaba:

✅ Navegador en https://example.com , sin iframe:

1. supabase.auth.onAuthStateChange dispara e imprime el mensaje console.log
2. Los datos de la sesión se almacenan en Storage > Local Storage > https://example.com bajo la clave supabase.auth.token

¿Cómo podemos hacer que supabase.auth.onAuthStateChange funcione cuando la aplicación React está dentro de un iframe ?

✅ Navegador e Iframe ambos en https://example.com :

¡Tanto el navegador como el iframe funcionan como se esperaba!