Updating fcm token upon login

Author: Dean Sofer

src/Dialogues/Friends.tsx

@@ -10,7 +10,7 @@ import { UserData, Match, SnapshotOrNullType } from '../Types';
 import Avatar from '../Avatar';
 import './Friends.css'
 import ToggleFullscreen from './ToggleFullscreen';
-import { saveMessagingDeviceToken } from '../firebase-messaging-setup';
+import { saveFcmToken } from '../firebase.config';
 
 type Users = { [key: string]: UserData }
 
@@ -28,24 +28,26 @@ export default function Friends({ user, load, reset }: FriendsProps) {
     const [isExpanded, setIsExpanded] = useState(false);
     const [matches, setMatches] = useState<firebase.database.DataSnapshot>([]);
     const [searchResults, setSearchResults] = useState<firebase.database.DataSnapshot>([]);
-    const [hasAttemptedNotificationPermission, setHasAttemptedNotificationPermission] = useState(false);
+    const [requestedNotifications, setRequestedNotifications] = useState(false);
 
     // Request notification permission when Friends component mounts
     useEffect(() => {
         const requestPermission = async () => {
-            if (user && Notification.permission === 'default' && !hasAttemptedNotificationPermission) {
+            if (user && Notification.permission === 'default' && !requestedNotifications) {
                 console.log("Friends modal opened, attempting notification permission request...");
                 try {
-                    await saveMessagingDeviceToken();
+                    const permission = await Notification.requestPermission();
+                    if (permission === 'granted')
+                        saveFcmToken();
                 } catch (error) {
                     console.error("Error requesting notification permission:", error);
                 } finally {
-                    setHasAttemptedNotificationPermission(true);
+                    setRequestedNotifications(true);
                 }
             }
         };
         requestPermission();
-    }, [user, hasAttemptedNotificationPermission]);
+    }, [user, requestedNotifications]);
 
     // Synchronize Matches
     useEffect(() => {

src/firebase-messaging-setup.ts

@@ -15,4 +15,14 @@ export const config = {
     measurementId: "G-NKGPNTLDF1"
 };
 
-export default firebase.initializeApp(config);
+const vapidKey = 'BM1H9qfv1e_XcIB31ZeLCn8IpGOdMIwMShRej6wld8QAMkV4YqJ-eMQa1rSnwhkmVmAFw3tvUdlP2JzZmgTq4Fk';
+
+export default firebase.initializeApp(config);
+
+export async function saveFcmToken() {
+    const userId = firebase.auth().currentUser?.uid;
+    if (Notification.permission === 'granted' && userId)
+        await firebase.database().ref(`/users/${userId}/fcmToken`).set(
+            await firebase.messaging().getToken({ vapidKey })
+        )
+}

src/firebase.config.ts

@@ -13,7 +13,7 @@ import './index.css'
 import './Board/Board.css';
 import './Board/Toolbar.css'
 import { calculate, newGame, nextMoves, populated, rollDie, vibrate } from './Utils';
-import firebase from "./firebase.config";
+import firebase, { saveFcmToken } from "./firebase.config";
 import { playCheckerSound } from './Utils';
 import type firebaseType from 'firebase/compat/app';
 
@@ -113,6 +113,7 @@ export function App() {
           };
           console.log('Creating user', data);
           userRef.set(data);
+          saveFcmToken();
         }
         userRef.on('value', user => {
           setUser(user);
@@ -129,7 +130,7 @@ export function App() {
   const moves = useMemo(() => {
     if (game.turn && (game.turn !== user?.val().uid || game.status !== Status.Moving))
       return new Set();
-    return nextMoves(game, usedDice, selected)
+    return nextMoves(game, usedDice, selected!)
   }, [selected, game, usedDice])
 
   // Subscribe to match