Can't set up FCM

[kirillleogky]

Error what I get:
FirebaseError: Messaging: A problem occurred while subscribing the user to FCM: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project. (messaging/token-subscribe-failed).
at requestGetToken (requests.ts:67:25)
at async getNewToken (token-manager.ts:139:17)
at async FirebaseMessagingWeb.getToken (web.ts:74:19)
at async getFCMToken (firebaseClient.ts:77:23)
at async firebaseClient.ts:82:30

src/core/clients/firebaseClient.ts

import { initializeApp, FirebaseOptions } from 'firebase/app'; import { getAuth, createUserWithEmailAndPassword, signInWithRedirect, signInWithPopup, signInWithEmailAndPassword, signInWithCustomToken, signOut, sendPasswordResetEmail, AuthProvider, OAuthProvider, GoogleAuthProvider, TwitterAuthProvider, FacebookAuthProvider, initializeAuth, indexedDBLocalPersistence, signInWithCredential, updateProfile, signInWithPhoneNumber, linkWithPhoneNumber, updatePhoneNumber, PhoneAuthProvider, } from 'firebase/auth'; import 'firebase/analytics'; import 'firebase/auth'; import 'firebase/database'; import 'firebase/messaging'; import { FirebaseAuthentication } from '@capacitor-firebase/authentication'; import { isNative } from '@shared/helpers/environment'; import { FirebaseMessaging, GetTokenOptions, } from '@capacitor-firebase/messaging'; const firebaseConfig: FirebaseOptions = { apiKey: import.meta.env.VITE__CVT_FIREBASE_API_KEY, authDomain: import.meta.env.VITE__CVT_FIREBASE_AUTH_DOMAIN, databaseURL: import.meta.env.VITE__CVT_FIREBASE_DB_URL, projectId: import.meta.env.VITE__CVT_FIREBASE_PROJECT_ID, storageBucket: import.meta.env.VITE__CVT_FIREBASE_STORAGE_BUCKET, messagingSenderId: import.meta.env.VITE__CVT_FIREBASE_MESSAGING_SENDER_ID, appId: import.meta.env.VITE__CVT_FIREBASE_APP_ID, measurementId: import.meta.env.VITE__CVT_FIREBASE_MEASUREMENT_ID, }; // Initialize Firebase export const app = initializeApp(firebaseConfig); if (!isNative()) { const getFCMToken = async () => { const options: GetTokenOptions = { vapidKey: import.meta.env.VITE__CVT_FIREBASE_PUBLIC_VAPID_KEY, }; options.serviceWorkerRegistration = await navigator.serviceWorker.register('firebase-messaging-sw.js'); const { token } = await FirebaseMessaging.getToken(options); return token; }; console.log('getFCMToken', await getFCMToken()); } const whichAuth = () => { if (isNative()) { return initializeAuth(app, { persistence: indexedDBLocalPersistence, }); } return getAuth(app); }; export const firebaseClient = { getAuth: whichAuth, auth: { createUserWithEmailAndPassword: (email: string, password: string) => createUserWithEmailAndPassword(whichAuth(), email, password), signInWithNative: async (provider: AuthProvider) => { if (provider instanceof GoogleAuthProvider) { const result = await FirebaseAuthentication.signInWithGoogle(); const credential = GoogleAuthProvider.credential(result.credential?.idToken, result.credential?.accessToken); return signInWithCredential(whichAuth(), credential); } if (provider instanceof OAuthProvider && provider.providerId === 'apple.com') { const result = await FirebaseAuthentication.signInWithApple({ skipNativeAuth: true, }); if (result.credential) { const credential = provider.credential({ idToken: result.credential.idToken, rawNonce: result.credential.nonce, accessToken: result.credential.accessToken, }); const userCredential = await signInWithCredential(whichAuth(), credential); if (result.user) { await updateProfile(userCredential.user, { displayName: result.user?.displayName }); } return userCredential; } return Promise.reject('Something went wrong'); } if (provider instanceof FacebookAuthProvider) { try { const result = await FirebaseAuthentication.signInWithFacebook(); if (result.credential?.accessToken) { const credential = FacebookAuthProvider.credential(result.credential.accessToken); return signInWithCredential(whichAuth(), credential); } return Promise.reject('Something went wrong'); } catch(err) { return Promise.reject('Something went wrong'); } } return Promise.reject('Provider not supported'); }, signInWithRedirect: (provider: AuthProvider) => signInWithRedirect(whichAuth(), provider), signInWithPopup: (provider: AuthProvider) => signInWithPopup(whichAuth(), provider), signInWithEmailAndPassword: (email: string, password: string) => signInWithEmailAndPassword(whichAuth(), email, password), signInWithCustomToken: (token: string) => signInWithCustomToken(whichAuth(), token), sendPasswordResetEmail: (email: string) => sendPasswordResetEmail(whichAuth(), email), signInWithPhoneNumber: (number: string) => signInWithPhoneNumber(whichAuth(), number, window.recaptchaVerifier), // @ts-ignore linkWithPhoneNumber: (number: string) => linkWithPhoneNumber(whichAuth().currentUser, number, window.recaptchaVerifier), verifyPhoneNumber: (number: string) => new PhoneAuthProvider(whichAuth()).verifyPhoneNumber(number, window.recaptchaVerifier), updateLinkedPhoneNumber: (verificationId: string, verificationCode: string) => { const phoneCredential = PhoneAuthProvider.credential(verificationId, verificationCode); // @ts-ignore return updatePhoneNumber(whichAuth().currentUser, phoneCredential); }, signOut: () => signOut(whichAuth()), OAuthProvider, GoogleAuthProvider, TwitterAuthProvider, FacebookAuthProvider, }, }; 

