Login with Google Provider is not working on Safari (both from macOS and iOS)

[danielemaddaluno]

Environment:

• Operating System version: macOS BigSur 11.6.1 (20G224)
• Browser version: Safari Version 15.1 (16612.2.9.1.30, 16612)
• Firebase UI version: 6.0.1
• Firebase SDK version: 9.1.3

Problem: I cannot manage to complete a login with Google provider on Safari browser, both on mac and iOS. I noticed this problem on my own project, but I tried on the official firebase/firebaseui-web demo and I have the same problem.

Steps to reproduce: Access on https://fir-ui-demo-84a6c.firebaseapp.com/ then click on Sign in with Google and try to log using Google as provider

On the console i read this error: Unhandled Promise Rejection: TypeError: Right side of assignment cannot be destructured from abstract_popup_redirect_operation.ts

[danielemaddaluno]

I think that issue #934 is related to this same problem

[danielemaddaluno]

I think that issue https://github.com/firebase/firebaseui-web/issues/947 is related to this same problem

[rejhgadellaa]

Just ran into this myself. I can't believe this hasn't had a single response & went unresolved since March but I did find a workaround for those who do run into this issue; seems like changing signInFlow: 'redirect' to 'popup' works, at least in Safari on macOS:

{
    callbacks: {
      signInSuccessWithAuthResult: () => true,
    },
    signInFlow: 'popup', // <<===== this works
    signInOptions:[
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      // ...
    ],
    signInSuccessUrl: location.href,
}

[danbaechtold]

Doesn't seem to help on iOS (at least in my app)..

[rejhgadellaa]

@danbaechtold Just to make sure... you say "app" so that could mean...

1) web app that runs in Safari, 2) web app that runs in Safari but as a standalone PWA (added to home screen) 3) web app that runs in Firefox / Chrome / etc 4) web app that runs in a native shell a la Cordova/Ionic/Capacitor

You'd expect that at least 2, probably 3 and maybe 4 would behave the same as 1 as they all have to use whatever WebKit engine ships with iOS, but there are subtle differences...

I've only tested my solution / workaround with Safari (so that's option 1).

[danbaechtold]

@rejhgadellaa It's case 1 here as well. Not sure if I'm doing something (else) wrong, but I'll just wait to see if with your hints it will finally get fixed for real, and then jump in again. Thanks for your work on this (and the other issue)!

[danbaechtold]

Hi all

This issue has now officially been solved by Google!

I've got the following mail with instructions to follow this guide (in my case, I had to choose Option 1): https://firebase.google.com/docs/auth/web/redirect-best-practices

Hi Daniel, We're writing to let you know that end users of applications using Firebase Authentication may not be able to authenticate if you're using the signInWithRedirect method and your users are using one of:

Safari 16.1+ on macOS iOS 16.1+ Firefox 109+

What do you need to know? Based on our records, you have an app that uses signInWithRedirect in the Web SDK API, meaning your users who use the platforms listed above are impacted.

What do you need to do? While we cannot control the version/settings of the browser sending the login request, we want to offer mitigations for authentication in your app to continue working for all users. Please follow our best practices guide to make sure users can use your app when additional browser platform updates are released. https://firebase.google.com/docs/auth/web/redirect-best-practices

Hint: By following the guide it almost worked out of the box. Only thing I had to do add was to go the Credentials API Console (https://console.cloud.google.com/apis/credentials), open the entry under "OAuth 2.0 Client IDs", and add the URLs there as well.

[jhuleatt]

We believe this was resolved https://github.com/firebase/firebaseui-web/issues/977#issuecomment-1316084766

firebase-ui 6.0.2 has been published on npm - https://www.npmjs.com/package/firebaseui