Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support isomorphic web applications with a wrapper for Facebook's official client-side SDK #152

Open
dantman opened this issue Apr 1, 2018 · 0 comments
Milestone

Comments

@dantman
Copy link

dantman commented Apr 1, 2018

This SDK is not intended and should not be used inside the browser. Facebook provides an official client-side JavaScript library for this.

However I understand that it is sometimes desirable to be able to import FB from 'fb'; on an isomorphic web application. So that you have access in both the client and server.

My normal recommendation on this is to roll your own wrapper. Write a file that imports fb on the server and sets it up. And a browser version of that file that exports the global window.FB.

#129 (comment)

However I do admit this library has some nice features such as the Promise mode of FB.api that would be nice to have in the browser which everyone rolling their own wrapper has to implement.

For this reason I think we could at least help make rolling an isomorphic wrapper easier. We can do this by offering a fb/browser module that will simply re-export the window.FB from Facebook's official client-side SDK, but wrap it with a few of our custom features.

Namely we would make these available in the browser:

  • FB.api(...) => Promise
  • FB.options for only the appId, version, and Promise options
    • This way you could write:
      FB.options({appId: ..., version: ...});
      if ( isBrowser ) {
      	FB.init({
      		status: true,
      	});
      } else {
      	FB.options({
      		appSecret: "fetch this from somewhere the browser bundle doesn't have access",
      	});
      }
  • We would also explicitly warn you when you forget to load Facebook's official client-side SDK
  • Alternatively we could also offer a fb/async export. This would export a promise returning function which on the server would just return Promise.resolve(FB). But on the client would load in the official Facebook SDK before returning the fb/browser export.

Keep in mind that there are significant differences in how things work in the client and on the server:

  • In the client you use FB.login and have one access token; on the server you get an access token either from the client or through the manual login flow and each request you handle may be for a different user with a different token.
  • In the client you always use FB and don't normally pass access_token; on the server you either always pass an access_token or use FB.extend to create instances
    • This means the ideal workflow is to write your own getFB(context) wrapper which on the client just returns FB and on the server returns something like FB.extends({accessToken: context.accessToken}).

However if I am to implement this, someone needs to test it and make sure it works. It's not as easy to write tests to make sure an isomorphic API is useful in practice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant