Facebook JS SDK Progressive web app issue

Question

I have a Progressive Web App built with Angular 4.

My Problem is the Fb login dialog does not close automatically when used from the home screen app. It works perfectly fine when opened in chrome browser but when i use it from installed home screen app the dialog window opens asks for permissions, after all permission is given the dialog goes blank and does not close or redirects back to the app.

It seems like if i change the "display" in manifest.json to "browser" it works but does not work when "display" is in "standalone".

I have searched all over but no success.

Thanks

Answer 1

When your app is installed as a progressive web app, the Facebook login popup and the parent window (your app) can't communicate the way they do in a desktop environment.

You'll face this problem in other scenarios as well, e.g. when your app is launched using in-app browsers like Instagram's or Facebook's.

You can implement a server-based flow as suggested by another answer. You can also implement a custom redirect flow on the client side.

A custom redirect flow works without popups. When your user clicks a "Login" button, he/she is instead redirected to a Facebook login screen. After logging in, the user is directed back to your app using a URL that contains everything you need to verify the success or failure of the authentication.

How to create a custom redirect flow is described in the Facebook SDK documentation, under "Manually Building a Login Flow":

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

The idea is as follows:

You direct your users to the Facebook login dialog (not the popup launched by FB.login()), e.g. when they click a button:

https://www.facebook.com/v2.11/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &response_type=token
  &state={state-param}

If the user successfully grants your app the necessary permissions, he/she is redirected back to your app (the location is determined by {redirect-url}):

{redirect-uri}?code=<facebook-code>&state={state}#_=_

Then you app needs to figure out whether the login was successful or not. There are two ways to do this:

A) Read the query string of the current URL (see the code=<code> part -- this can be used to retrieve additional info about your user, or it can be sent to your backend server).

B) Use the Facebook SDK do retrieve the login status using FB.getLoginStatus(yourCallback)

If you're already using the SDK and FB.login(yourCallback), you can add yourCallback to FB.getLoginStatus as well. You can also support both a popup flow and a redirect flow depending on the user's device.

I suggest reading through the documentation entry I posted above for further information and options.