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,
  },
});