Firebase Cloud Messaging (FCM) fails to retrieve token on mobile (PWA), works fine on web. #8592
Description
Operating System
Android 10
Environment (if applicable)
Chrome on desktop and PWA on mobile
Firebase SDK Version
0.10.13
Firebase SDK Product(s)
Messaging
Project Tooling
Next js app
Detailed Problem Description
When attempting to use Firebase Cloud Messaging (FCM) on a Progressive Web App (PWA), the service works fine on web (desktop browsers). However, on mobile browsers, the FCM token is not being generated and registrations POST request return 401 with this message:
##Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential
#Observed behavior
On desktop browsers (Chrome), everything works as expected: the FCM token is retrieved and notifications can be sent.
On mobile browsers (tested on Chrome for Android), the getToken function does not return a token.
The service worker registers successfully on both desktop and mobile.
Steps and code to reproduce issue
'use client';
import firebaseApp from '@/firebase';
import { getMessaging, getToken } from 'firebase/messaging';
import { useEffect, useState } from 'react';
const useFcmToken = () => {
const [token, setToken] = useState('');
const [notificationPermissionStatus, setNotificationPermissionStatus] =
useState('');
useEffect(() => {
const retrieveToken = async () => {
try {
if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
const registration = await navigator.serviceWorker.register(
'/firebase-messaging-sw.js'
);
console.log('Service worker registered:', registration);
console.log('firebaseApp', firebaseApp);
const messaging = getMessaging(firebaseApp);
console.log(messaging, 'TOKENmessagingTOKEN');
// Request notification permission
const permission = await Notification.requestPermission();
setNotificationPermissionStatus(permission);
if (permission === 'granted') {
console.log('permission is <<<<<<granted>>>>>>>>>');
const currentToken = await getToken(messaging, {
vapidKey: process.env.VAPID_KEY
});
console.log(currentToken, 'currentTokencurrentToken');
if (currentToken) {
setToken(currentToken);
} else {
console.log(
'No registration token available. Request permission to generate one.'
);
}
}
}
} catch (error) {
console.log('Error retrieving token:', error);
}
};
retrieveToken();
}, []);
return { fcmToken: token, notificationPermissionStatus };
};
export default useFcmToken;
return { fcmToken: token, notificationPermissionStatus };
};
export default useFcmToken;