Search code examples
javascriptangularcookiesoauth-2.0firebase-hosting

3rd party cookies in Android 14/New Chrome using Angular/Firebase Auth/Hosting and NodeJs in Server

https://issuetracker.google.com/issues/383751192

We have this issue from the link above.

I'm sure it appears due to Chrome's new strict policies automatically blocking 3rd party cookies. Since on Android 13 (which I have in the car = using https://garagem-1f07e.web.app/link-account) and on the old Chrome that I have on Ubuntu 20.10 and on the new Firefox (Releasing all third party cookie options, using = https://garagem-1f07e.web.app/login) I don't have this issue.

The photo below refers to this project:https://developers.home.google.com/codelabs/smarthome-washer?hl=pt-br#1

and can help us resolve my issue.

However, this project (washer) had its front-end and back-end all done in nodejs. I don't want that. I want to do the front-end in Angular, as per the original project: https://medium.com/google-developers/smart-home-cloud-services-with-google-part-2-3901ab39c39c

enter image description here

Based on Washer's project (whose picture I posted above) I need to use document.cookie = '__session=' + token + ';max-age=3600'; in my Angular Project. I need help to implement this in my Angular project.

If you know of another solution (using SameSite=Strict, Secure in firebase.json, using CHIPS, etc...) I am open to solutions

Note-01:

As below, I'm using Angular 7 (I accept update suggestions as long as you support me on issues that may appear if I do the update):

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
   

Angular CLI: 7.3.10
Node: 18.20.5
OS: linux x64
Angular: 7.2.16
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.10
@angular-devkit/build-angular     0.12.4
@angular-devkit/build-optimizer   0.12.4
@angular-devkit/build-webpack     0.12.4
@angular-devkit/core              7.3.10
@angular-devkit/schematics        7.3.10
@angular/cdk                      7.3.7
@angular/cli                      7.3.10
@angular/fire                     5.4.2
@angular/material                 7.3.7
@ngtools/webpack                  7.2.4
@schematics/angular               7.3.10
@schematics/update                0.13.10
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.28.4**strong text**

Edit day 09-jan Note-02: I currently need help to finish migrating my client/backend project from Angular 7 to Angular 19. The errors I'm currently experiencing are the ones shown below. Probably due to the change (moving things from app.module.ts to main.ts) and inclusion of app.config.ts from Angular 14

login.component.ts:32 Firebase API called outside injection context: ɵzoneWrap(getRedirectResult)

login.component.ts:32 Calling Firebase APIs outside of an Injection context may destabilize your application leading to subtle change-detection and hydration bugs. Find more at https://github.com/angular/angularfire/blob/main/docs/zones.md

36 Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.

Edit day 11-jan Note-03: I now have Angular 19 (@angular/fire 19.0.0-rc.4) but the project does not work on Chrome on my Android 14 phone. I am now researching this: use document.cookie = '__session=' + token + ';max-age=3600'; in my Angular 19 Project

Note-04: Privacy Sandbox. Very good tool show issues enter image description here

Note-05=https://issuetracker.google.com/issues/389280099

Note-06: I'm switching from signinWithDirect to signinWithPopup (because a test project about firebase auth that I have, worked with Popup and presented my error that the main project using Direct).

The issue atual (When I switching) is(photo below): main-NYXVCRV2.js:8 Cross-Origin-Opener-Policy policy would block the window.closed call. enter image description here

Solution

  • In note-06 I said I was changing from signinWithDirect to signinWithPopup in the Original project. After this change and solving some minor issues, the project worked on Chrome on Android-14, using Angular 7 or Angular 19