Multiple Facebook App Id is not supporting in one React App on different routes.

[DeepakSingh17]

If your first component is rendering with FacebookLogin component then its object is getting configured globally and app id is getting set permanently and app Id is not changing on different url at all.so its sending the network requests with first app id not with the second one and creating some issues.

[madhawa-se]

I'm having the same issue

[Incin]

Same issue here.

[xxated]

Same here... If using facebook chat with different app id, the appId prop for FaceBook button is just completely ignored, and its trying to use the chat app id instead.

[greatSumini]

You can handle it with my package, @greatsumini/react-facebook-login (npm link) In @greatsumini/react-facebook-login, FacebookLoginClient is exported so you can manually call this for your own needs.

below is sample code for login with multiple apps! (link)

import { useEffect, useState } from 'react';
import { FacebookLoginClient } from '@greatsumini/react-facebook-login';

export const WithMultipleApp = () => {
  const [app, setApp] = useState(0);
  const appIds = ['1088597931155576', '2363450737249976'];

  const toggleApp = () => setApp((prev) => 1 - prev);

  useEffect(() => {
    loadFB();
  }, [app]);

  const loadFB = async () => {
    FacebookLoginClient.clear();
    await FacebookLoginClient.loadSdk('en_US');
    FacebookLoginClient.init({ appId: appIds[app], version: 'v9.0' });
  };

  return (
    <div>
      <button onClick={toggleApp} style={{ marginBottom: '12px' }}>
        toggle app
      </button>
      <button
        onClick={() =>
          FacebookLoginClient.login(console.log, {
            scope: 'public_profile, email',
          })
        }
      >
        Login to APP {app}
      </button>
    </div>
  );
};