I'm getting a Web Push Error Code Status 403, which is driving me nuts, because its telling me to use firebase. What's going on?

Question

I keep getting a WebPush Error (Status Code 403) fro Chrome for a PWA I'm building and the body says that I need to use the VAPID server key from the 'firebase console' but I used nodes Web-Push library to generate the VAPID Keys, whats going on? Do I have to use firebase to build PWAs in Chrome?

Here's the Error Message I'm getting from the browser when I send a push notification:

  name: 'WebPushError',
  message: 'Received unexpected response code',
  statusCode: 403,
  headers:
   { 'content-type': 'text/plain; charset=utf-8',
     'x-content-type-options': 'nosniff',
     'x-frame-options': 'SAMEORIGIN',
     'x-xss-protection': '0',
     date: 'Thu, 31 Oct 2019 19:59:02 GMT',
     'content-length': '194',
     'alt-svc':
      'quic=":443"; ma=2592000; v="46,43",h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000',
     connection: 'close' },
  body:
   'the key in the authorization header does not correspond to the sender ID used to subscribe this user. Please ensure
you are using the correct sender ID and server Key from the Firebase console.\n',
  endpoint:
   'https://fcm.googleapis.com/fcm/send/exXmW3OFOTY:APA91bEKW_vxnvOZohog34pprDH6XvBsxtfnUpBdYY7z_7q4GZGa4wrmtBBg4kTRwLtgy3lNpCs8SMlvOr4nY-Fu_4zUus6zEJh69581Ier14QZxkEEVXyZHKRaZcmHa3zmbZRB4VD7Z

and here's the code that is running my node server:

//Handle imports
const express = require('express')
const cors = require('cors')
const bodyParser = require('body-parser')
const webPush = require('web-push')
const vapidKeys = require('./vapid.json')
const path = require('path')

//Setup application
const app = express()
app.use(cors())
app.use(bodyParser.json())
app.use('/static', express.static(path.join(__dirname,'frontend')))
const port = 8080

//Set up webpush
webPush.setVapidDetails(
    'mailto: <email>',
    vapidKeys.publicKey,
    vapidKeys.privateKey
)

const pushOptions = {
    proxy: '<proxy>'
}
//setup Push Notification
const sendNotification = (subscription, dataToSend='') => {
    webPush.sendNotification(subscription, dataToSend, pushOptions).catch(error => { console.log('Damn it: ', error.message, '||', error)
    })
}

//Server Routes Defined
app.get('/', (req, res) => res.sendFile('index.html', { root: './' }))

//Setup Database Methods
const dummyDb = {subscription: null}
const saveToDatabase = async subscription => {
    dummyDb.subscription = subscription
}

//Other Server Routes
app.post('/save-subscription', async (req, res) => {
    const subscription = req.body
    await saveToDatabase(subscription)
    console.log('subscribed!')
    res.json({message: 'success'})
})

app.get('/send-notification', (req, res) => {
    const subscription = dummyDb.subscription
    const message = 'hello world'
    sendNotification(subscription, message)
    res.json({message: dummyDb.subscription})
})

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Answer 1

I have node.js express, postgres, angular 8 app. I had the same problem and I got it working by adding the "gcm_sender_id": in the manifest.webmanifest file (or manifest.json I also used firebase generated public and private keys.

your gcm_sender_id is your project id in google cloud or firebase sender id