Why FB.login callback is being called immediately instead of on login flow termination/completion?
1

I am trying to add WhatsApp embedded signup to a web app by following the Embedded Signup Integration Helper guide under App Dashboard -> WhatsApp -> ES Integration.

I am copying the exact HTML example (as seen below with my ID's removed) from this guide however am experiencing different behaviour when I deploy this to my own website vs when testing.

For testing I am hosting the page in a Glitch project as suggested in the guide. When doing this the login flow behaves as expected (see images 4, 5 and 6 in my attachment). Image 4 shows that after clicking the "Login with Facebook" button the login popup opens. Image 5 shows that I can progress through the flow and after closing the popup image 6 shows that the fbLoginCallback function is called (see the browser console) and the session info is logged.

However when I host the exact same HTML on my own website (images 1, 2 and 3) the login flow does not behave like this. Image 1 shows that after clicking the "Login with Facebook" button the popup opens but the fbLoginCallback function is called prematurely. Then when progressing through the flow and closing the popup (image 3) the callback is not called again and there is no session info being logged.

Because the FB.login callback is being called immediately the authResponse is null and even when users go through and finish the flow I don't receive a valid auth response like I do in the test setup.

I should note that both domains (the glitch hosted page and my own website) have been allowed in App Dashboard -> Facebook Login for Business -> Settings -> Allowed Domains for the JavaScript SDK and that I have tested this in multiple browsers and with all cookies cleared.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embedded Signup</title>
</head>
<body>


<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

Session info response:




  </br>


SDK response:



























</body>
</html>
Meta
Gefragt am Montag