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)
})
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.