Failed to execute 'atob' on 'Window'

[apalangi]

Hi! I'm getting the following error on my console that's preventing me from enabling the push notifications:
main.js:37 Uncaught DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
at urlB64ToUint8Array (http://127.0.0.1:8887/scripts/main.js:37:26)
at subscribeUser (http://127.0.0.1:8887/scripts/main.js:116:32)
at HTMLButtonElement. (http://127.0.0.1:8887/scripts/main.js:69:7)
urlB64ToUint8Array @ main.js:37

It's the line const rawData = window.atob(base64);
that's in the function provided in main.js
function urlB64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/');

const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);

for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}

I am new to this and have no clue what is going on. Any help/clarification would be GREATLY appreciated. Thanks!

[xgqfrms]

format your code first for a better reading experience

function urlB64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);

    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }

    return outputArray;
}

make sure you base64 is a valid Base64 string(ASCII string)

error

ok

[nintcheu]

I have the same issue in @firebase/messaging library. I don't know how to fix that.

index.esm.js?8071:131
Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
at base64ToArray (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:139:19)
at eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:777:51)
at step (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:127:23)
at Object.eval [as next] (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:108:53)
at fulfilled (webpack-internal:///./node_modules/@firebase/messaging/node_modules/tslib/tslib.es6.js:98:58)

--- INSIDE THE LIBRARY ---
webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:139:19

function base64ToArray(base64String) {
var padding = '='.repeat((4 - (base64String.length % 4)) % 4);
var base64 = (base64String + padding)
.replace(/-/g, '+')
.replace(/_/g, '/');
var rawData = atob(base64);
var outputArray = new Uint8Array(rawData.length);
for (var i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}

[milanmeu]

@nintcheu This codelab does not use Firebase. You can find a Firebase Cloud Messaging example here. As the error says, the string is not correctly encoded. Unfortunately, I cannot help you further here. I recommend that you look at the Firebase Cloud Messaging example and ask for help in the firebase/quickstart-js repository.
Good luck.