Adding Facebook Login with react

This post is very old and contains obsolete information.

Sometimes you just can’t get away from facebook. Here’s a quick tutorial on how to add facebook login to your react app.

First you need to create a facebook app, which is an involved process especially if you want to let, you know, other people log in to your app. Getting your app approved and otherwise up and running here is left as an excersize for you to figure out.

In the navigation menu:

click + Add Product
locate the Facebook Login product
click Set Up
Add web
Enter in the url for your site
Note your app id

Create your react app

Then create a simple react app to test it out to make sure that the basics are wired up.

1
2
$ npx create-react-app facebook-login-test
$ cd facebook-login-test

Add the react-facebook-login npm package.

1
$ yarn add react-facebook-login

Now lets start up the server running under https, since Facebook will start rejecting api calls that arent from a secure site.

1
$ HTTPS=true yarn run start

We test it the facebook integration with some sample code in App.js. Replace your appId with what you had before.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
import FacebookLoginWithButton from "react-facebook-login";

const responseFacebook = (response) => {
  console.log(response);
};

const componentClicked = () => {
  console.log("Clicked!");
};

export default function App() {
  return (
    <FacebookLoginWithButton
      appId="1206715649505081"
      autoLoad
      fields="name,email,picture"
      onClick={componentClicked}
      callback={responseFacebook}
      icon="fa-facebook"
    />
  );
}

Now if you click on the link you should be able to see that the responseFacebook function being called with the users information that was requested. Hopefully you were able to see your account information! Since we have autoLoad={true} when you refresh the page responseFacebook will also be triggered on load since it detects that you already granted permission to your site. Setting this to false will force the user to click again to initiate the process.

A slightly more elaborate example

I’ve talked about using Authenticated Routes Using React Router and if you want a more thorough explication that would be a good place to start. But quickly, lets just display the Facebook button if we don’t know who you are, and then a simple card once we have your information.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React from "react";
import FacebookLoginWithButton from "react-facebook-login";

const componentClicked = () => {
  console.log("Clicked!");
};

const LoginButton = ({ facebookResponse }) => (
  <FacebookLoginWithButton
    appId="1206715649505081"
    // autoLoad
    fields="name,email,picture"
    onClick={componentClicked}
    callback={facebookResponse}
    icon="fa-facebook"
  />
);

const UserScreen = ({ user }) => (
  <>
    <h1>Welcome {user.name}!</h1>
    <p>{user.email}</p>
    <img
      src={user.picture.data.url}
      height={user.picture.height}
      width={user.picture.width}
      alt="avatar"
    />
  </>
);

class App extends React.Component {
  state = { user: false };
  facebookResponse = (response) => {
    console.log(response);
    this.setState({ ...this.state, user: response });
  };

  render() {
    return (
      <div style={{ margin: "auto", textAlign: "center", paddingTop: "2em" }}>
        {this.state.user ? (
          <UserScreen user={this.state.user} />
        ) : (
          <LoginButton facebookResponse={this.facebookResponse} />
        )}
      </div>
    );
  }
}

export default App;

References:

https://developers.facebook.com/docs/apps#register - Facebook documentation on registering an application
https://github.com/keppelen/react-facebook-login - The react plugin