[firebase-messaging] APNS device token not set before retrieving FCM Token for Sender ID

[sebj54]

Hi there,

I'm actually trying to change the @nativescript/firebase plugin for packages from this repo.

I started the "migration" with @nativescript/firebase-core and @nativescript/firebase-messaging.

When I try to register notifications with this code:

import Vue from 'nativescript-vue'
import { firebase } from '@nativescript/firebase-core'
import { AuthorizationStatus } from '@nativescript/firebase-messaging'

import Home from './components/Home'

new Vue({
    render: (h) => h('frame', [h(Home)]),
    created() {
        firebase().initializeApp()
            .then(() => {
                const messaging = firebase().messaging()

                messaging.requestPermission({
                    ios: {
                        alert: true,
                    },
                })
                    .then((authStatus) => {
                        const enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL

                        if (enabled) {
                            messaging.getToken()
                                .then((pushToken) => {
                                    console.log(pushToken)
                                    messaging.registerDeviceForRemoteMessages()
                                })

                            messaging.onMessage((message) => {
                                console.log(message)
                            })
                        }
                    })
                    .catch((error) => {
                        console.error(error)
                    })
            })
            .catch((error) => {
                console.error(error)
            })
    },
}).$start()

This error is thrown in the console (several times, starting when the promise for the permission request resolves):

8.11.0 - [Firebase/Messaging][I-FCM002022] APNS device token not set before retrieving FCM Token for Sender ID '************'. Notifications to this FCM Token will not be delivered over APNS.Be sure to re-retrieve the FCM token once the APNS device token is set.

I don't know what I did wrong here. I think the Firebase configuration is good because it works with the same app with @nativescript/firebase.

Here is what I tried to troubleshoot (with no effect):

• Uninstall/reinstall the app
• Reboot the iPhone
• Add some setTimeout before requesting permission, just to be sure everything is initialized
• Change the order of getToken and registerDeviceForRemoteMessages
• Check if "Push notifications" capability and needed background modes are checked in Xcode

I'm now out of solutions to fix this. Has anyone made it work with a real device?

Thanks for your help :)

[triniwiz]

1. Call firebase().initializeApp() before the .$start() this is very important especially on iOS
2. Call registerDeviceForRemoteMessages before trying to get a token

[sebj54]

Thank you for your quick answer.

I've changed my sample code for this:

import Vue from 'nativescript-vue'
import { firebase } from '@nativescript/firebase-core'
import { AuthorizationStatus } from '@nativescript/firebase-messaging'

import Home from './components/Home'

firebase().initializeApp()
    .catch((error) => {
        console.error(error)
    })

new Vue({
    render: (h) => h('frame', [h(Home)]),
    created() {
        const messaging = firebase().messaging()

        messaging.requestPermission({
            ios: {
                alert: true,
            },
        })
            .then((authStatus) => {
                const enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL

                if (enabled) {
                    messaging.registerDeviceForRemoteMessages()

                    messaging.getToken()
                        .then((pushToken) => {
                            console.log(pushToken)
                        })

                    messaging.onMessage((message) => {
                        console.log(message)
                    })
                }
            })
            .catch((error) => {
                console.error(error)
            })
    },
}).$start()

Unfortunately, it produces the same errors when calling

• initializeApp
• registerDeviceForRemoteMessages
• getToken

[triniwiz]

Try using messaging.onToken instead of messaging.getToken()

[sebj54]

OK, it removed the error when I'm getting the token but the others are still present.

Are these errors relevant? I'm not sure that there is another problem.

[triniwiz]

You should be fine once you call initialize early along with requesting the permission & finally registering. The error relates to getToken being called before the app sets up a device token , you can either use the onToken or try calling getToken after registerDeviceForRemoteMessages resolves

[sebj54]

Thank for your assistance @triniwiz, I finally made it!

I don't know why, but I also had to regenerate my APNs key and upload it to Firebase, even if it was working with the previous plugin 🤷‍♂️

getToken now works as expected, if you're sure to call it once everything is initialized. I call this function after authentication in my case.

Here is the final init code if someone has the same problem:

import Vue from 'nativescript-vue'
import { firebase } from '@nativescript/firebase-core'
import { AuthorizationStatus } from '@nativescript/firebase-messaging'

import Home from './components/Home'

firebase().initializeApp()
    .then(() => {
        const messaging = firebase().messaging()

        messaging.onToken((pushToken) => {
            console.log(pushToken)
        })

        messaging.onMessage((message) => {
            console.log(message)
        })
    })
    .catch((error) => {
        console.error(error)
    })

new Vue({
    render: (h) => h('frame', [h(Home)]),
    created() {
        const messaging = firebase().messaging()

        messaging.requestPermission({
            ios: {
                alert: true,
            },
        })
            .then((authStatus) => {
                const enabled = authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL

                if (enabled) {
                    messaging.registerDeviceForRemoteMessages()
                }
            })
            .catch((error) => {
                console.error(error)
            })
    },
}).$start()