Build the Gulp Workflow

I modified the gulp workflow from gulpfile that I made for the project in my last blog post.

This workflow uses gulp-connect and opn to start a webserver and open a web browser after successfully building the application.

We have to do this because the Facebook makes us register a suite url and redirect uri with them in order to use their Facebook Connect SDK.

If we tried to run the application directly from the file system then Facebook would deny our attempt to authenticate with them.

Build the React Application

Generate the Facebook Login Button

Facebook provides an easy way to generate a Facebook Login Button.

Go to the following webpage to generate a Facebook Login Button: https://developers.facebook.com/docs/facebook-login/web/login-button

Make sure to enable the logout button because we will use that feature in our application.

When you click on the “Get Code” button, you will see the following popup.

We will use and modify the provided code to suite our react application.

Build the Facebook Login Button in React

Facebook provided us with the following code snippet as part of the facebook login button process.

We will use this in our React Component to build our Facebook Button.

Create the file src/FacebookButton.jsx with the following contents:

This component will do several things:

It will display a facebook login button based on what we generated above

When we login, it will show us our name

When we logout, it will remove our name

Notice that we provided a FB module to the constructor, and that we use it to respond to events. We will need to setup the mechanism where we can provide this component with the FB module through dependency injection.

Create the Main React Component

Every application has a main component that bootstraps the application.

The following code servers that purpose.

Create the file src/Main.jsx with the following contents

Create the Index Page

When we generated the login button, Facebook provided us with the following code snippet.

We have to modify this a bit to get our Facebook Button to work properly.

Create app/index.html with the following contents:

I am eagerly loading the javascript sdk instead of dynamically loading it because I need to make sure that the FB module is available when I inject it into FacebookButton.

Execute the Application

We can now run our application with gulp.

Once gulp completes, it should open a browser and display the webpage. It should looks something like this:

When you click on the “Log In” button, the webpage will open a popup for you to enter your username and password.

After you successfully, login then you will have to grant the application permission to access your profile information.

Once you click “Okay”, you should see the welcome message with your name, and the “Log Out” button.

Conclusion

This is not a particularly elegant way of doing it. I’m sure that there are much better ways, but it does get the job done. Hopefully, you can use it to build something that suites your needs.