[COOP/COEP] Firebase auth hangs at the auth route, then returns with no success or error message

[connorjclark]

[REQUIRED] Describe your environment

• Operating System version: Mac
• Browser version: 100.0.4896.127
• Firebase SDK version: 9.7.0
• Firebase Product: auth

Note: this auth flow was working previously (last known working date ~mid March), but has since broken even though no code changes occurred on my end.

[REQUIRED] Describe the problem

Steps to reproduce:

1. Navigate to https://hoten.cc/gridia/play/?debugFirebase
2. Click Join Server
3. Choose sign in with google
4. https://gridia-434b8.firebaseapp.com/__/auth/handler?state=... opens and loads for ~10 seconds, then returns to the page
5. Auth page closes, but webapp was not given any response (success or otherwise). Neither signInSuccessWithAuthResult or signInFailure was called

However, the "Sign in with email" flow does work.

Relevant Code:

Relevant code from repro given above (there are also source maps, the relevant file is account-scene.tsx:

const unsubscribe = this.firebaseAuth.onAuthStateChanged(async (user) => {
  unsubscribe();

  if (user) {
    const firebaseToken = await user.getIdToken(true);
    await this.login(firebaseToken);
    return;
  }

  Helper.createChildOf(document.head, 'link', '', {
    rel: 'stylesheet',
    href: 'https://www.gstatic.com/firebasejs/ui/5.0.0/firebase-ui-auth.css',
  });
  const ui = new firebaseui.auth.AuthUI(this.firebaseAuth);
  const signInOptions = [
    // TODO: why isn't this working any more?
    // GoogleAuthProvider.PROVIDER_ID,
    {
      provider: EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false,
    },
  ];
  if (new URL(location.href).searchParams.has('debugFirebase')) {
    // @ts-expect-error
    signInOptions.unshift(GoogleAuthProvider.PROVIDER_ID);
  }

  ui.start('.firebaseui-auth-container', {
    signInOptions,
    signInFlow: 'popup',
    callbacks: {
      signInSuccessWithAuthResult: (authResult) => {
        this.onFirebaseAuthSuccess(authResult);

        // Return control to the game (no redirect).
        return false;
      },
      signInFailure: (authResult) => {
        console.error(authResult);
      },
    },
  });
});

[connorjclark]

Now that I've written all this up... I've realized that I recently set COOP/COEP headers on my server:

cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin

And that DevTools does mention this (but they've moved these messages from the console to a new panel so I missed it...)

Without the above headers it works again.

1) Is there a way for the Firebase SDK to notice this iframe failed to load and error in the console / wire it to firebaseui's signInFailure ? 2) How can I continue to use COEP/COOP and have firebase work?

[connorjclark]

FYI the above link will not repro anymore because I configured my server to only serve COEP/COOP on the pages I need it, and this wasn't one of them.

[sam-gc]

Hi @connorjclark, unfortunately there is currently no way around having the iframe be cross-origin, and the iframe is necessary for both signInWithPopup and signInWithRedirect. As far as propagating that error, it should show as a network error. We will investigate when we have time

[schlosser]

We're seeing a similar issue: https://github.com/firebase/firebase-js-sdk/issues/6206, not sure if they should be duplicates or not

[ForbiddenEra]

Responding here as I don't know if there's a better place..

Been trying to get my site crossOriginIsolated so I can use SharedArrayBuffers. It was working great about two weeks ago with the only issue being a Discord widget iframe, which they've since added the appropriate headers.

When I went to test that, now I'm getting COEP errors for Google Login, on both FF+Chrome - no changes to headers on my end.

I'm not sure why the header was removed from such requests recently; I had crossOriginIsolated working perfect w/Google Login both button and one tap popup not even two weeks ago.

I can only get it working now by removing the COEP header entirely, even credentialless isn't working, even though that's only just become available as preview on FF.

I'm sure this header was set properly just a few weeks ago, but who can't help but feel gaslit sometimes these days when things suddenly don't work that did last week and you've had like 3-10 browser updates since and even if it was browser related, probably can't go back to that specific version ;)

Chrome even says its google headers not set properly :(

Since corp is already set to cross-origin (as shown in screenshot), we just need coep set to require-corp on google end..

Edit: I would literally put a Proxy on document.createElement for iframes to add credentialless if it was more widely supported..

Google touts this stuff but doesn't follow it??

https://developer.chrome.com/blog/iframe-credentialless/

While cross-origin isolation brings webpages better security and the ability to enable powerful features, deploying COEP can be difficult. One of the biggest challenges is that all cross-origin iframes must deploy COEP and CORP. Iframes without those headers will not be loaded by the browser.

[BryanEnid]

Happy New Year! Hey, is this resolved? It's been a year and a half.

[NhienLam]

We’re tracking this as a feature request. But this is not currently on our roadmap and I can't make any promises about when it may be.

[NhienLam]

@ForbiddenEra This seems to be a duplicate of https://github.com/firebase/firebase-js-sdk/issues/6467

[ForbiddenEra]

We’re tracking this as a feature request. But this is not currently on our roadmap and I can't make any promises about when it may be.

Feature request? Not really.

It's missing a header that should be there and breaks things; I'm not using firebase specifically Google Login is fairly tied in though and it causes issues.

That header, COEP - cross origin embedding policy allows the server to define if, or who may embed resources from that server on their web pages. By not having this header, it's akin to Google saying "No, you're not allowed to embed the iframe on your page, even though our library embeds that on your page". Fortunately, COEP isn't 100% strict, but as mentioned it does kill crossOriginIsolated which prevents the usage of certain features.

Unlike the recommend in that duplicate thread though, I don't think I can self host anything when using the Google Login libraries; I don't really want to use firebase or do oAuth stuff otherwise - the Google JS library was trivial to implement, once I dug past everything trying to push me towards firebase to use Google login at all.

@ForbiddenEra This seems to be a duplicate of #6467

Not sure; but it seems this problem is semi-widespread at Google. It always fascinates me how Google can create the most popular browser and half the web including things such as defining or helping define the spec for things such as CORS/COEP/COOP but then absolutely fail when implementing it. Eh.

[nucli-simon]

Is there any horizon on the roadmap on this? This should be implemented. Not able to use COEP and google signin.

[hsubox76]

If the core problem is that the Firebase Hosting endpoint https://your-project.firebaseapp.com/__/auth/handler isn't accepting COOP/COEP headers, the Firebase Hosting team has been notified and is looking into fixing this. Since this isn't something we can fix in the SDK code, and is being handled by a separate team, I can't give a timeline.

I can add the internal tracking bug for other SDK team members who want to keep checking and providing updates here b/373645651

[rayliverified]

@hsubox76 , I believe the cause of the issue is adding the cross origin headers to the host site.

We're seeing the issue affecting all Auth providers with Flutter Wasm because Wasm requires the headers.