Unable to do social login in latest Firefox browsers

[apremkumar1989]

[REQUIRED] Describe your environment

• Mac OS, Mojave version 10.14.6
• Firefox 102.0.1 (64-bit)
• firebase js sdk version: 7.24.0
• firebase auth

[REQUIRED] Describe the problem

When trying to do signin with redirect (social login: google/facebook) in Firefox with "Enhanced Tracking Protection" enabled(Default setting), not able to login successfully. But if we disable "Enhanced Tracking Protection" , we are able to login successfully.

While debugging, we found(in the following code) that we are getting result as user with null object after calling firebase auth getRedirectResult() post login with "Enhanced Tracking Protection" enabled. If we disable "Enhanced Tracking Protection", we are getting valid result object and able to login successfully.

var p = firebase.auth().getRedirectResult();
   p.then(function (result) {
      ...
   });

As observed in Firefox 102.0.1, "Enhanced Tracking Protection" is enabled by default. Our application users using latest Firefox browsers are impacted due to the default setting.

Steps to reproduce:
In firefox browser, open the application with "Enhanced Tracking Protection" enabled. Now try to login with a social login provider(google/facebook). After getting redirected to the application from firebase and social login provider, login fails.

Image: "Enhanced Tracking Protection" enabled

Image: "Enhanced Tracking Protection" disabled

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[chaitanya4288]

I am also facing the same issue. Is there some solution or workaround for this issue?

[jbalidiong]

Hi @apremkumar1989, thanks for reaching out. This seems to be a duplicate of #6443. You can follow the suggestion provided by one of our engineers:

There are three ways to mitigate this for the moment, listed below from easiest to most complicated:

1. The easiest is to use signInWithPopup() instead of signInWithRedirect(). The former does not rely on browser storage.
2. If you are using Firebase Hosting, update the authDomain field in your Firebase Config to match the domain your app runs on. This will ensure that the iframe being opened is not cross-origin. To do this, you'll need to add `https://your-domain/__/auth/handler to the list of authorized redirect URIs for your OAuth app. How you do this depends on the provider. For Google, for example, you'd go to the Cloud Console's Credentials page, click into the "Web client" under the "OAuth 2.0 Client IDs" heading, and add that URI to the "Authorized redirect URIs" section. For the other providers, you can follow the "Before you begin" sections, but update the URL as described.
3. You can sign in to the OAuth provider manually, then simply authenticate with Firebase at the end using signInWithCredential(). For example, with Google: https://firebase.google.com/docs/auth/web/google-signin#advanced:-handle-the-sign-in-flow-manually

Let me know if this solution fits your use case.

[apremkumar1989]

Hi @jbalidiong
Thank you. We went with option 2 i.e.using a custom auth domain and it is working fine now.