search

firebase / firebase-js-sdk

Firebase Javascript SDK
https://firebase.google.com/docs/web/setup
Other
4.82k stars 884 forks source link

The Firebase token is not being generated. #8473

Open uttkarsh-jawalekar opened 1 week ago

uttkarsh-jawalekar commented 1 week ago

Operating System

windows 10

Environment (if applicable)

Angular 15.2.9

Firebase SDK Version

9.23.0

Firebase SDK Product(s)

Messaging

Project Tooling

Angular universal app with webpack.

Detailed Problem Description

I have been using an Angular Universal project for the last 3 years. About a year ago, I installed Firebase for the push notification feature. This feature was working fine until suddenly, about a month ago, it stopped. The app initializes properly, but when calling the getToken method, it no longer returns a token. I deleted the Firebase IndexedDB from the browser, and since then, the token has never been generated. fid

Steps and code to reproduce issue

Create an angular universal app and install the following dependencies. "dependencies": { "@angular/animations": "^15.2.9", "@angular/common": "^15.2.9", "@angular/compiler": "^15.2.9", "@angular/core": "^15.2.9", "@angular/fire": "^7.6.1", "@angular/forms": "^15.2.9", "@angular/platform-browser": "^15.2.9", "@angular/platform-browser-dynamic": "^15.2.9", "@angular/platform-server": "^15.2.9", "@angular/router": "^15.2.9", "@angular/service-worker": "^15.2.10", "@aws-crypto/client-node": "4.0.0", "@ng-bootstrap/ng-bootstrap": "^12.0.1", "@nguniversal/express-engine": "^13.0.1", "@popperjs/core": "^2.11.7", "@scarf/scarf": "^1.1.1", "adm-zip": "^0.5.10", "angular-calendar": "^0.29.0", "angular-draggable-droppable": "^7.0.0", "angular-resizable-element": "^7.0.2", "async": "^3.2.5", "axios": "^1.6.8", "body-parser": "^1.20.2", "buffer": "^6.0.3", "calendar-utils": "0.10.1", "catch-express-error": "^1.0.3", "check-disk-space": "^3.4.0", "check-internet-connected": "^2.0.6", "compare-versions": "^3.4.0", "compression": "^1.7.4", "connect-redis": "^6.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "crypto-js": "^4.2.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", "dotenv": "^16.3.1", "electron-localshortcut": "^3.2.1", "electron-push-receiver": "^2.1.3", "express": "^4.18.2", "fabric": "^2.6.0", "fastest-expressjs-validator": "^1.0.2", "firebase": "^9.23.0", "form-data": "^4.0.0", "fs-extra": "^11.1.1", "graphql": "^16.8.1", "hammerjs": "^2.0.8", "i18n-nodejs": "^3.0.0", "istanbul": "^0.4.5", "jest": "^29.7.0", "jquery": "^3.7.0", "js-base64": "^3.7.5", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.29", "karma-spec-reporter": "^0.0.36", "lcov-result-merger": "^5.0.0", "lru-cache": "^8.0.4", "mathquill4quill": "^2.4.0", "moment": "^2.29.1", "ng-pick-datetime": "6.0.14", "ng-pick-datetime-moment": "1.0.6", "ngx-clipboard": "^15.1.0", "ngx-cookie-service": "^14.0.1", "ngx-cookie-service-ssr": "^14.0.1", "ngx-device-detector": "^3.0.0", "ngx-quill": "^15.0.0", "node-gyp": "^10.1.0", "node-os-utils": "^1.3.7", "platform": "^1.3.6", "positioning": "^2.0.1", "quill": "^1.3.7", "redis": "^4.6.6", "request": "^2.88.2", "request-filtering-agent": "^2.0.1", "rrule": "2.7.1", "rxjs": "~7.4.0", "sanitize-html": "^2.11.0", "shelljs": "^0.8.5", "socket.io": "^4.6.1", "socket.io-client": "^4.6.1", "sortablejs": "^1.15.0", "sqlite3": "^5.1.6", "supertest": "^6.3.3", "tslib": "^2.6.2", "winston": "^3.11.0", "xml-js": "^1.6.11", "zone.js": "~0.11.7", "zoomooz": "^1.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.8", "@angular-eslint/builder": "^15.2.1", "@angular-eslint/eslint-plugin": "^15.2.1", "@angular-eslint/eslint-plugin-template": "^15.2.1", "@angular-eslint/schematics": "^15.2.1", "@angular-eslint/template-parser": "^15.2.1", "@angular/cli": "^15.2.8", "@angular/compiler-cli": "^15.2.9", "@nguniversal/builders": "^13.0.1", "@types/async": "^3.2.20", "@types/body-parser": "^1.19.4", "@types/compression": "^1.7.4", "@types/connect-redis": "0.0.22", "@types/cors": "^2.8.13", "@types/crypto-js": "^4.1.3", "@types/date-fns": "^2.6.0", "@types/express": "^4.17.20", "@types/fabric": "4.5.8", "@types/jasmine": "^4.3.2", "@types/node": "^17.0.2", "@types/node-localstorage": "^1.3.0", "@types/quill": "^1.3.10", "@types/redis": "^4.0.11", "@types/request": "^2.48.7", "@typescript-eslint/eslint-plugin": "5.11.0", "@typescript-eslint/parser": "5.11.0", "electron": "^27.0.2", "electron-builder": "^24.6.4", "electron-packager": "^17.1.2", "eslint": "^8.41.0", "eslint-plugin-security": "^1.7.1", "jasmine-core": "~3.10.1", "karma": "~6.3.9", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.1", "karma-parallel": "^0.3.1", "karma-sonarqube-unit-reporter": "^0.0.23", "ngx-smooth-dnd": "0.2.6", "ts-node": "^10.4.0", "typescript": "~4.8.4" } }

google-oss-bot commented 1 week ago

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

uttkarsh-jawalekar commented 1 week ago

Operating System

windows 10

Environment (if applicable)

Angular 15.2.9

Firebase SDK Version

9.23.0

Firebase SDK Product(s)

Messaging

Project Tooling

Angular universal app with webpack.

Detailed Problem Description

I have been using an Angular Universal project for the last 3 years. About a year ago, I installed Firebase for the push notification feature. This feature was working fine until suddenly, about a month ago, it stopped. The app initializes properly, but when calling the getToken method, it no longer returns a token. I deleted the Firebase IndexedDB from the browser, and since then, the token has never been generated. fid

Steps and code to reproduce issue

Create an angular universal app and install the following dependencies. "dependencies": { "@angular/animations": "^15.2.9", "@angular/common": "^15.2.9", "@angular/compiler": "^15.2.9", "@angular/core": "^15.2.9", "@angular/fire": "^7.6.1", "@angular/forms": "^15.2.9", "@angular/platform-browser": "^15.2.9", "@angular/platform-browser-dynamic": "^15.2.9", "@angular/platform-server": "^15.2.9", "@angular/router": "^15.2.9", "@angular/service-worker": "^15.2.10", "@aws-crypto/client-node": "4.0.0", "@ng-bootstrap/ng-bootstrap": "^12.0.1", "@nguniversal/express-engine": "^13.0.1", "@popperjs/core": "^2.11.7", "@scarf/scarf": "^1.1.1", "adm-zip": "^0.5.10", "angular-calendar": "^0.29.0", "angular-draggable-droppable": "^7.0.0", "angular-resizable-element": "^7.0.2", "async": "^3.2.5", "axios": "^1.6.8", "body-parser": "^1.20.2", "buffer": "^6.0.3", "calendar-utils": "0.10.1", "catch-express-error": "^1.0.3", "check-disk-space": "^3.4.0", "check-internet-connected": "^2.0.6", "compare-versions": "^3.4.0", "compression": "^1.7.4", "connect-redis": "^6.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "crypto-js": "^4.2.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", "dotenv": "^16.3.1", "electron-localshortcut": "^3.2.1", "electron-push-receiver": "^2.1.3", "express": "^4.18.2", "fabric": "^2.6.0", "fastest-expressjs-validator": "^1.0.2", "firebase": "^9.23.0", "form-data": "^4.0.0", "fs-extra": "^11.1.1", "graphql": "^16.8.1", "hammerjs": "^2.0.8", "i18n-nodejs": "^3.0.0", "istanbul": "^0.4.5", "jest": "^29.7.0", "jquery": "^3.7.0", "js-base64": "^3.7.5", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.29", "karma-spec-reporter": "^0.0.36", "lcov-result-merger": "^5.0.0", "lru-cache": "^8.0.4", "mathquill4quill": "^2.4.0", "moment": "^2.29.1", "ng-pick-datetime": "6.0.14", "ng-pick-datetime-moment": "1.0.6", "ngx-clipboard": "^15.1.0", "ngx-cookie-service": "^14.0.1", "ngx-cookie-service-ssr": "^14.0.1", "ngx-device-detector": "^3.0.0", "ngx-quill": "^15.0.0", "node-gyp": "^10.1.0", "node-os-utils": "^1.3.7", "platform": "^1.3.6", "positioning": "^2.0.1", "quill": "^1.3.7", "redis": "^4.6.6", "request": "^2.88.2", "request-filtering-agent": "^2.0.1", "rrule": "2.7.1", "rxjs": "~7.4.0", "sanitize-html": "^2.11.0", "shelljs": "^0.8.5", "socket.io": "^4.6.1", "socket.io-client": "^4.6.1", "sortablejs": "^1.15.0", "sqlite3": "^5.1.6", "supertest": "^6.3.3", "tslib": "^2.6.2", "winston": "^3.11.0", "xml-js": "^1.6.11", "zone.js": "~0.11.7", "zoomooz": "^1.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.8", "@angular-eslint/builder": "^15.2.1", "@angular-eslint/eslint-plugin": "^15.2.1", "@angular-eslint/eslint-plugin-template": "^15.2.1", "@angular-eslint/schematics": "^15.2.1", "@angular-eslint/template-parser": "^15.2.1", "@angular/cli": "^15.2.8", "@angular/compiler-cli": "^15.2.9", "@nguniversal/builders": "^13.0.1", "@types/async": "^3.2.20", "@types/body-parser": "^1.19.4", "@types/compression": "^1.7.4", "@types/connect-redis": "0.0.22", "@types/cors": "^2.8.13", "@types/crypto-js": "^4.1.3", "@types/date-fns": "^2.6.0", "@types/express": "^4.17.20", "@types/fabric": "4.5.8", "@types/jasmine": "^4.3.2", "@types/node": "^17.0.2", "@types/node-localstorage": "^1.3.0", "@types/quill": "^1.3.10", "@types/redis": "^4.0.11", "@types/request": "^2.48.7", "@typescript-eslint/eslint-plugin": "5.11.0", "@typescript-eslint/parser": "5.11.0", "electron": "^27.0.2", "electron-builder": "^24.6.4", "electron-packager": "^17.1.2", "eslint": "^8.41.0", "eslint-plugin-security": "^1.7.1", "jasmine-core": "~3.10.1", "karma": "~6.3.9", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.1", "karma-parallel": "^0.3.1", "karma-sonarqube-unit-reporter": "^0.0.23", "ngx-smooth-dnd": "0.2.6", "ts-node": "^10.4.0", "typescript": "~4.8.4" } }

Below are my project setup files. This is a sample project created for testing purposes, using the same Firebase configuration as my main project. I have integrated Firebase initialization in this sample project in the same way as in my main project. app-component app-module environment worker structure

jbalidiong commented 1 week ago

Hi @uttkarsh-jawalekar, apologies for the delayed response and thank you for reaching out to us. I tried replicating the issue with the latest version (18.0.1) of AngularFire but I wasn't able to experience the same behavior. Clearing the indexDB will clear the current token. However, after refreshing the page, a new token will be created. Is this not the same as yours? Are you receiving any other errors aside from the previous one or you are not able to receive a new token?

I noticed you are using an outdated SDK. I suggest updating your SDK version to the latest version to eliminate bugs and to have the improvements from the newest version.

uttkarsh-jawalekar commented 6 days ago

Hi @jbalidiong Please follow these steps to set up the Angular project:

  1. Install Node, Angular, and npm: Refer to the below attachment for the specific versions required.

  2. ng add @nguniversal/express-engine

  3. Ensure that your Angular project is an Angular Universal project.

  4. Install the following dependencies:

"dependencies": { "@angular/animations": "^15.2.9", "@angular/common": "^15.2.9", "@angular/compiler": "^15.2.9", "@angular/core": "^15.2.9", "@angular/fire": "^7.6.1", "@angular/forms": "^15.2.9", "@angular/platform-browser": "^15.2.9", "@angular/platform-browser-dynamic": "^15.2.9", "@angular/platform-server": "^15.2.9", "@angular/router": "^15.2.9", "@angular/service-worker": "^15.2.10", "@aws-crypto/client-node": "4.0.0", "@ng-bootstrap/ng-bootstrap": "^12.0.1", "@nguniversal/express-engine": "^13.0.1", "@popperjs/core": "^2.11.7", "@scarf/scarf": "^1.1.1", "adm-zip": "^0.5.10", "angular-calendar": "^0.29.0", "angular-draggable-droppable": "^7.0.0", "angular-resizable-element": "^7.0.2", "async": "^3.2.5", "axios": "^1.6.8", "body-parser": "^1.20.2", "buffer": "^6.0.3", "calendar-utils": "0.10.1", "catch-express-error": "^1.0.3", "check-disk-space": "^3.4.0", "check-internet-connected": "^2.0.6", "compare-versions": "^3.4.0", "compression": "^1.7.4", "connect-redis": "^6.1.1", "cookie-parser": "^1.4.6", "cors": "^2.8.5", "crypto-js": "^4.2.0", "date-fns": "^2.30.0", "date-fns-tz": "^2.0.0", "dotenv": "^16.3.1", "electron-localshortcut": "^3.2.1", "electron-push-receiver": "^2.1.3", "express": "^4.18.2", "fabric": "^2.6.0", "fastest-expressjs-validator": "^1.0.2", "firebase": "^9.23.0", "form-data": "^4.0.0", "fs-extra": "^11.1.1", "graphql": "^16.8.1", "hammerjs": "^2.0.8", "i18n-nodejs": "^3.0.0", "istanbul": "^0.4.5", "jest": "^29.7.0", "jquery": "^3.7.0", "js-base64": "^3.7.5", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.29", "karma-spec-reporter": "^0.0.36", "lcov-result-merger": "^5.0.0", "lru-cache": "^8.0.4", "mathquill4quill": "^2.4.0", "moment": "^2.29.1", "ng-pick-datetime": "6.0.14", "ng-pick-datetime-moment": "1.0.6", "ngx-clipboard": "^15.1.0", "ngx-cookie-service": "^14.0.1", "ngx-cookie-service-ssr": "^14.0.1", "ngx-device-detector": "^3.0.0", "ngx-quill": "^15.0.0", "node-gyp": "^10.1.0", "node-os-utils": "^1.3.7", "platform": "^1.3.6", "positioning": "^2.0.1", "quill": "^1.3.7", "redis": "^4.6.6", "request": "^2.88.2", "request-filtering-agent": "^2.0.1", "rrule": "2.7.1", "rxjs": "~7.4.0", "sanitize-html": "^2.11.0", "shelljs": "^0.8.5", "socket.io": "^4.6.1", "socket.io-client": "^4.6.1", "sortablejs": "^1.15.0", "sqlite3": "^5.1.6", "supertest": "^6.3.3", "tslib": "^2.6.2", "winston": "^3.11.0", "xml-js": "^1.6.11", "zone.js": "~0.11.7", "zoomooz": "^1.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.8", "@angular-eslint/builder": "^15.2.1", "@angular-eslint/eslint-plugin": "^15.2.1", "@angular-eslint/eslint-plugin-template": "^15.2.1", "@angular-eslint/schematics": "^15.2.1", "@angular-eslint/template-parser": "^15.2.1", "@angular/cli": "^15.2.8", "@angular/compiler-cli": "^15.2.9", "@nguniversal/builders": "^13.0.1", "@types/async": "^3.2.20", "@types/body-parser": "^1.19.4", "@types/compression": "^1.7.4", "@types/connect-redis": "0.0.22", "@types/cors": "^2.8.13", "@types/crypto-js": "^4.1.3", "@types/date-fns": "^2.6.0", "@types/express": "^4.17.20", "@types/fabric": "4.5.8", "@types/jasmine": "^4.3.2", "@types/node": "^17.0.2", "@types/node-localstorage": "^1.3.0", "@types/quill": "^1.3.10", "@types/redis": "^4.0.11", "@types/request": "^2.48.7", "@typescript-eslint/eslint-plugin": "5.11.0", "@typescript-eslint/parser": "5.11.0", "electron": "^27.0.2", "electron-builder": "^24.6.4", "electron-packager": "^17.1.2", "eslint": "^8.41.0", "eslint-plugin-security": "^1.7.1", "jasmine-core": "~3.10.1", "karma": "~6.3.9", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.1.0", "karma-jasmine": "~4.0.1", "karma-parallel": "^0.3.1", "karma-sonarqube-unit-reporter": "^0.0.23", "ngx-smooth-dnd": "0.2.6", "ts-node": "^10.4.0", "typescript": "~4.8.4" }

  1. Serve your Angular app: Run npm run dev:ssr.

  2. Reproduce the issue: Once the app is served, delete the IndexedDB and refresh the browser. You should be able to reproduce the issue. If you have any questions about the setup, please refer to the comment above where I have attached my project files. Follow those instructions to set up your project similarly. Additionally, I have attached my project’s package.json file; please refer to that as well.

package

angular