Novu•5mo ago

Generating `deviceTokens` for FCM

I'm working on adding push notifications using FCM as a provider. In the documentation it mentions Setting Device Token however there is no mention of how it is generated. Do we use firebase to generate these tokens or can they be any random string?

5 Replies

Ask Inkeep•5mo ago

Hi @codeOverCoffee, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Firebase Cloud Messaging (FCM) * How to send web push notifications with FCM and Novu * How to send PUSH notifications to iOS devices with FCM using Novu * The Ultimate Guide To Firebase Cloud Messaging (FCM) - Novu ----------------------------- Answer To answer your question about generating deviceTokens for FCM (Firebase Cloud Messaging), let me provide you with the information from the available sources: 1. The device tokens for FCM are indeed generated using Firebase, not random strings. (1) This is because FCM is a service provided by Firebase, and the tokens are specific to the Firebase project you're using. 2. To generate these device tokens, you need to set up Firebase in your frontend application. (2) This typically involves creating a Firebase project and adding the Firebase SDK to your app. 3. For web applications, you would use the Firebase JavaScript SDK to generate the device token. Here's a general approach to obtaining the token (note that you'll need to replace some parts with your specific Firebase configuration):

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

const messaging = getMessaging(app);
const vapidKey = 'YOUR_VAPID_KEY';

getToken(messaging, { vapidKey: vapidKey })
  .then((currentToken) => {
    if (currentToken) {
      // Send the token to your server and update the UI if necessary
      console.log('Token:', currentToken);
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
    }
  })
  .catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

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

const messaging = getMessaging(app);
const vapidKey = 'YOUR_VAPID_KEY';

getToken(messaging, { vapidKey: vapidKey })
  .then((currentToken) => {
    if (currentToken) {
      // Send the token to your server and update the UI if necessary
      console.log('Token:', currentToken);
    } else {
      // Show permission request UI
      console.log('No registration token available. Request permission to generate one.');
    }
  })
  .catch((err) => {
    console.log('An error occurred while retrieving token. ', err);
  });

Ask Inkeep•5mo ago

4. Once you have generated the device token using Firebase, you need to associate it with a subscriber in Novu. You can do this using the setCredentials method if you're using the Novu SDK, or by making an API request to update the subscriber's credentials. (3) 5. Here's an example of how to set the device token using the Novu SDK:

import {
Novu,
PushProviderIdEnum
} from '@novu/node';
const novu = new Novu("<NOVU_API_KEY>");
await novu.subscribers.setCredentials(
'subscriberId',
PushProviderIdEnum.FCM,
{ deviceTokens: ['token1', 'token2'] },
'fcm-MnGLxp8uy'
);

import {
Novu,
PushProviderIdEnum
} from '@novu/node';
const novu = new Novu("<NOVU_API_KEY>");
await novu.subscribers.setCredentials(
'subscriberId',
PushProviderIdEnum.FCM,
{ deviceTokens: ['token1', 'token2'] },
'fcm-MnGLxp8uy'
);

(4) 6. If you're not using a framework and prefer to use an API request directly, you can use the following cURL command to set the device token:

curl -L -X PUT 'https://api.novu.co/v1/subscribers/<SUBSCRIBER_ID>/credentials' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: ApiKey <NOVU_API_KEY>' \
-d '{
"providerId": "fcm",
"credentials": {
"deviceTokens" : [
"token1",
"token2"
]
},
"integrationIdentifier": "fcm-MnGLxp8uy"
}'

curl -L -X PUT 'https://api.novu.co/v1/subscribers/<SUBSCRIBER_ID>/credentials' \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-H 'Authorization: ApiKey <NOVU_API_KEY>' \
-d '{
"providerId": "fcm",
"credentials": {
"deviceTokens" : [
"token1",
"token2"
]
},
"integrationIdentifier": "fcm-MnGLxp8uy"
}'

Remember, the device tokens are specific to each device or browser instance where your app is installed or opened. You'll need to generate and store these tokens for each user's device to send them push notifications.

Sources [1] FCM and Novu [2] How to send web push notifications with FCM and Novu [3] Push notification Device token for javascript - no framework [4] Firebase Cloud Messaging (FCM)

Ask Inkeep•5mo ago

Feel free to tag @Ask Inkeep with additional questions.

Pawan Jain•5mo ago

@codeOverCoffee FCM device tokens are generated on client side. Checkout our guides for FCM push notification with web,ios and android https://v0.x-docs.novu.co/guides/novu-fcm-web https://v0.x-docs.novu.co/guides/FCM-iOS-Novu/how-to-send-PUSH-notifications-to-iOS-devices-with-FCM-using-Novu https://v0.x-docs.novu.co/guides/fcm-flutter-novu/how-to-send-push-notifications-to-flutter-apps-with-fcm-using-Novu

codeOverCoffeeOP•5mo ago

Thank you @Pawan Jain. Question: do you have an example of web push notifications using Workflow that also includes links? I have not been able to find anything.

Gaming

Programming

Generating `deviceTokens` for FCM