How To Use Facebook Login with React and Babel


TL;DR: You can check out the complete application at this Github repository


Update (2015-12-17): This post is out of date. I will update this post for React 0.14, soon.

I have a side project that uses React and Babel which I needed to use Facebook Login. Unfortunately, I had to figure it out myself because I couldn’t find good documentation.

I’ve created this blog post so those who want to do the same thing don’t have to suffer like me. Hopefully, Google managed to index this page for you to find me.

I will go through a step-by-step process . You will likely need to customize this process for your application. This is just a bare bones example.

Let’s start by setting up your Facebook Account.

Setup Your Facebook Application

Login to your Facebook Developer Account

Go to https://developers.facebook.com/products/analytics/, and login to your account.  

You should see something similar to the screenshot below when you click on the “My Apps” link

001_create_facebook_app

Create a New App

When you click on the “Create a New App” button, the website should show a popup similar to the screenshot below.

002_create_a_new_app

Give you project a name, and category.

I name my project “React Login POC”, and assigned it to the category “Apps for Pages”.

Move Back to the App Dashboard

After you create your app, you can go to the dashboard to configure it. I have provided a screenshot of what my dashboard looks like.

003_app_dashboard

Choose Platform

When you click on the “Choose a Platform” button on the dashboard, the website will present you with the following options.

004_choose_platform

Choose the website option.

Setup the Site Url

You now have to configure the site url for your app. I choose to host my application at http://localhost:3000. I have provided a screenshot below.

006_site_url

How you setup your site url will determine how you build your gulp workflow later.

Go the Advanced Settings

Go to the settings page for your application and click on the Advanced tab.

007_advanced_settings

Setup the Redirect URI

Enable “Embedded Browser OAuth Login”, and include the same host information you provided for the site url as one of the options for “Valid OAuth redirect URIs”.

008_redirect_uri

Setup the Project

Now that we have configured our facebook app, we can start to build the react application. Let’s start my setting up the project.

I will assume that you are using linux.

Create a directory for the project and change to the directory:

Initialize the directory as a node project:

Install (a) gulp, (b) jasmine, (c) browserify, (d) eventemitter, (e) run-sequence, (f) vinyl-source-stream, (g) gulp-connect, (e) opn, and (f) react with the following commands

Create the following folder structure

  • src
  • app

with the following commands

We will place our react code in src, and the generated code in app.

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

009_generate_fb_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.

010_javascript_code

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:

login_before

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

facebook_login

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

facebook_permission

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

login_after

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.

Advertisements

4 thoughts on “How To Use Facebook Login with React and Babel

  1. Hi I am trying to build this in React with webpack. I can’t fund out any “FaceBook” file anywhere which you imported in Main.js file. Please guide me what that file contains.

  2. Thanks for post I have it working well but one issue, how do I change permissions or request permissions, i tried data-scope=”email” on the button and adding &scope=email to the uri but no joy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s