title: React App: How to implement Facebook Login?
body: <p>I know that <code>react-facebook-login</code> and <code>react-facebook</code> exists. Nonetheless, I want to implement it my own way and I am stuck there.</p>
  
  <p>In my index.html I have the following:</p>
  
  <pre><code>  &lt;body&gt;
       &lt;div id="fb-root"&gt;&lt;/div&gt;
       &lt;script async defer crossorigin="anonymous" src="https://connect.facebook.net/de_DE/sdk.js#xfbml=1&amp;version=v5.0&amp;appId=???&amp;autoLogAppEvents=1"&gt;&lt;/script&gt;
  ....
  </code></pre>
  
  <p>My React function looks like this:</p>
  
  <pre><code>/* global FB */
  import React, { useEffect } from 'react';
  
  export default function Connect() {
    function statusChangeCallback(response) {
      console.log(response);
      if (response.status === 'connected') {
        console.log("logged in");
      } else {
        console.log("not logged in")
      }
    }
  
    function checkLoginState() {
      window.FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });
    }
  
    useEffect(() =&gt; {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId      : '????',
          cookie     : true,
          xfbml      : true,
          version    : 'v5.0',
        });
  
        window.FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
          statusChangeCallback(response);        // Returns the login status.
        });
      };
  
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/de_DE/sdk.js#xfbml=1&amp;version=v5.0&amp;appId=????";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
  
    });
  
    return (
        &lt;div
          className="fb-login-button"
          data-width=""
          data-size="large"
          data-button-type="continue_with"
          data-auto-logout-link="false"
          data-use-continue-as="false"
        /&gt;
    );
  }
  
  </code></pre>
  
  <p>The Facebook login button is rendered. When I try to click on it while logged into Facebook I get the message:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
      at Object.prepareCall (sdk.js?hash=3051e31de39c8b328cfbd1efcce7f613&amp;ua=modern_es6:145)
  ...
  </code></pre>
  
  <p>When I am in private browser mode and click on it, then the login dialog opens up. When I enter my user credentials it just exists and nothing happens.</p>
  
  <p>Can anyone point me in the right direction? Your help is very much appreciated.</p>