๐Ÿš€ Launch mobile apps faster with Next.jsGet NextNative โ†’
โœจ Features
๐Ÿ”” Push Notifications

Firebase Push Notifications

โš ๏ธ

Before you continue: Make sure you've completed the Firebase Authentication tutorial first. It walks you through creating a Firebase project and setting up your iOS/Android apps โ€” which is required for push notifications to work.

โœจ Step 1: Set up your Firebase Cloud Messaging (FCM)

Make sure you:

  • Have Firebase Messaging enabled in your Firebase project.
  • Downloaded the service account JSON file from Firebase Console
    • Navigate to Project Settings โ†’ Service Accounts
    • Click Generate new private key
    • Place it in services/firebase/ and rename if needed

โš–๏ธ Step 2: Test sending push notifications manually

Use the prebuilt sendFcmMessage(fcmMessage) function:

await sendFcmMessage({
  message: {
    token: "<device-fcm-token>",
    notification: {
      title: "New Message",
      body: "You've got mail ๐Ÿš€",
    },
  },
});

This function handles:


๐Ÿ“ก Step 3: Request push permissions (on device)

This is already handled via:

checkAndRequestPermissionsForPushNotifications();

You can also do it manually:

await checkPermissions();
await requestPermissions();

๐ŸŽฎ Step 4: Get and update FCM token

Tokens are generated per device. You need to:

await updateFcmToken(user);

This will:

  • Request FCM token
  • Send it to your API (/user/update-fcm-token) along with user info

๐Ÿš€ Step 5: Listen to notifications

These listeners are pre-written for you. You just need to enable them:

addNotificationReceivedListener();
addNotificationActionPerformedListener();

If needed:

addTokenReceivedListener();
getDeliveredNotifications();

๐Ÿšซ Remove listeners when done

removeAllListeners();

This is useful to clean up when user logs out or app closes.


๐Ÿ› ๏ธ Troubleshooting

  • If messages are not delivered:

    • Make sure token is valid
    • Check Firebase Console > Logs
    • Verify service account has Firebase Admin SDK enabled
  • If your token changes, make sure to update it again via updateFcmToken()


๐Ÿ”„ Next steps

  • Trigger push messages from your server (e.g. when new message arrives)
  • Add topic-based notifications if needed
  • Customize notification appearance with images and actions

NextNative Docs