FCM: getToken() works in ASP.NET but throws Authentication error in Vue JS

[Sark Mobiles]

I am able to get a token and receive messages when I use ASP.NET but when I try the same code in Vue JS, it throws Authentication error. I have raised it through Stackoverflow but no luck yet.

https://stackoverflow.com/questions/66933399/vuejs-firebase-throws-error-firebaseerror-messaging-a-problem-occurred-whil#66962938

The Vue JS code was working in mid-Feb. I had shelved it for a while. When I tried it again 3 days ago, I saw this error. This is my code. Please let me know how to get it working in Vue JS. I have all the functionality already done but stuck at this getToken().

            // Initialize Firebase
            // Your web app's Firebase configuration
            var firebaseConfig = {
                    apiKey: "<API-KEY>",
                    authDomain: "<project>.firebaseapp.com",
                    databaseURL: "https://<project>.firebaseio.com",
                    projectId: "<projectid>",
                    storageBucket: "<project>.appspot.com",
                    messagingSenderId: "<senderid>",
                    appId: "<appid>"
             };
            firebase.initializeApp(firebaseConfig);

            this.messaging = firebase.messaging();

            const page = this;

            firebase.auth().onAuthStateChanged((user) => {
                if (user) {
                    this.user = user;
                } else {
                    this.user = null;
                }
            });

            firebase.auth().signInWithEmailAndPassword("<email>", "<pwd>")
                .then((userCredential) => {
                    console.log('Successfully logged in:' + firebase.auth().currentUser.getIdToken());
                    page.userCredential = userCredential;

                    firebase.messaging()
                        .requestPermission()
                        .then(function () {
                            MsgElem.innerHTML = "Notification permission granted.";
                            console.log("Notification permission granted.");

                            // get the token in the form of promise
                            return firebase.messaging().getToken({ vapidKey: <VAPIDKEY> });
                        })
                        .then(function (token) {
                            TokenElem.innerHTML = "token is : " + token
                        })
                        .catch(function (err) {
                            ErrElem.innerHTML = ErrElem.innerHTML + "; " + err
                            console.log("Unable to get permission to notify.", err);
                        });
                })
                .catch(error => {
                    console.log("AuthError:" + error.message);
                });;


            // Handle incoming messages. Called when:
            // - a message is received while the app has focus
            // - the user clicks on an app notification created by a service worker
            //   `messaging.onBackgroundMessage` handler.
            this.messaging.onMessage((payload) => {
                console.log('Message received in onMessage. ' + JSON.stringify(payload));
                // Update the UI to include the received message.
                this.appendMessage(payload);
            });