24

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?

AL.
  • 36,815
  • 10
  • 142
  • 281
Jek
  • 5,546
  • 9
  • 37
  • 67
  • 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. – bojeil Jan 20 '17 at 06:50
  • Sounds like a plan. Thanks – Jek Jan 20 '17 at 06:57
  • @choopage did it work? Just came across this error myself. – Niklas Jul 15 '17 at 10:07
  • @choopage Hi, struggling the same problem.. I saw firebase docs [guide](https://firebase.google.com/docs/auth/web/google-signin#advanced-handle-the-sign-in-flow-manually) that can help (section:"Advanced: Handle the sign-in flow manually" ). Did anyone manage to solve this? – ykorach Aug 07 '17 at 11:46
  • @ykorach I didn't go down the path of manual sign-in...custom token/JWT. I didn't do much about this. – Jek Aug 30 '17 at 15:40
  • 1
    @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. – ykorach Aug 31 '17 at 08:52
  • 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. – Jek Sep 21 '17 at 11:13
  • how can the demo app work in this mode but not our sites? https://fir-ui-demo-84a6c.firebaseapp.com/ – Jayen Dec 11 '17 at 10:04
  • Does Firebase still not support authentication with blocked 3rd party cookies? – Norbert Mar 13 '19 at 02:11

6 Answers6

11

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

Mitch Rose
  • 126
  • 3
  • 6
  • I wonder if we should just set the `authDomain` settings to the custom domain instead of the project's `firebaseapp.com` URL? – Csaba Toth Sep 02 '18 at 20:52
10

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

Gus
  • 6,545
  • 4
  • 36
  • 39
  • In my project the `authDomain` settings is in the `firebase.comfig.ts` next to the `environment.ts` file in the `environments` directory. – Csaba Toth Sep 02 '18 at 20:47
  • 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? – Csaba Toth Sep 02 '18 at 20:51
  • 5
    yeeah except that your end users won't do that, you have to have the same environment as theirs. – Ayyash Apr 20 '19 at 15:20
  • 2
    You expect end users to add these in whitelist? – MiKr13 Jun 07 '20 at 14:49
2

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
  1. Firebase Console > Hosting > Add custom domain (add auth.mydomain.com)
  2. 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

enter image description here

Ben Winding
  • 10,208
  • 4
  • 80
  • 67
  • 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? – user2773013 Aug 24 '21 at 12:35
1

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 :)

Junaid
  • 4,682
  • 1
  • 34
  • 40
  • 1
    It doesn't solve the problem. You cannot tell all your clients to do this to be able to use your app. – TeoTN Mar 02 '19 at 20:37
1

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: ...,
}

  1. 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

  2. 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.

Hugo Gresse
  • 17,195
  • 9
  • 77
  • 119
0

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.

Jayanthi
  • 13
  • 5