OneSignal SDK Initialization Blocks Code Execution and Firebase User Save in React App

[umarfarooq3488]

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.

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.

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:

import React, { useEffect } from "react";
import { auth, dataBase } from "../../config/firebase";
import { doc, setDoc } from "firebase/firestore";
import OneSignal from "react-onesignal";

const SaveUserData = ({ onSaveComplete }) => {
  useEffect(() => {
    const saveUserData = async () => {
      try {
        // Initialize OneSignal
        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");

        // Wait for Player ID to be generated (retry if null)
        let playerId = await OneSignal.getUserId();
        let retryCount = 0;
        while (!playerId && retryCount < 5) {
          console.log("Waiting for Player ID... Retry count:", retryCount);
          await new Promise(resolve => setTimeout(resolve, 1000)); // wait 1 second
          playerId = await OneSignal.getUserId();
          retryCount++;
        }

        if (!playerId) {
          console.error("Player ID is still null after retries");
          return;
        }

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

        // Get current user data from Firebase auth
        const { uid, displayName, photoURL } = auth.currentUser;

        // Use uid as the document ID
        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);

        // Notify that saving is complete
        onSaveComplete && onSaveComplete(true);

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

    saveUserData();
  }, [onSaveComplete]);

  return null; // No need to render anything
};

export default SaveUserData;

Other Details:

• I’m using OneSignal SDK v16.
• The app is hosted on Netlify.
• The Firebase configuration is correct and works when OneSignal code is not present`.
• I’ve tried different ways to initialize OneSignal, but the behavior remains the same.

Question:
What could be causing the OneSignal SDK initialization to block the execution of the following code (saving user data)? How can I ensure that even if OneSignal is not working correctly, the rest of the logic still runs?

Any help or suggestions would be greatly appreciated.