EXCEPTION: This browser is not supported or 3rd party cookies and data may be disabled

Question

This error occurs when our users "Block third-party cookies and site data".

To replicate the error, go to:

1. Check your Chrome browser "Block third-party cookies and site data" reference in this guide
2. Go to https://www.deeptent.com
3. Click SIGN IN
4. Next you will see a blank screen. And if you open up the browser developer console you will see this error:

We always advise our users to Uncheck the blocking of third-party cookies and site data; however, some users still prefer to block it.

1. One can still sign in to their Gmail with this blocked. Interestingly, why can't our users sign in using the Firebase-Google OAuth provided with their third party cookies & site data blocked?

2. We are built with Angular2 and Firebase. Is there no way that the users can still authenticate with third-party cookies and site data blocked?

Breakaway

I am not sure if Google sign in web library works in this mode. If so, you can sign in with that library in that case and then get the Google OAuth ID token/access token and sign in to Firebase using signInWithCredential. – Eleni

Sounds like a plan. Thanks – Breakaway

@choopage did it work? Just came across this error myself. – Torre

@choopage Hi, struggling the same problem.. I saw firebase docs guide that can help (section:"Advanced: Handle the sign-in flow manually" ). Did anyone manage to solve this? – Washhouse

@Washhouse I didn't go down the path of manual sign-in...custom token/JWT. I didn't do much about this. – Breakaway

@choopage - I eventually walked around by catching this error, show error message to the user and ask him to sign in with email and password. – Washhouse

did you do it in angular? and if yes, any sample repo that I could reference? Good idea to show a message telling them what to do. – Breakaway

how can the demo app work in this mode but not our sites? fir-ui-demo-84a6c.firebaseapp.com – Ceporah

Does Firebase still not support authentication with blocked 3rd party cookies? – Amitie

Answer 1

The domain you're using is deeptent.com, but the domain that firebase is authenticating against and setting cookies from is your .firebaseapp.com domain. So, yes, the cookies are considered third-party. The firebase folks really should take a harder look at how they are connecting custom domains in the firebase hosting setup. Also, see here: Use Google Firebase Authentication without 3rd Party Cookies

Algol

I wonder if we should just set the authDomain settings to the custom domain instead of the project's firebaseapp.com URL? – Boudreau

Answer 2

I had the same issue with firebase and Angular.

In your environment.ts file, look for:

firebase: {
  authDomain: '<domain>.firebaseapp.com',

And in chrome settings chrome://settings/content/cookies, add the following string to the cookies whitelist:

https://[*.]firebaseapp.com

Jarrell

In my project the authDomain settings is in the firebase.comfig.ts next to the environment.ts file in the environments directory. – Boudreau

Whitelisting the cookies did the trick. I guess for enhanced security I wouldn't whitelist the whole *.firebaseapp.com, but specifically for my project's URL? – Boudreau

yeeah except that your end users won't do that, you have to have the same environment as theirs. – Avidity

You expect end users to add these in whitelist? – Swanhilda

Answer 3

This error occurs when you're in Incognito Mode in most browsers. With a custom firebase domain.

2021 Solution

You can change the authDomain to use either the Same Domain OR a Sub Domain as the hosted application. This avoids the cookie error.

Custom Hosting Domain

If you're using a custom domain, you might want a setup like this:

mydomain.com      -> Hosted website
auth.mydomain.com -> Auth domain (firebaseConfig.authDomain)

To set this up you need to do the following:

1. Firebase Console > Authentication > Authorized domains Add auth.mydomain.com.
2. With your own DNS management, add the following DNS record:

TYPE  = CNAME   
HOST  = auth.mydomain.com
VALUE = my-project-id.firebaseapp.com
TTL   = 3600

3. Firebase Console > Hosting > Add custom domain (add auth.mydomain.com)
4. Then in the firebaseConfig in your app change the value of authDomain to use auth.mydomain.com

Note

This solution won't work when running on localhost, as the authDomain won't be a subdomain of localhost.

The easiest solution in this case is to allow 3rd party cookies on your local domain, here's how to do it in Chrome:

Go To: chrome://settings/cookies

Shaffer

I'm using app engine to host. when I add custom domain (auth.example.com), it's asking me to add a CNAME that points auth.example.com to ghs.googlehosted.com, and I cant change the value. This creates a problem when I added SSL because even when redirect is successful, it's showing that the certificate belongs to firebaseapp.com, not example.com. Hence, creating invalid certificate warning. Any suggestion? – Choate

Answer 4

Not recommended, because this solution won't work for everyone

Chrome Only:

Open content settings in chrome Content Settings > Cookies

and select cookies. In there, find Block third party cookies and disable it.

Note: every other browser probably has this option, its only a matter of looking in the right place :)

Siqueiros

It doesn't solve the problem. You cannot tell all your clients to do this to be able to use your app. – Phaeton

Answer 5

The solution is much simple. Assuming you have hosted your app on Firebase Hosting and the example.com is already hosting your app that include the auth:

Your auth domain should looks like [projectid].firebaseapp.com

1. Change your authDomain for the Firebase config:

config = {
    apiKey: ...,
    authDomain: example.com,
    databaseURL: ...,
    projectId: ...,
    storageBucket: ...,
    appId: ...,
}

2. Allow a new redirect url for the OAuth ID client:
   From console.developers.google.com > your project > ids > ID clients OAuth 2.0
   Add https://example.com/__/auth/handler to the list of authorized redirect url

3. Deploy your hosting to include the change in step 1.

This method does not need to add a CNAME which would probably not work due to missing certificate for https.

Official doc https://firebase.google.com/docs/auth/web/google-signin

Side note: don't forget to also update your other authentification methods such as GitHub, Facebook, etc to add this redirect url to the list.

Golightly

Answer 6

let config = { signInFlow: "popup", signInSuccessUrl: "/xxxx", signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID], // Other config options... };

You can use popup flow where third party cookies disabled.

Dockery