Firebase Cloud Messaging's getToken() only works if I omit the usePublicVapidKey method, why?

Question

I'm having a specific issue with the implementation of Firebase for Firebase Cloud Messaging (FCM):

As you can see in the code below, //messaging.usePublicVapidKey("<MY VAPID KEY IN HERE>"); is currently commented. The VAPID key was obtained with the command: web-push generate-vapid-keys in the server's terminal. If I uncomment this line, I get this error in the console when I call notification_permission():

• code: "messaging/token-subscribe-failed",

• message: "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.",

• stack: "FirebaseError: 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. at https://www.gstatic.com/firebasejs/4.12.1/firebase-messaging.js:6:8316"

This is my current index.html file:

<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-messaging.js"></script>
<script>
var config = {
    apiKey: "<MY FIREBASE API KEY>",
    authDomain: "<MY FIREBASE PROJECT ID>.firebaseapp.com",
    databaseURL: "https://<MY FIREBASE PROJECT ID>.firebaseio.com",
    projectId: "<MY FIREBASE PROJECT ID>",
    storageBucket: "<MY FIREBASE PROJECT ID>.appspot.com",
    messagingSenderId: "<MY FIREBASE SENDER ID?>"
};
firebase.initializeApp(config);

//messaging app
const messaging = firebase.messaging();

//vapid
//messaging.usePublicVapidKey("<MY VAPID KEY IN HERE>");

//register service worker
navigator.serviceWorker.register('firebase-messaging-sw.js').then(function(registration) {
    console.log('Service Worker Registered!', registration);
}).catch(function(err) {
    console.error('Service Worker registration failed', err);
});
</script>

This is the javascript function I call to get the user's permission to receive notifications and get the user's token:

<script>
function notification_permission() {
    messaging.requestPermission().then(function(permission) {
        console.log('Notification permission granted.', permission);
        messaging.getToken().then(function(current_token) {
            if(current_token) {
                //update user token
                // update_token(current_token);
                console.log('token', current_token);
            } else {
                // you don't have permission to show notifications
                // detect whether they are blocked or not, then show your custom UI
            }
        }).catch(function(err) {
            // retrieving token failed, analyze the error
            console.error('retrieving token failed, analyze the error', err);
        });
    }).catch(function(err) {
        console.error('Unable to get permission to notify.', err)
    });
}
</script>

I already have this on my manifest.json file:

{
    "gcm_sender_id": "103953800507",
    "serviceworker": {
        "src": "firebase-messaging-sw.js",
        "scope": "/"
    }
}

My specific questions with this configuration are:

1. Is it ok to use web-push generate-vapid-keys to get a VAPID key just once, and the use that very same VAPID key for all user requests?

2. Why is the getToken() method failing when using the VAPID key?

3. Is the VAPID method optional? What are the advantages of using it?

Thanks for your help!

Answer 1

1) yes.

2) because the token is related to firebase account and not the vapid key. Bypassing firebase you can't get any token.

3) using vapid is useful when NOT using firebase.