I've a login page where I provide external users with an option "Login Using Facebook". The Meta App has a type "Business" & using the product "Facebook Login For Business". I want to able to authenticate the users & then redirect them to "Facebook Messenger URL (https://m.me)". However, whenever I try to log in the user, the login pop-up window becomes a blank white screen after entering the user's credentials. I'm getting the below error when authenticating the user.

ErrorUtils caught an error: Minified invariant #21945;  Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.

However, when I switch to the product "Facebook Login", I'm able to authenticate the external user just fine without any issue. So, my question is how can I authenticate external users when using "Facebook Login For Business" or is it even possible to authenticate external users when using "Facebook Login For Business"?

Blank screen & console error on user authentication

Here's my code so far:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Messenger | Demo</title>     <!-- Bootstrap CDN -->     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">     </script> </head> <body>     <div class="row justify-content-center my-5 py-5">         <div class="col-md-6 text-center">             <div class="fb-login-button" data-width="" data-size="large" data-button-type="" data-layout=""                 data-auto-logout-link="false" data-use-continue-as="true" onlogin="redirectToMessenger"></div>         </div>     </div>     <!-- Meta Scripts -->     <script>         function redirectToMessenger() {             FB.login(                 function(response) {                     if (response.status !== 'connected' || !response.authResponse) {                         console.log('User cancelled login or did not fully authorize.');                         return;                     }                     console.log('Welcome!  Fetching your information.... ');                     FB.api('/me', {                         fields: 'name, email'                     }, function(response) {                         console.log(response);                     });                     window.location = 'http://m.me/<id>';                 },                 {                     // scope:          "public_profile,email",                     // return_scopes:  true,                     // config_id:      "<config-id>"                 }             );         }         window.fbAsyncInit = function() {             FB.init({                 appId:      '<app-id>',                 cookie:     true,                 xfbml:      true,                 version:    'v19.0',             });         };     </script>     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> </body> </html>

Tag:facebook, facebook-graph-api, facebook-javascript-sdk

Add a new comment.