Can't get Cloud Messaging to work in iOS

[ericlathrop]

Problem:

No notifications appear on my physical iOS device.

Background:

I've used this library for push notifications since before Notifee existed. I migrated to Notifee because I incorrectly thought it was required to get any notifications. Now, I've removed Notifee and gotten notifications working again on Android with just @react-native-firebase/messaging.

I'm sending broadcast notifications to topics, not individual devices. I've ran through the iOS Messaging Setup page multiple times to make sure I haven't missed anything. I have a screen that requests push notification permissions on iOS. I'm using the default auto initialization and automatic registering for remote messages. I'm using version 14.7.0 of the libraries.

I'm getting seeing these messages which might be related in the Xcode console:

022-04-07 10:26:12.124620-0400 HorseRacingNationMobile[63789:1767294] 8.12.1 - [Firebase/Messaging][I-FCM001000] FIRMessaging Remote Notifications proxy enabled, will swizzle remote notification receiver handlers. If you'd prefer to manually integrate Firebase Messaging, add "FirebaseAppDelegateProxyEnabled" to your Info.plist, and set it to NO. Follow the instructions at:
https://firebase.google.com/docs/cloud-messaging/ios/client#method_swizzling_in_firebase_messaging
to ensure proper integration.

and

2022-04-07 10:26:31.748539-0400 HorseRacingNationMobile[63789:1767292] 8.12.1 - [Firebase/Messaging][I-FCM002022] APNS device token not set before retrieving FCM Token for Sender ID '111173303067'. Notifications to this FCM Token will not be delivered over APNS.Be sure to re-retrieve the FCM token once the APNS device token is set.

Code:

import React, {useState} from 'react';
import messaging from '@react-native-firebase/messaging';
import {Linking} from 'react-native';
import {useMount} from '../lib/useMount';

export const NotificationContext = React.createContext({
  shouldAskPermission: false,
  requestPermission: function () {},
});

const messagingVersion = 2;

export function productionTopic() {
  return `breaking-news-v${messagingVersion}`;
}

export function stagingTopic() {
  return 'staging-' + productionTopic();
}

export function NotificationProvider({children}) {
  const [shouldAskPermission, setShouldAskPermission] = useState(false);

  useMount(() => {
    messaging().getInitialNotification().then(message => {
      if (message) {
        console.log("initial notification", message);
        activateNotification(message);
      }
    }).catch(console.error);
  });

  useMount(() => {
    messaging().onNotificationOpenedApp(message => {
      console.log("notification opened app", message);
      activateNotification(message);
    });
  });

  useMount(() => {
    messaging().hasPermission().then((authorizationStatus) => {
      console.log('authorizationStatus', authorizationStatus);
      setShouldAskPermission(authorizationStatus === messaging.AuthorizationStatus.NOT_DETERMINED);
    }).catch(console.error);
  });

  useMount(() => {
    const topic = __DEV__ ? stagingTopic() : productionTopic();

    messaging()
      .subscribeToTopic(topic)
      .then(() => {
        console.log('subscribed to ' + topic);
      })
      .catch(console.error);
  });

  const props = {
    value: {
      shouldAskPermission,
      requestPermission: () => {
        return messaging().requestPermission().then((authorizationStatus) => {
          if (authorizationStatus === messaging.AuthorizationStatus.AUTHORIZED || authorizationStatus === messaging.AuthorizationStatus.PROVISIONAL) {
            // User has authorised
            console.log('User has notification permissions enabled');
            setShouldAskPermission(false);
          } else {
            // User has rejected permissions
            console.log('User has notification permissions disabled');
            setShouldAskPermission(false);
          }
        }).catch(console.error);
      },
    },
  };

  return React.createElement(NotificationContext.Provider, props, children);
}

function activateNotification(notification) {
  console.log('activateNotification', notification);
  const newsIdentifier = notification.data.newsIdentifier;

  const url = new URL(`hrn://news/${newsIdentifier}`);
  url.searchParams.append(
    'apiUrl',
    encodeURIComponent(notification.data.api_url),
  );
  const urlStr = url.toString();

  return Linking.openURL(urlStr).catch((err) =>
    console.error(`Could not open URL ${urlStr}`, err),
  );
}

