javascriptfirebasefirebase-cloud-messagingweb-push

FCM JS Client - provided applicationServerKey is not valid


I'm trying to use Firebase Cloud Messaging to use WebPush and am following along with thier docs for setting up the javascript client. I have the code below all setup, but when I call getToken I get an error saying:

Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not valid.

I have quadruple checked my VAPID key, and that it's using the public key from the Firebase Console > Project Settings > Cloud Messaging > Web Push Certifications.

I have tried it with and with out the click event, with no luck.

I have tried it with different domains, with no luck.

I have confirmed that the notifications permissions have been granted.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyDAIduxCnC5T4-QoDEw1vRjnI1_1K0odeg",
    authDomain: "hudsonvillewaterpolo.firebaseapp.com",
    projectId: "hudsonvillewaterpolo",
    storageBucket: "hudsonvillewaterpolo.appspot.com",
    messagingSenderId: "351470653163",
    appId: "1:351470653163:web:1572d4340e67fe6cf9b8ae",
    measurementId: "G-Z86EW7BNVM"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

function doTheThing() {

    getToken(messaging, { vapidKey: "VAPID KEY HERE" }).then(currentToken => {
        if (currentToken) {
            // send the token to your server and update the UI if necessary
            console.log(currentToken)
        } else {
            console.log('No registration token available, request permission to generate one')
        }
    }).catch(err => {
        console.error('Error occurred while retrieving token', err);
    });
}


onMessage(messaging, (payload) => {
    console.log('Message received. ', payload);
    // ...
});

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.site-name').addEventListener('click', doTheThing)
})

Solution

  • enter image description here

    OMG the key is truncated in the display! 🤬

    I ended up inspecting the element and pulling it from the source.

    What a huge waste of time.