The “Login with Facebook” button

Until now, we have talked quite a bit about the “Login with Facebook” button. Ultimately, somewhere on the front-end of your application, you will deploy this button. This button which takes your users to Facebook, asks for them to authorize your app to access their data, and then returns your user back to your web application.

We are going to talk in more detail about this authorization flow in the next lesson. For now, we just need to finish out the rest of our app setup so that you can get your hands on an access token.

Deployment with a React app

As we mentioned in the previous lesson, we want to get you up and running with the Graph API as quickly as possible. To save you the time of deploying your own web page with a “Login with Facebook” button, we have done it for you through a little React app below.

You don’t need to know React to follow along.

We use a package called react-facebook-login. Using similar logic to the code snippets provided by Facebook for deploying a “Login with Facebook” button, react-facebook-login packages up the Facebook JavaScript SDK into a single <FacebookLogin> component.

We will walk through the scope attribute for the component shortly, but we still have a little bit of remaining setup to do.

For now, click on the Run button under the code sample below.

import React from 'react';
import ReactDOM from 'react-dom';
import FacebookLogin from 'react-facebook-login'

const fbResponse = (response) => {
  const root = document.getElementById('root')
  const hr = document.createElement('hr')
  root.children[0].after(hr)
  const pre = document.createElement('pre')
  pre.textContent = JSON.stringify(response, undefined, 2)
  root.children[0].after(pre)
}

ReactDOM.render(
  <FacebookLogin
    appId="{{APP_ID}}"
    version="10.0"
    autoLoad={false}
    fields="email"
    scope="public_profile,email,user_posts,user_friends,user_birthday,user_gender"
    callback={fbResponse} />,
  document.getElementById('root')
)