"request Is Missing Authentication Credential" Error When Calling Firebase.messaging.gettoken()

I am following the tutorial to add push notifications to a web app, including calling firebase.messaging.usePublicVapidKey with the VAPID key. However, when I'm calling getToken I

Solution 1:

Clear your site data!

After struggling with this for some time I cleared my site data and the auth error did not occur again. We use Firestore with custom auth tokens to retrieve realtime data in another part of the site and I suspect it caused the problem.

Solution 2:

Did you initialize with a Firebase configuration object?

import firebase from"firebase/app";
import"firebase/messaging";

const firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

let messaging;
try {
  messaging = firebase.messaging();
  messaging.usePublicVapidKey("publicVapidKey");
} catch (e) {
  messaging = null;
}

Have you set whitelist your production domain for browser API keys and client IDs in the Google Developer Console?

Did you setup firebase-messaging-sw.js file?

Like this.

// change your using firebase version
importScripts("https://www.gstatic.com/firebasejs/5.10.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/5.10.0/firebase-messaging.js");

const messagingSenderId = "your sender id here";
firebase.initializeApp({ messagingSenderId });

try {
  const messaging = firebase.messaging();
} catch (e) {}

See:

• https://firebase.google.com/docs/web/setup
• https://firebase.google.com/support/guides/launch-checklist
• https://github.com/firebase/quickstart-js/tree/master/messaging
• https://github.com/firebase/quickstart-js/blob/master/messaging/firebase-messaging-sw.js

If does not work then you should try quickstart.

Solution 3:

Managed to fix the issue. It turns out I copied the config from one project and the VAAPI key from another project. D'oh!

Solution 4:

I ran into the same issue, for a different reason. We are using two Firebase projects (one dev, one production). The two apps are configured in the same config file. I just learned that the firebase.messaging() function can accept one parameter: the initialized Firebase App. Without this parameter, const devMessaging was configuring with the default app settings, in my case production. Here is the fixed code:

exportconst app = firebase.initializeApp(config);
exportconst devApp = firebase.initializeApp(devConfig, "secondary");

const devMessaging = firebase.messaging(devApp);
devMessaging.usePublicVapidKey("this_is_private");

devMessaging.getToken().then(() => {
  // continue with the rest of the code 
});

resource: https://firebase.google.com/docs/reference/js/firebase.messaging