Facebook Authentication in a React App
The Facebook API documentation is a great source of information for accomplishing most Facebook partnered related tasks.
The most popular being user authentication. Having a Facebook user sign into your app and using their basic information to perform user related tasks.
Looking at the documentation, you can see that there are different implementation solutions for different mediums such as iOS, Android and Web. We will be looking at Web.
The Web solution is tailored to plain Javascript. Let’s see how we can take what is there and tailor it closer to a React application.
The first step is to log into the Facebook developers website using your Facebook login:
https://developers.facebook.com/
Doing this will provide you with a App ID which we will be using to connect Facebook to our App.
This App ID will look like a string of numbers and will be available under “My Apps” when logged in.
Let’s look at the quick start with Javascript instructions to get started:
https://developers.facebook.com/docs/javascript/quickstart
We need to begin by including Facebooks SDK into our app.
The documentation provides us with a script that should be included into our html files we’d like this incorporated into. This shouldn’t be so bad right? We are using React and just have a single paged application, so that would mean we would just have to include this script into one file.
Here is what the script to be included looks like:
There is just one minor adjustment we need to make to the code. Notice in the #fbAsyncInit function there is a object which includes a key-value pair with appId as its key. We will have to adjust the value so that instead of ‘your-app-id’, we have our new Facebook App ID listed. This will get our App talking to Facebook.
There are a couple of things to note before we go any further.
This script is ran asynchronously. What does this mean for us.
We are using React and not manipulating the DOM directly, so we want to tie this into a component and its lifecycle methods in order to fully predict the use and readiness of our new functions. The script being ran async also surfaces an issue of how will we know when these new functions are ready for use in our App.
Therefore, when building a React App, it may be best to break this script apart a bit and pull it into a components life cycle.
We have a new AuthComponent now created.
Let’s define a #componentDidMount method. Why componentDidMount? We want the ability to predict that once our new component is mounted, we are ready to use the tools provided to us from the SDK.
Look at the newly defined componentDidMount in our AuthComponent:
It should look pretty familiar. We extracted our given functions from the provided script and put them at the top and bottom of our method. That shouldn’t look any different. There is something different here that I’ve included right in the center that should look unfamiliar. window.FB.Event.subscribe. What is this and how does it help up.
The Facebook SDK provides us with something called Event Subscriptions. They are like event listeners that are tied to Facebook actions. Facebook provides us with something called auth. auth is returned JSON that notes if a user is logged in or not and included some related information. Here we are subscribing to auth.statusChange which is a method provided by Facebook. Whenever a statusChange occurs (User logging in or a User logging out) we will perform the condition defined along with the response returned as a result of the statusChange. authResponse will only be available if a user is logged in. It includes information such as the returned access token and the user id. Therefore we are asking that our App perform a certain action if a user logged in and another if a user logged out. A log in and log out with trigger the method calls due to our Event Subscription.
In order to give a user the ability to log in and out within our app we have to somehow give them a way to click a button that redirects them to a Facebook authentication screen, allowing them to log into their Facebook using their Facebook credentials.
Facebook us a super easy way to do this. They have pre-built buttons that we can render into our codebase that do just that! It is not anything super fancy! It is just a div wrapped in unique class names and attributes that you can customize. You can customize the button and be provided with the code using the documentation below. Render that button into your app and watch the magic happen!
https://developers.facebook.com/docs/facebook-login/web/login-button
Play around with the event subscription to watch different actions take place following a log in or log out. Try just console.log(‘You’re logged in’) and console.log(‘You’re logged out’) for starters to make sure your event subscription and new button are working properly!