public/firebase-messaging-sw.js
EMPTY FILE

package.json

 "dependencies": { "@byteowls/capacitor-sms": "5.0.0", "@capacitor-community/contacts": "5.0.5", "@capacitor-community/fcm": "6.0.0", "@capacitor-firebase/authentication": "6.0.0", "@capacitor-firebase/messaging": "^6.1.0", "@capacitor/android": "6.1.0", "@capacitor/app": "6.0.0", "@capacitor/browser": "6.0.1", "@capacitor/core": "6.1.0", "@capacitor/geolocation": "6.0.0", "@capacitor/ios": "6.1.0", "@capacitor/keyboard": "6.0.1", "@capacitor/share": "6.0.1", "@capawesome/capacitor-badge": "6.0.0", "@emotion/react": "11.11.3", "@emotion/styled": "11.11.0", "@hotjar/browser": "1.0.9", "@mui/icons-material": "5.16.5", "@mui/lab": "5.0.0-alpha.122", "@mui/material": "5.11.12", "@mui/x-date-pickers-pro": "7.11.1", "@sandstreamdev/react-swipeable-list": "^1.0.2", "@sentry/react": "7.102.0", "@sentry/vite-plugin": "2.16.1", "@talkjs/react": "0.1.7", "@tanstack/react-query": "4.26.1", "@tanstack/react-virtual": "3.0.1", "@types/google-libphonenumber": "^7.4.30", "@types/google-map-react": "2.1.7", "axios": "1.3.4", "capacitor-native-settings": "6.0.0", "capacitor-plugin-app-tracking-transparency": "2.0.5", "chalk": "4.1.2", "clear": "0.1.0", "date-fns": "2.29.3", "date-fns-tz": "2.0.1", "figlet": "1.5.2", "firebase": "9.17.2", "geojson": "0.5.0", "google-libphonenumber": "^3.2.34", "google-map-react": "2.2.1", "inquirer": "8.0.0", "jsdom": "21.1.1", "lodash": "4.17.21", "query-string": "8.1.0", "react": "17.0.2", "react-device-detect": "2.2.3", "react-dom": "17.0.2", "react-facebook-pixel": "1.0.4", "react-firebase-hooks": "5.1.1", "react-hook-form": "7.43.5", "react-international-phone": "^4.2.9", "react-markdown": "9.0.1", "react-qr-code": "^2.0.15", "react-router": "6.9.0", "react-router-dom": "6.9.0", "react-spinners": "0.13.8", "react-text-loop": "^2.3.0", "react-use": "17.4.0", "rimraf": "4.4.0", "sanitize-html": "2.10.0", "supercluster": "8.0.1", "talkjs": "0.18.0", "use-supercluster": "1.1.0", "web-vitals": "3.3.0" }, "scripts": { "dev": "vite --host", "build": "tsc && vite build", "preview": "vite preview", "test": "vitest", "coverage": "vitest run --coverage", "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src", "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src", "ts": "tsc -p ./tsconfig.json", "sync": "npx cap sync" }, "devDependencies": { "@capacitor/cli": "6.1.0", "@testing-library/react": "14.0.0", "@testing-library/react-hooks": "8.0.1", "@types/geojson": "7946.0.11", "@types/lodash": "4.14.191", "@types/node": "18.15.1", "@types/react": "18.2.38", "@types/react-dom": "18.2.17", "@types/sanitize-html": "2.8.1", "@typescript-eslint/eslint-plugin": "5.56.0", "@typescript-eslint/parser": "5.56.0", "@vitejs/plugin-react": "3.1.0", "@vitest/coverage-c8": "0.29.2", "dotenv": "16.3.1", "eslint": "8.36.0", "eslint-config-react-app": "7.0.1", "typescript": "4.9.5", "vite": "4.1.4", "vite-plugin-eslint": "1.8.1", "vite-plugin-markdown": "2.1.0", "vite-plugin-svgr": "3.2.0", "vitest": "0.29.2" } 

vite.config.ts 

/// <reference types="vitest" /> import path from 'path'; import { defineConfig, splitVendorChunkPlugin } from 'vite'; import { sentryVitePlugin } from '@sentry/vite-plugin'; import react from '@vitejs/plugin-react'; import eslint from 'vite-plugin-eslint'; import svgr from 'vite-plugin-svgr'; import md, { Mode } from 'vite-plugin-markdown'; // https://vitejs.dev/config/ export default defineConfig({ publicDir: 'public/', resolve:{ alias:{ '@shared': path.resolve(__dirname, 'src/shared'), '@modules': path.resolve(__dirname, 'src/modules'), '@pages': path.resolve(__dirname, 'src/pages'), }, }, plugins: [svgr(), md({ mode: [Mode.REACT] }), react(), splitVendorChunkPlugin(), eslint(), sentryVitePlugin({ project: 'react', })], server: { port: 3000, }, test: { environment: 'jsdom', }, build: { sourcemap: true, }, });