getting 401 Unauthorized after unsubscribing and resubscribing a new user with a new vapid key

I had to change the application's vapid keys due to security reasons (leaked the private key in my merge request). Before changing the vapid key everything was working great. According to this issue and the documentation here unsubscribing the user and resubscribing with a new application key (vapid key) should be sufficient enough to make the new pair of public and private vapid keys work. However after unsubscribing the user, and resubscribing with the new key, both of the old application server key and the new one stopped working. I tried to uninstall chrome and firefox, make a new user on chrome, programmatically and manually unsubscribe a user from the notification of the website, and non of them worked.

More Details:

Chromium version: 85.0.4183.83 Operating system: Pop!_OS 18.04 LTS Firefox browser: 80.0.1 (64-bit) here is how I unsubscribed the user programmatically (it returned true on my console) : const unsubscribe = async() => { navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.getSubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // You've successfully unsubscribed console.log(successful) }).catch(function(e) { // Unsubscription failed }) }) }); } / subscribe a user for push notification / const subscribe = async (reg) => { const subscription = await reg.pushManager.getSubscription(); if (subscription) { console.log("no ...."); sendSubData(subscription); return; }

// const vapidMeta = document.querySelector('meta[name="vapid-key"]');
const key = 'BM8Jj8t3wbv1IiqWdUw0uxJ3dWA7ZSm9kMoDACAp1otZqL9zN8HvWQ06Q5QIYbriaYybgR3sRorTeEnbAv54SiI';
const options = {
    userVisibleOnly: true,
    // if key exists, create applicationServerKey property
    ...(key && {applicationServerKey: urlB64ToUint8Array(key)})
};

const sub = await reg.pushManager.subscribe(options);
await sendSubData(sub);

}; here is how I manually unsubscribed the user: 1) unregistered the service worker from inspect > application > service workers 2) on settings > site settings > remove the website from permissions. 3) or block and allow the website to send notifications on top left icon of the browsers

**here is how I'm subscribing the user after registering the service worker script including the push listener:

` // subscribe a user for push notification const subscribe = async (reg) => { const subscription = await reg.pushManager.getSubscription(); if (subscription) { console.log("no ...."); sendSubData(subscription); return; } const key = 'BM8Jj8t3wbv1IpqWpUw0uxJ3dWA7ZSm9kMoDACAp1otZqL9zN8HvWQ06Q5QIYbriaYybgR3sRorTeEnbAv54SiI'; const options = { userVisibleOnly: true, // if key exists, create applicationServerKey property ...(key && {applicationServerKey: urlB64ToUint8Array(key)}) };

const sub = await reg.pushManager.subscribe(options);
await sendSubData(sub);

}; ` sendSubData will take care of saving the user in my provided endpoint.

here is the error that I'm getting after updating the new key, unsubscribing and subscribing the user again with the new key (and all the other tries mentioned above): {'code': 401, 'errno': 109, 'error': 'Unauthorized', 'more_info': 'http://autopush.readthedocs.io/en/latest/http.html#error-codes', 'message': 'Request did not validate missing authorization header'}

w3c / push-api

getting 401 Unauthorized after unsubscribing and resubscribing a new user with a new vapid key #327

More Details: