🔐 React Native (Android): Retrieving FCM Token and Submitting to Ditto ID SDK

This page explains how to retrieve the Firebase Cloud Messaging (FCM) device token in a React Native app and submit it to the Ditto ID SDK for push notification delivery and secure authentication.

✅ Prerequisites

Ensure your app is set up with Firebase:

npm install @react-native-firebase/app @react-native-firebase/messaging

Make sure Firebase is correctly configured in your Android and iOS projects.

📥 Step 1: Retrieve Current FCM Token

Use the following method to get the current token and submit it to the Ditto ID SDK:

import messaging from '@react-native-firebase/messaging';
const ReactRdna = require('react-native').NativeModules.ReactRdnaModule;

async function retrieveAndSetToken() {
  const fcmToken = await messaging().getToken();
  if (fcmToken) {
    console.log("FCM Token:", fcmToken);
    ReactRdna.setDevToken(fcmToken);
  }
}

🔁

Call this method on app launch to ensure the Ditto ID SDK is initialized with the current token.

🔄 Step 2: Listen for Token Refresh

Handle automatic updates to the FCM token using a lifecycle hook:

import { useEffect } from 'react';

useEffect(() => {
  const unsubscribe = messaging().onTokenRefresh(token => {
    console.log("Refreshed FCM Token:", token);
    ReactRdna.setDevToken(token);
  });

  return unsubscribe;
}, []);

This ensures Ditto ID SDK stays up to date with any token changes (e.g., app reinstall, OS-level reset).

🧹 Optional: Component Lifecycle Integration

If you're using class components, use componentDidMount and componentWillUnmount:

componentDidMount() {
  this.onTokenRefreshListener = messaging().onTokenRefresh(token => {
    ReactRdna.setDevToken(token);
  });
}

componentWillUnmount() {
  this.onTokenRefreshListener();
}

🧠 Best Practices

• Always submit the current FCM token to ReactRdna.setDevToken.
• Implement onTokenRefresh to handle automatic token updates.
• Log and monitor token values for debugging in development.
• Ensure the token is available before initiating any push-based verification or login flows.

✅ Summary

📲 React Native (iOS): Retrieve APNS Token and Submit to Ditto ID SDK

This page guides you through retrieving the Apple Push Notification Service (APNS) token in a React Native app for iOS and submitting it to the Ditto ID SDK for secure push authentication.

✅ Prerequisites

1. Install Dependencies:

npm install @react-native-community/push-notification-ios

2. Enable Capabilities in Xcode:

• Push Notifications
• Background Modes → Remote notifications

3. **Request Permissions in App:**Make sure the app requests notification permissions at runtime.

📥 Step 1: Register and Retrieve APNS Token

Use the following setup in your app's initialization (e.g. in a root component or App.js):

import PushNotificationIOS from '@react-native-community/push-notification-ios';
const ReactRdna = require('react-native').NativeModules.ReactRdnaModule;

useEffect(() => {
  // Register for push notifications
  PushNotificationIOS.addEventListener('register', onRegister);

  // Request permissions
  PushNotificationIOS.requestPermissions();

  return () => {
    PushNotificationIOS.removeEventListener('register', onRegister);
  };
}, []);

function onRegister(deviceToken) {
  console.log("APNS Token:", deviceToken);

  // Submit token to REL-ID SDK
  ReactRdna.setDeviceToken(deviceToken);
}

🧠 Notes

• The register event returns the APNS device token for the iOS device.
• This token must be passed to the Ditto ID SDK using setDeviceToken.
• Ditto ID uses this token to send push notifications for verification workflows.

✅ Summary

🛠 Additional Setup

Ensure your iOS project includes the correct entitlements and APNs authentication key or certificate as per Apple’s push notification documentation.