Firebase Cloud Messaging : Request is missing required Authentication Credentials

Question

Trying to get the Firebase Cloud Messaging SDK to work with Nuxt JS I keep getting:

An error occurred while retrieving token. FirebaseError: Messaging: A problem occured while subscribing the user to FCM: Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential.

fcm.js which I'm running as a plugin in nuxt.config.js:

import firebase from "../firebase/init";

firebase
  .messaging()
  .usePublicVapidKey(
    "BDYE2EYHdIp8qHjTKcJYPvO4PgaAH2pSruP55FOtNs5jWsgdeg7YK6OgJ0daSu21kN7aSzU19NRXRqC4bfITZYQ "
  );

firebase
  .messaging()
  .getToken()
  .then((currentToken) => {
    console.log(currentToken);
    if (currentToken) {
      sendTokenToServer(currentToken);
      updateUIForPushEnabled(currentToken);
    } else {
      // Show permission request.
      console.log(
        "No Instance ID token available. Request permission to generate one."
      );
      // Show permission UI.
      updateUIForPushPermissionRequired();
      setTokenSentToServer(false);
    }
  })
  .catch((err) => {
    console.log("An error occurred while retrieving token. ", err);
    showToken("Error retrieving Instance ID token. ", err);
    setTokenSentToServer(false);
  });

The user is authenticated because I am able to access Firestore data and routes in my pages that I've guarded and I can see the UID details in my Vuex store. Removing the usePublicVapidKey() line doesn't work.

Answer 1

firebase
  .messaging()
  .usePublicVapidKey(
    "BDYE2EYHdIp8qHjTKcJYPvO4PgaAH2pSruP55FOtNs5jWsgdeg7YK6OgJ0daSu21kN7aSzU19NRXRqC4bfITZYQ "
  );

In the Firebase console there's a copy button next to the key pair. When I click that and paste it, it adds a space at the end.