Facebook JavaScript SDK: FB.init and FB.getLoginStatus always return the status 'unknown' and reset status in session

Question

Circumstance:

I am trying all of this in development mode under http://localhost ..., I allow all cookies on my Chrome, I haven't implemented FB.logout in the code, for every experiments I did below, I manually clean all of the sessions, and cookies before the next experiment. I am using a temporary user provided by the developer platform.

Problem:.

First, my settings with FB.init:

FB.init({
  appId  :  'my-app-id',
  xfbml  :   true,
  version: 'v8.0',
  status :  true,
 });

With these settings, I can see the Facebook user status in my Session Storage

authResponse: null
expiresAt: 1603788619414
status: "unknown"

Then by using FB.login, I can get a response with user in connected status.

FB.login((response) => {
  console.log(response)
  //  {
  //    authResponse: {
  //      accessToken: "..."
  //      data_access_expiration_time: 1611478982
  //      expiresIn: 7018
  //.     graphDomain: "facebook"
  //      signedRequest: "..."
  //    },
  //.   status: "connected",
  //. }
})

The status in my Session Storage also reflects this result.

But then I refresh the page, the status in the session is set to unknown again. Under this situation, I open a new tab to a Facebook page, my test user is logged in, if I trigger the FB.login on my site again, I don't have to go through the dialog to offer my email/password again, but the status in session would be set to 'connected'.

So seems every time I refresh my site, the FB.init sets the status to unknown even the user is actually logged in.

I do another experiment with FB.getLoginStatus:

FB.login((response) => {
  FB.getLoginStatus((response) => {
    // ...
  });
});

FB.login((response) => {
  FB.getLoginStatus((response) => {
    // ...
  }, true);
});

• First case: The response in the callback of FB.getLoginStatus has the result with status: connected.

• Second case: I get the response with status: connected in FB.login's response, but with roundtrip to Facebook server is forced for FB.getLoginStatus, the response of it turns to status: unknown, also the session is set to status: unknown.

Thanks for the help!

Answer 1

The problems are resolved after I setup https on my local development. (I really wish this could be documented in the Facebook for Developers)

I am developing my project with React + Webpack, for people who are with the same stacks, here is a good reference you may need: Webpack Dev Server running on HTTPS/Web Sockets Secure