OneSignal Initialization Blocks User Data Saving Logic in React App

I’m working on a Firebase-based chat app using React and implementing OneSignal for push notifications. However, I’m facing an issue where initializing OneSignal seems to block the execution of the code that comes afterward, including saving user data to Firestore.

Problem:

  • I successfully initialize OneSignal in my app.
  • After the initialization, the code (specifically saving user data) does not execute, and no error is thrown.
  • If I remove the initialization, I get an error OneSignal.getUserId is not a function.

Error Logs:
When OneSignal is initialized, no logs appear after this point, meaning the saving logic isn’t executed. If OneSignal is removed, I get the error:

OneSignal.getUserId is not a function.

Code

const SaveUserData = ({ onSaveComplete }) => {
  useEffect(() => {
    const saveUserData = async () => {
      try {
        console.log("Before initializing OneSignal");
        await OneSignal.init({
          appId: "01163343-b315-4598-a898-5cbd1e421eac",
          safari_web_id: "web.onesignal.auto.064b44a8-1dd7-4e10-9d87-452ef5b9c9dd",
          notifyButton: { enable: true },
        });

        console.log("OneSignal initialized");
        let playerId = await OneSignal.getUserId();

        console.log("Player ID received:", playerId);

        const { uid, displayName, photoURL } = auth.currentUser;
        const userDocRef = doc(dataBase, "Users", uid);

        // Save the user data along with the OneSignal player ID
        await setDoc(userDocRef, {
          userId: uid,
          displayName: displayName,
          photoUrl: photoURL,
          oneSignalPlayerId: playerId,
        });

        console.log("User data successfully saved with UID as document ID:", uid);

        onSaveComplete && onSaveComplete(true);

      } catch (error) {
        console.error("Error saving user data:", error.message);
        onSaveComplete && onSaveComplete(false);
      }
    };

    saveUserData();

  }, [onSaveComplete]);
};

`

What I’ve Tried:

  • I ensured OneSignal is only initialized once in the app.
  • I tried adding retries to ensure getUserId() fetches the playerId correctly.
  • I’m testing on both localhost and a deployed version (Netlify), and on both, the issue persists.
  • Notifications work (I see the notification icon and get subscription messages), but saving logic does not proceed.

What I’m Expecting:
I am looking for guidance on the following points:

Debugging the OneSignal Initialization:
I expect help understanding why the OneSignal SDK initialization might be failing or not returning the expected Player ID and causing the rest of the code not to execute.

Any help or suggestions would be greatly appreciated.