Step 5. Implementing the Push client for React Native

import { PushProvider } from '@ping-identity/rn-push';

function App() {
  return (
    <PushProvider config={{ timeoutMs: 20000, notificationCleanupConfig: { cleanupMode: 'HYBRID' } }}>
      <YourNavigator />
    </PushProvider>
  );
}

import { usePush } from '@ping-identity/rn-push';

function PushScreen() {
  const [data, { loading, error, refresh }] = usePush();

  if (loading) return <ActivityIndicator />;
  if (error) return <Text>{error.message}</Text>;
  if (!data) return null;

  const { client, credentials, deviceToken, pendingNotifications } = data;

  // Render your push MFA UI here:
  // - 'client' to approve/deny notifications
  // - 'credentials' to list registered devices
  // - 'pendingNotifications' to show outstanding requests
}

import { createPushClient } from '@ping-identity/rn-push';

const pushClient = await createPushClient({
  enableCredentialCache: false,
  timeoutMs: 15000,
});

try {
  // ... use pushClient
} finally {
  // Close the client when done
  await pushClient.close();
}

import messaging from '@react-native-firebase/messaging';

// Request notification permission (Android 13+)
const authStatus = await messaging().requestPermission();
const enabled =
  authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
  authStatus === messaging.AuthorizationStatus.PROVISIONAL;

if (enabled) {
  // Get the current FCM token and register it with the Push client
  const token = await messaging().getToken();
  await pushClient.setDeviceToken(token);

  // Listen for token refresh events and update the Push client
  const unsubscribe = messaging().onTokenRefresh(async (newToken) => {
    await pushClient.setDeviceToken(newToken);
  });
}

import messaging from '@react-native-firebase/messaging';

// Request notification permission (required before APNs will deliver notifications)
const authStatus = await messaging().requestPermission();
const enabled =
  authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
  authStatus === messaging.AuthorizationStatus.PROVISIONAL;

if (!enabled) {
  // User denied permission; push notifications will not be delivered
  showPermissionDeniedMessage();
}

useEffect(() => {
  const unsubscribe = pushClient.onTokenRegistered((token) => {
    // Token has been registered or refreshed
    console.log('Token registered:', token);
  });

  return unsubscribe;
}, [pushClient]);

// Update the token globally across all registered credentials
await pushClient.setDeviceToken(newToken);

// Update the token for a specific credential only
await pushClient.setDeviceToken(newToken, credentialId);

const token = await pushClient.getDeviceToken();

if (token) {
  console.log('Current device token:', token);
} else {
  // No token registered yet
}

// Android only; on iOS this is a no-op (APNs token is delivered through AppDelegate)
const token = await pushClient.refreshToken();

if (token) {
  console.log('Token refreshed:', token);
}

const updated = {
  ...credential,
  displayAccountName: 'Babs Jensen',
  displayIssuer: 'Example.com Checking Account',
};

await pushClient.saveCredential(updated);

const deleted = await pushClient.deleteCredential(credentialId);

if (deleted) {
  showMessage('Credential removed');
} else {
  showMessage('Credential not found');
}

import messaging from '@react-native-firebase/messaging';

// Handle background messages (Android and iOS)
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  const notification = await pushClient.processNotification(remoteMessage.data);

  if (notification) {
    // Notification stored; user will respond when they open the app
  }
});

// Handle foreground messages
useEffect(() => {
  const unsubscribe = messaging().onMessage(async (remoteMessage) => {
    const notification = await pushClient.processNotification(remoteMessage.data);

    if (notification) {
      const message = notification.messageText ?? 'Authentication request received';

      switch (notification.pushType) {
        case 'default':
          showDefaultNotification({ id: notification.id, message });
          break;
        case 'challenge':
          showChallengeNotification({ id: notification.id, message });
          break;
        case 'biometric':
          showBiometricPrompt({ id: notification.id, message });
          break;
      }
    }
  });

  return unsubscribe;
}, [pushClient]);

useEffect(() => {
  const unsubscribe = pushClient.onNotification((notification) => {
    // Notification has been processed and stored
    if (notification) showNotificationUI(notification);
  });

  return unsubscribe;
}, [pushClient]);

const notification = await pushClient.processNotificationFromMessage(rawMessage);

if (notification) {
  // Handle the notification as usual
}

// To approve
const approved = await pushClient.approveNotification(notificationId);
if (approved) {
  showMessage('Authentication approved');
}

// To deny
const denied = await pushClient.denyNotification(notificationId);
if (denied) {
  showMessage('Authentication denied');
}

import { getNumbersChallenge } from '@ping-identity/rn-push';

// Parse the challenge numbers from the notification
const options = getNumbersChallenge(notification); // e.g., [12, 34, 56]

// Display options to the user and capture their selection
// ...

// Submit the selected number as a string
const challengeResponse = String(userSelectedOption); // e.g., "34"

const approved = await pushClient.approveChallengeNotification(notificationId, challengeResponse);
if (approved) {
  showMessage('Authentication approved');
}

// After the user authenticates with biometrics
const authMethod = 'fingerprint'; // or 'face', 'iris', etc.

const approved = await pushClient.approveBiometricNotification(notificationId, authMethod);
if (approved) {
  showMessage('Authentication approved');
}

const notifications = await pushClient.getPendingNotifications();

if (notifications.length > 0) {
  notifications.forEach(notification => {
    const message    = notification.messageText ?? 'Authentication request received';
    const type       = notification.pushType;        // 'default' | 'challenge' | 'biometric'
    const receivedAt = new Date(notification.createdAt).toLocaleTimeString();

    renderPendingRow({ id: notification.id, message, type, receivedAt });
  });
} else {
  showEmptyState();
}

const notification = await pushClient.getNotification(notificationId);

if (notification !== null) {
  const message    = notification.messageText ?? 'Authentication request received';
  const type       = notification.pushType;
  const receivedAt = new Date(notification.createdAt).toLocaleTimeString();

  showNotificationDetails({ message, type, receivedAt });
} else {
  showMessage('Notification not found');
}

const notifications = await pushClient.getAllNotifications();

notifications.forEach(notification => {
  const message      = notification.messageText ?? 'Authentication request';
  const type         = notification.pushType;
  const receivedAt   = new Date(notification.createdAt).toLocaleDateString();
  const respondedAt  = notification.respondedAt
    ? new Date(notification.respondedAt).toLocaleDateString()
    : null;
  const status       = notification.pending ? 'Pending' : (notification.approved ? 'Approved' : 'Denied');

  renderHistoryRow({ message, type, receivedAt, respondedAt, status });
});

const pushClient = await createPushClient({
  notificationCleanupConfig: {
    // Choose a cleanup mode: 'NONE', 'COUNT_BASED', 'AGE_BASED', or 'HYBRID'
    cleanupMode: 'HYBRID',
    // Maximum notifications to keep when using COUNT_BASED or HYBRID mode
    maxStoredNotifications: 50,
    // Maximum age in days when using AGE_BASED or HYBRID mode
    maxNotificationAgeDays: 14,
  },
});

// Clean up notifications for all credentials
const removedCount = await pushClient.cleanupNotifications();
console.log(`Removed ${removedCount} old notifications`);

// Clean up notifications for a specific credential
const removedForCredential = await pushClient.cleanupNotifications(credentialId);
console.log(`Removed ${removedForCredential} old notifications for credential`);