title: WebPush: the key in the authorization header does not correspond to the sender ID used to subscribe this user
body: <p>I am trying to implement push notifications in my React app, with Node express server.
  I use VAPID keys with webPush.
  Unfortunately when I try to send a push notif, I got a 403 error with</p>
  <blockquote>
  <p><em>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</em></p>
  </blockquote>
  <p><strong>Do you know how to handle that error or even what does it mean?</strong>
  My keys have been generated through <code>webpush.generateVAPIDKeys()</code>.</p>
  <p>I haven't used Firebase or anything else, I have my own server so I don't want to use Firebase (if I can..).</p>
  <p>Here are some parts of my code:</p>
  <p><strong>client</strong></p>
  <pre><code>export function registerPush() {
    console.log('===registerPush===', process.env.REACT_APP_VAPID_PUBLIC_KEY)
    const convertedVapidKey = process.env.REACT_APP_VAPID_PUBLIC_KEY
      ? urlBase64ToUint8Array(process.env.REACT_APP_VAPID_PUBLIC_KEY)
      : ''
    navigator.serviceWorker.ready
      .then(function (registration) {
        return registration.pushManager
          .getSubscription()
          .then(async function (subscription) {
            if (subscription) {
              return subscription
            }
            return registration.pushManager.subscribe({
              userVisibleOnly: true,
              applicationServerKey: convertedVapidKey,
            })
          })
      })
      .then(function (subscription) {
        fetch(`${process.env.REACT_APP_URL_BACK}notifications/subscribe`, {
          method: 'POST',
          body: JSON.stringify(subscription),
          headers: {
            'Content-Type': 'application/json',
          },
        })
      })
  }
  </code></pre>
  <p><strong>serviceWorker</strong></p>
  <pre><code>this.addEventListener('push', function (e) {
    console.log('push', e)
    var title = e.data.text()
    e.waitUntil(this.registration.showNotification(title))
  })
  </code></pre>
  <p><strong>server</strong></p>
  <pre><code>const webPush = require('web-push')
  
  webPush.setVapidDetails(
    process.env.VAPID_WEB_PUSH_CONTACT,
    process.env.VAPID_PUBLIC_KEY,
    process.env.VAPID_PRIVATE_KEY
  )
  app.post('/notifications/subscribe', (req, res) =&gt; {
   
    const subscription = req.body
    console.log(subscription)
  
    const payload = JSON.stringify({
      title: 'Hello!',
      body: 'It works.',
    })
  
    webPush
      .sendNotification(subscription, payload)
      .then((result) =&gt; {
        console.log(result)
        res.status(200).json({ success: true })
      })
      .catch((e) =&gt; {
        res.status(500).json({ success: false })
        console.log(e)
      })
  })
  </code></pre>