There are many ways to implement Facebook authentication with React & Redux. My favorite approach is using login API from Facebook Javascript SDK. This is the simplest way because the Facebook SDK handle most of the hard word for us, we just need to take the access token and send back to backend to fetch user info. Here are the steps:

  • Call login API to open Facebook login dialog.
  • User does the authentication with Facebook SDK.
  • After login successful, we send the access token to backend and allow user to user website.

This is the source code for the implementation. We use the following package: react, redux, react-redux, axios

In index.html, you just need to add Facebook Javascript SDK:

 

This is our index.js, we just create the store and connect our app to Redux provider. Nothing special at here:

 

This is the source code of our reducer, we just need to store Facebook access token and user information

Now let see the main section of our app in App.js. Access token is stored in Redux store, our App.js show login button if it can’t find access token in Redux store. When user logins successful, our app send access token to backend to get user information and after that it shows user welcome message.

We only store access token and user information in Redux store because these information could be use throughout the app. UI related information like “isFetchingUser” should be stored in component state. I don’t want to waste time by store everything in Redux store.

If you have any question. Click on the chat button and ask me 😉