Open MahmoudAdel9 opened 3 days ago
I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
Hi @MahmoudAdel9, thanks for patiently waiting. I tried to reproduce the issue using a similar code snippet to the one you provided, but I was unsuccessful. I used the latest version of the JS SDK (11.0.1) and updated version of Chrome browser. I deployed the Next.js web app using Firebase Hosting and able to get FCM tokens upon accessing the site URL on both desktop and mobile Chrome browsers.
I suggest you check the following pointers and see if it can help you resolve the issue:
I also noticed that the FCM token generation took approximately 3 to 5 seconds. I am not sure if it's just the speed of my network connection, but I tried this multiple times and the FCM token is getting generated successfully.
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);
}, []);
return { fcmToken: token, notificationPermissionStatus }; };
export default useFcmToken;
return { fcmToken: token, notificationPermissionStatus }; };
export default useFcmToken;