[mikehardy]

Hi there!
This looks ominous (thanks for fishing in the log by the way):

2022-04-07 10:26:31.748539-0400 HorseRacingNationMobile[63789:1767292] 8.12.1 - [Firebase/Messaging][I-FCM002022] APNS device token not set before retrieving FCM Token for Sender ID '111173303067'. Notifications to this FCM Token will not be delivered over APNS.Be sure to re-retrieve the FCM token once the APNS device token is set.

Interesting stuff here:

https://search.brave.com/search?q=Notifications+to+this+FCM+Token+will+not+be+delivered+over+APNS.Be+sure+to+re-retrieve+the+FCM+token+once+the+APNS+device+token+is+set

This one is especially promising: https://stackoverflow.com/questions/69485088/error-apns-device-token-not-set-before-retrieving-fcm-token-for-sender-id - have you tried the things there (the p8 thing is subtle for sure...)

What happens if you combine the permission + subscribe useMount calls, and put a getToken in between them 🤔 ?

[ericlathrop]

I tried combining some of the calls like you asked:

useMount(() => {
  const topic = __DEV__ ? stagingTopic() : productionTopic();

  messaging()
    .requestPermission()
    .then((authorizationStatus) => {
      console.log('authorizationStatus', authorizationStatus);
      setShouldAskPermission(authorizationStatus === messaging.AuthorizationStatus.NOT_DETERMINED);

      return messaging().getToken();
    })
    .then((token) => {
      console.log("getToken", token);
      return messaging().getAPNSToken();
    })
    .then((token) => {
      console.log("getAPNSToken", token);
      return messaging().subscribeToTopic(topic);
    })
    .then(() => {
      console.log('subscribed to ' + topic);
    })
    .catch(console.error);
});

but I still get the same log messages, and no notifications. getToken does return a token but getAPNSToken returns null.

I had seen that StackOverflow post, and double-checked everything they mentioned. I also deleted and re-created the p8 key and uploaded it to Firebase without renaming it.

[danielehrhardt]

Did you found a Solution?
I have the same Problem.

[mikehardy]

I have the same Problem.

but without specifying exactly what you have tried and what config elements you have verified or sharing any code or any details. Messaging on iOS is subtle and difficult enough that in my experience no one actually has the same problem, seriously!

https://stackoverflow.com/help/how-to-ask
https://stackoverflow.com/help/mcve

[SimonaIvanova]

Same here. Previously working push notifications just stoped working.
I got the same error

APNS device token not set before retrieving FCM Token for Sender ID

and getAPNSToken was returning null as well.

I found this info here https://developer.apple.com/support/expiration/ and noticed that apple push notification certificates in my keychain weren't trusted and the G4 of Worldwide Developer Relations was actually missing. After downloading it and adding it to the keychain the problem was resolved.

[sizhanx]

Could you please provide a more detailed description about what you did? I did all the above mentioned steps and installed the certificates. However, getAPNSToken still returns null for me. Thanks!

[mikehardy]

Interesting, I had not paid attention to this. Not sure how exactly to do it (I would be curious to know if these are the correct steps @SimonaIvanova ?) but if you go to

https://www.apple.com/certificateauthority/ and grab Worldwide Developer Relations - G4 (Expiring 12/10/2030 00:00:00 UTC)

Then you can see via the Keychain Access App that you have a new certificate, as they describe on https://developer.apple.com/support/expiration/ with organization G4 and the correct expiration date.

Before

After

I assume Xcode will know what to do when you go through app build+signing ? So just opening the cert after download (which imports it into your keychain, login keychain in my case) may be enough?

[sizhanx]

Thank you for the details! I just tried and I still cannot receive notifications on my iOS device. I'll try to create a Minimal, Reproducible Example and post it here.

[danielehrhardt]

Thank you for the details! I just tried and I still cannot receive notifications on my iOS device. I'll try to create a Minimal, Reproducible Example and post it here.

