Add Facebook Login to Your Existing React Application

According to Facebook, tens of millions of people use their platform to log into applications all over the web. By integrating Facebook Login with your web application, not only do users get the social capabilities they’ve come to expect, but also the confidence and convenience of reusing their credentials securely.

Users also store a lot of personal information on their social media profiles. Linking their profile with your application means that they don’t have to tediously re-enter all of their data and they have fine-grained control over what access applications have. It’s a win-win for both users and developers to have an easy and trustworthy authentication platform like Facebook Login. So now that you know why you should be using Facebook Login in your application, let’s look at how to use Stormpath to make the development even easier.

Stormpath is a plug-and-play backend for your web applications. It handles user and data management so that you can focus on the user experience. Stormpath also offers built-in social integration with Facebook and Google.

Facebook Login via Stormpath is super easy to use and to make this demonstration even easier, we’ll be using Stormpath’s React project to get up and running quickly. Here’s how it’ll work:

We’ll be using Stormpath’s React SDK with Express as our web server. On top of that we’ll add Facebook’s SDK to log users into the application and provide account data. For those playing along at home, make sure you have the following software installed:

• npm
• node
• git

Let’s get started!

Create a Facebook Application

Before you write any code, first make sure that you’ve registered a Facebook application. When users log in, they will be prompted to grant your application permission to get their basic account information. If you don’t already have one, here’s how to create a Facebook application:

1. Go to https://developers.facebook.com/apps/
2. Click “Add a new app” and enter your app info
3. Go to the Settings > Basic page
4. Click “Add Platform”, select “Website”, and enter the URL of your website as well as the URL of the development version of our app, which will be http://localhost:3000

When you’re done, just leave the settings page aside as we’ll need your app info in the steps to follow.

Configure Your Stormpath Account

Now it’s time to configure your Stormpath account to talk with the Express server and Facebook’s API. If you don’t have an account, you can get a free account at https://api.stormpath.com/register.

From your Stormpath Admin Console, go to the Directories tab and create a new directory. A Stormpath directory is a way to group accounts so that you have more granular control over things like security policies. Name the new directory “Facebook Login” and choose “Facebook” from the list of types. Two more fields will be added where you can enter your Facebook app ID and secret from the previous section.

The next thing you need to do is to create an API key so the client can authenticate itself with your Stormpath account. The Stormpath documentation includes a detailed walkthrough of creating an API key, but here’s the abridged version:

1. From the Home tab of the Admin Console select Manage API Keys under the Developer Tools heading
2. Click the Create API Key button to trigger a download of a apiKey-{API_KEY}.properties file
3. (Optional) Move the file to a ~/.stormpath directory

You’ll also need to get the API endpoint for our application. This can be found by going to the Applications tab of the Admin Console and expanding the details of the application. Note that “My Application” is automatically created for you, so feel free to use that for demonstration purposes. The value you’re looking for is labelled HREF in the application’s Details tab. Keep this handy for the next section.

That takes care of all the necessary prep work. Now you’re ready to start building the application.

Add Facebook to Your React+Stormpath Application

Everything you need to get an application running with Stormpath, React, and Facebook is in the stormpath-express-react-example repository on GitHub. You can install it locally with a few simple commands:

git clone git@github.com:stormpath/stormpath-express-react-example.git stormpath-react-fb
cd stormpath-react-fb
npm install

This script will clone the git repository into a folder named stormpath-react-fb, move into that folder, and install all of the dependencies.

Configure the Application

For your application to work, it needs to know how to phone home to the Stormpath backend. To do that, you’ll set up a small configuration file named stormpath-react-fb/stormpath.yml and enter the data you set aside. This is how the file should be organized:

client:
  apiKey:
    id: [1]
    secret: [2]
application:
  href: [3]

Fill in the placeholders with your account information:

1. apiKey.id from the Stormpath API key file
2. apiKey.secret from the Stormpath API key file
3. HREF from the application details

The application is runnable now, but you still need to do the most important part: adding the Facebook Login button!

Facebook Integration

You’ll be substituting the app’s own login prompt with the Facebook Login page — start by editing the src/js/pages/LoginPage.js file.

Because Stormpath has built-in Facebook Login integration, all you need to do is import the SocialLoginButton component from the react-stormpath module, superseding the existing LoginForm component.

import { SocialLoginButton } from 'react-stormpath';

You will need to do just two things to render the button: specify Facebook as the login provider, and add some text for the login button.

<SocialLoginButton providerId="facebook">Sign in with Facebook</SocialLoginButton>

Putting it all together, your file should look like this:

import React from 'react';
import DocumentTitle from 'react-document-title';

import { SocialLoginButton } from 'react-stormpath';

export default class LoginPage extends React.Component {
  render() {
    return (
      
        

          

            

              
Login
              

            
          
          Sign in with Facebook
        
      
    );
  }
}

Run the Application

With everything configured, you’re ready to run the app. Execute the npm start command to spin up an Express server at http://localhost:3000. You’ll recall from the Facebook app configuration step that this is the URL of the platform you whitelisted. When the server is up, navigate to that URL and click the Login link in the header. You won’t see much there but you’ll know it’s working if you see a “Sign in with Facebook” button, which when clicked will redirect you to the Facebook Login page.

After entering your Facebook credentials, you’ll be redirected back to the example app’s home screen where you should be greeted by name!

Summary

With this simple application you’ve built, you’re actually able to do some really cool stuff. A user can log in to their Facebook account and your application will immediately be able to make use of basic user information like name and email address. From a user’s perspective, it’s so convenient to have one account that they can securely log in to and manage their personal information centrally. Stormpath makes it easy to hook into Facebook’s SDK with its built-in social integration.

You also can read more about Facebook integration with Stormpath in the Facebook Login Guide. Or, dive deeper into Stormpath’s React support with these resources:

• Stormpath React Product Documentation
• Tutorial: How to Build a React Application with User Management
• Tutorial: Custom Login and Registration Forms with Stormpath’s React SDK

If you have any comments or questions about logging into your React applications with Facebook and Stormpath, feel free to comment below, hit us up on Twitter at @goStormpath, or contact us directly at support@stormpath.com.

The post Add Facebook Login to Your Existing React Application appeared first on Stormpath User Identity API.