FE - 1.25: User Messaging Permission

[Ron-Madan]

In order for Firebase Cloud Messaging (FCM) to work, the user must first give permission.

So, after the user has signed in, they should be redirected to your new "Messaging" page. Here, you will make a clean/simple UI where you'll inform the user that these browser notifications will be really useful in letting you know your turn is here, etc.

**If the user declines or any error pops up, the token should be saved as "NULL"!

The following snippet will guide you through using Firebase messages:

import { getMessaging, getToken } from 'firebase/messaging';

const messaging = getMessaging();

const requestPermission = async () => {
  try {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      console.log('Notification permission granted.');
    } else {
      console.error('Notification permission denied.');
    }
  } catch (error) {
    console.error('Error requesting notification permission:', error);
  }
};

requestPermission();

Then, once permission is granted, FCM will generate a unique registration token that represents the user’s device or browser instance. We will use this token later on to send messages.

NOTE: The VAPID_KEY is available on the dashboard. I have also listed it here:

BIn7HfgGhmz1NJ7T0SOYcxQC1MkNjRlwT4awKTSJp9yvruJFZxzShp4reOdk1kpeKO6CRI2d68F0X_Dr1zrhfSI

const getFcmToken = async () => {
  try {
    const token = await getToken(messaging, { vapidKey: 'YOUR_PUBLIC_VAPID_KEY' });
    if (token) {
      console.log('FCM token:', token);
      // TODO! - Save to react context / local storage
    } else {
      console.error('Failed to get FCM token.');
    }
  } catch (error) {
    console.error('Error getting FCM token:', error);
  }
};

getFcmToken();

Now, modify the react context to include a token property as well. Then, once the token has been retrieved, you must save it to the context/local storage.