For me, i had to recreate the provisioning profile.

[nofacez]

Thank you so much for the suggestion. Downloading new certificate from
Apple's Website fixed my APNS device token not set before retrieving FCM Token for Sender... issue and I've finally received a push!

[sizhanx]

I am also having difficulty in making Cloud Messaging work on iOS.

Problem

While I try to get the FCM token, this error is logged on console (I am using a real device, not simulator)
APNS device token not set before retrieving FCM Token for Sender ID 'xxxxxxxxxxx'. Notifications to this FCM Token will not be delivered over APNS.Be sure to re-retrieve the FCM token once the APNS device token is set.

Code

import React, {Component, useEffect, useState} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  useColorScheme,
  Platform,
  Alert,
  Button
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

import firebase, {ReactNativeFirebase} from '@react-native-firebase/app';
import messaging from '@react-native-firebase/messaging';

const credentials: ReactNativeFirebase.FirebaseAppOptions = {
//sensitive info deleted
};

const initApp = async (cred: ReactNativeFirebase.FirebaseAppOptions) => {
  await firebase.initializeApp(cred);
};

if (firebase.apps.length === 0) {
  initApp(credentials)
    .then(msg => console.log('Firebase app successfully initialized!'))
    .catch(err => console.warn(err));
} else {
  console.log('Firebase app already initialized!');
}

const requestNotificationPermission = async () => {
  if (Platform.OS === 'ios') {
    const authStatus = await messaging().requestPermission();

    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    console.log('Authorization status:', authStatus);
  }
};

const foregroundHandler = () => {
  messaging().onMessage(async remoteMessage => {
    Alert.alert(
      'A new FCM message has arrived!',
      JSON.stringify(remoteMessage),
    );
  });
};

const backgroundHandler = () => {
  messaging().setBackgroundMessageHandler(async remoteMessage => {
    console.log('Message handled in the background!', remoteMessage);
  });
};

const getToken = () => {
	return messaging().getToken();
}

const getAPNToken = () => {
  return messaging().getAPNSToken();
}

const registerDeviceForNotification = () => {
  return messaging().registerDeviceForRemoteMessages();
};

requestNotificationPermission();

const showTokenHandler = () => {
  getToken()
      .then(data => console.log(data))
      .catch(err => console.error(err))
}

const showAPNTokenHandler = () => {
  getAPNToken()
      .then(data => console.log(data))
      .catch(err => console.error(err))
}

