auth/popup-closed-by-user error 2 seconds after signInWithPopup

Question

I am using firebase auth to authenticate users and do things on their behalf. I had this working before, and am having trouble figuring out what's going on now.

I'm using the example from the documentation almost unchanged:

import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { initializeApp } from "firebase/app";

const firebaseConfig = {
  // ...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export function signIn() {
  const provider = new GoogleAuthProvider();
  provider.addScope('https://www.googleapis.com/auth/contacts.readonly');

  console.log('before sign in');
  signInWithPopup(auth, provider)
    .then((result) => {
      console.log('success!');

      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = credential.accessToken;

      const user = result.user;
      console.log(token, user);
    }).catch((error) => {
      console.error(error.code);
    });
}

document.addEventListener('click', ()=>signIn());

When I click in the page, this is what happens:

1. The authentication popup opens and the 'before sign in' log is triggered
2. Wait for ~2 seconds
3. signInWithPopup throws a auth/popup-closed-by-user error

Answer 1

The issue was related to these HTTP headers I configured on my server:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

I added these when I was experimenting with SharedArrayBuffer. Removing them fixed the issue.

Answer 2

For me, I had this error on iOS Emulator if I tried to put this into the Info.plist

<key>FirebaseAppDelegateProxyEnabled</key>
<false/>