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}!`))

Cryohydrate

I am getting the same exact error, how did you manage it? – Quarterstaff

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

Ila

Is this still valid? It doesnt say I need to do thus anymore? – Zonnya

Answer 2

Same situation and almost lost my sanity. I tried inserting gcm_sender_id with a Firebase senderId and worked finally. I didn't have a Firebase account, but I was able to create a project in seconds and my senderId was ready to be used in the messaging settings.

But a caveat: After my modification in the manifest.json (in my case) in the root's folder, it was needed to uninstall the current service worker and restart my React project. Then I followed again all steps back by asking permissions and subscribe the user and finally trigger a push notification.

During my heat researches for a solution, I found that gcm_sender_id is also used to send and validate push messages from other browsers. According to Google Web Updates:

For Chrome prior to version 52, Opera Android and the Samsung Browser, you're also still required to include a 'gcm_sender_id' in your web app's manifest.json. The API key and sender ID are used to check whether the server making the requests is actually allowed to send messages to the receiving user.

Golden