const App = () => {
  useEffect(() => {

    const handler = foregroundHandler()
    return handler
  }, []);
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <Button title="get token" onPress={showTokenHandler}/>
      <Button title="get apn token" onPress={showAPNTokenHandler}/>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

I did everything mentioned in the previous posts. I also have fresh app id, key, and provisioning files. I still have no idea what is happening. Is there anything that I am possibly missing? Thanks!

[sizhanx]

Nevermind i found the issue:
I didn't do this step: https://rnfirebase.io/#configure-firebase-with-ios-credentials

The reason that I didn't do that was because when the first time I do that, I put #import <Firebase.h> inside the #if RCT_NEW_ARCH_ENABLED ... #endif block. I think the new arch is not enabled, and hence #import <Firebase.h> directive was not executed at all. Then the compilation failed at [FIRApp configure];, which led me to not doing this step.

Thanks to this react-native-camera/react-native-camera#3008, I put the #import <Firebase.h> outside the if block, and everything works like a charm right now.

[louicoder]

My notifications worked perfectly on Android and I got that issue on iOS. How did I solve it?

I just added a config in the firebase.json file at the project's root. Here's the config, I hope it helps

Add a firebase.json file at the root and add the following
{
  "react-native": {
    "messaging_ios_auto_register_for_remote_messages": false
  }
}

[louicoder]

My notifications worked perfectly on Android and I got that issue on iOS. How did I solve it?

I just added a config in the firebase.json file at the project's root. Here's the config, I hope it helps

Add a firebase.json file at the root and add the following
{
  "react-native": {
    "messaging_ios_auto_register_for_remote_messages": false
  }
}

Try this and see if it helps with the problem

[phibo23]

strange, I had the same problem, but in my case I had to change messaging_ios_auto_register_for_remote_messages to true for getApnsToken to work reliably

[HaidarZ]

I followed all the steps and solutions mentioned above and still could not receive notifications on my iOS app.

[boyphongsakorn]

hmm 🤔
my firebase device token is not the same as PushNotification.configure is that a problem?
or firebase need .p8 for make notifications work? 🤨

code:

useEffect(async () => {
    try {
      // setEmail('[email protected]');
      // setPassword('1234');
      setIsLoading(false);
      console.log('---- normal clearAllData ----');
      clearAllData();

      const authStatus = await messaging().requestPermission();
      const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;
      if (enabled) {
        await messaging().deleteToken();

        const fcmToken = await getFcmToken(); // <---- Add this
        setFirebaseMessagingToken(fcmToken);
      }
    } catch (error) {
      console.log('Error ', error);
    }
  }, []);

const getFcmToken = async () => {
    try {
      const fcmToken = await messaging().getToken();
      if (fcmToken) {
        console.log('Your Firebase Token is:', fcmToken);
        return fcmToken;
      }
      console.log('Failed', 'No token received');
      return null;
    } catch (error) {
      console.log('Error ', error);
      return null;
    }
  };

PushNotification.createChannel(
    {
      channelId: 'channel-id', // (required)
      channelName: 'My channel', // (required)
      channelDescription: 'A channel to categorise your notifications', // (optional) default: undefined.
      playSound: true, // (optional) default: true
      soundName: 'default', // (optional) See `soundName` parameter of `localNotification` function
      importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance
      vibrate: true, // (optional) default: true. Creates the default vibration pattern if true.
    },
    (created) => console.log(`createChannel returned '${created}'`), // (optional) callback returns whether the channel was created, false means it already existed.
  );

  PushNotification.configure({
    // (optional) Called when Token is generated (iOS and Android)
    onRegister(token) {
      console.log('TOKEN:', token);
    },

    // (required) Called when a remote is received or opened, or local notification is opened
    onNotification(notification) {
      console.log('NOTIFICATION:', notification);
      if (notification.foreground) {
        navigationRef?.current?.navigate(screenNames.NotificationScreenTab);
      }

      // process the notification

      // (required) Called when a remote is received or opened, or local notification is opened
      notification.finish(PushNotificationIos.FetchResult.NoData);
    },

    // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
    onAction(notification) {
      console.log('ACTION:', notification.action);
      console.log('NOTIFICATION:', notification);

      // process the action
    },

    // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
    onRegistrationError(err) {
      console.error(err.message, err);
    },

    // IOS ONLY (optional): default: all - Permissions to register.
    permissions: {
      alert: true,
      badge: true,
      sound: true,
    },

    // Should the initial notification be popped automatically
    // default: true
    popInitialNotification: true,

    /**
     * (optional) default: true
     * - Specified if permissions (ios) and token (android and ios) will requested or not,
     * - if not, you must call PushNotificationsHandler.requestPermissions() later
     * - if you are not using remote notification or do not have Firebase installed, use this:
     *     requestPermissions: Platform.OS === 'ios'
     */
    requestPermissions: true,
  });

  useEffect(async () => {
    // Assume a message-notification contains a "type" property in the data payload of the screen to open

    messaging().onNotificationOpenedApp((remoteMessage) => {
      console.log(
        'Notification caused app to open from background state:',
        remoteMessage.notification,
      );
      // Alert.alert('Notification caused app to open from background state:', JSON.stringify(remoteMessage));
    });

    const unsubscribe = messaging().onMessage(async (remoteMessage) => {
      // Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));
      PushNotificationIos.addNotificationRequest({
        // channelId: 'channel-id', // (required)
        id: remoteMessage.messageId,
        body: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        userInfo: remoteMessage.data,
      });
    });

    return unsubscribe;
  }, []);