Calling messaging.getToken() throws DOMException

[snorreks]

Version

@nuxtjs/firebase: 7.1.0 firebase: 8.0.2 nuxt: 2.14.7

Reproduction Link

if (
!('Notification' in window) ||
!navigator.serviceWorker ||
!('PushManager' in window) ||
(await Notification.requestPermission()) !== 'granted'
) {
   return;
}

const currentToken = await this.app.$fire.messaging.getToken(); // <- throws DOMException error

Steps to reproduce

My nuxt config:

  modern: true,
  firebase: {
    lazy: false,
    onFirebaseHosting: false,
    config: {
      development: {
        ....
        fcmPublicVapidKey:
          'BByfCgJXUoNb2HC5g-BZIZxAAG5r03RIjmVDV8ubCxu7XIqmkWKuRqmU4-yTMxEoNYEB8VHmqoawipFE5XYK0yg'
      }
    },
    services: {
      messaging: {
        createServiceWorker: true,
        fcmPublicVapidKey: '<publicVapidKey>'
      },
      firestore: true,
      functions: true,
      storage: true,
      auth: {
        initialize: {
          onAuthStateChangedAction: 'auth/onAuthStateChanged'
        },
        ssr: true
      }
    }
  },
  pwa: {
    manifest: {
      ...
      gcm_sender_id: '1096610157142',
    },
    workbox: {
      importScripts: ['/firebase-auth-sw.js'],
      dev: !isProductionMode
    }

I get what I believe to be the encoded fcmPublicVapidKey from here:

I get the same error when I have ssr: true or false. And when i have modern: true or false. When I googled the error people said to add the polyfill: https://github.com/davidchambers/Base64.js, but the browsers I have tested on already has window.atob.

What is Expected?

Get the fcm token.

What is actually happening?

It throws error:

actions.ts:62 initialize DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at base64ToArray (http://localhost:3000/_nuxt/vendors/firebase-messaging.modern.js:1499:19)
    at http://localhost:3000/_nuxt/vendors/firebase-messaging.modern.js:2137:51
    at step (http://localhost:3000/_nuxt/vendors/firebase-app/firebase-auth/firebase-firestore/firebase-functions/firebase-messaging/firebase-storage.modern.js:3287:23)
    at Object.next (http://localhost:3000/_nuxt/vendors/firebase-app/firebase-auth/firebase-firestore/firebase-functions/firebase-messaging/firebase-storage.modern.js:3268:53)
    at fulfilled (http://localhost:3000/_nuxt/vendors/firebase-app/firebase-auth/firebase-firestore/firebase-functions/firebase-messaging/firebase-storage.modern.js:3258:58)

Points to this function in firebase-messaging.modern.js:

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

[snorreks]

When I add the vapidKey directly in the getToken() method:

const currentToken = await this.app.$fire.messaging.getToken({
vapidKey:
    'BByfCgJXUoNb2HC5g-BZIZxAAG5r03RIjmVDV8ubCxu7XIqmkWKuRqmU4-yTMxEoNYEB8VHmqoawipFE5XYK0yg'
});

I get this error:

DOMException: Registration failed - push service error

which is the same error I see on the demo page: https://nuxt-fire-demo.herokuapp.com/ when I click on "Get ID Token".

Update:

When I add the vapidKey directly in the getToken() it works on ssr: false.

[lupas]

Hey @snorreks

What browser & version are you testing this with? Did you try with e.g. the current version of Chrome? Does the error still appear?

If so: Could you check out how we do it in the demo app and see if if you do it similarly the same error appears?

Where exactly is the code you pasted under Reproduction Link? In a vue component?

br, Pascal

[snorreks]

It was only a brave error, have now tested on chrome, edge and firefox and they are all working 👍

Found the solution on the brave browser also: https://github.com/brave/brave-browser/issues/12850