"Request is missing authentication credential" error when calling firebase.messaging.getToken()

Question

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 get the following error:

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

I am already using VAPID key and nowhere in the tutorial did Google say that a Google OAuth login was required. How can I fix this?

 var messaging = firebase.messaging();
 messaging.usePublicVapidKey('redacted');

 function obtenerToken() {
         messaging.getToken().then(function (nuevoToken) {
                if (nuevoToken) {
                    token = nuevoToken;
                } else {
                    messaging.requestPermission().then(obtenerToken)
                        .catch(function (err) { console.log('La web no tiene permiso para recibir notificaciones ', err); });
                }
            }).catch(function (err) { console.log('Error al obtener token de Firebase ', err); });
        }
        obtenerToken();

Answer 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.

Answer 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 tryquickstart .

Answer 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!

Answer 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:

export const app = firebase.initializeApp(config);
export const 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