React Facebook Login Example Tutorial

React Facebook Login Example Tutorial

Integrate Facebook login button in react apps; In this example tutorial, you will learn from scratch how to implement facebook login in react apps using react-facebook-plugin.

If you want to integrate facebook login authentication in your react app. So you will not need any react plugin for this. In this tutorial, you will learn how to add a facebook login button in react app with using react-facebook plugin.

Before you can integrate Facebook Sign-In into your react app, you must create a client ID, which you need to call the sign-in API.

If you do not know how to make apps on Facebook Developer Console. So you can make an app in the Facebook Developer Console by following the steps given below:

Step 1 – Visit the following url https://developers.facebook.com/apps/ and create a new facebook app.

Step 2 – Create facebook app with email and app name look like below picture:

create facebook app with laravel

Step 3 – Then, Navigate to setting->advanced and add redirect URL, looks like below picture:

get credential with facebook

Step 4 – Now, add valid auth redirect url. So, click facebook login->setting and add valid auth redirect URL, looks like below picture:

laravel facebook

Step 5 – Finally, Navigate to facebook developers dashboard and copy the following App ID and App SECRET, looks like below picture:

facebook app id and app secret

Now, save Facebook secret id and secret key, Which is found from the Facebook Developer Console App.

How to Integrate Facebook Login to your React Apps

  • Step 1 – Create React App
  • Step 2 – Install Bootstrap 4 Library
  • Step 3 – Install and Configure react-facebook-login
  • Step 4 – Create Facebook Login Component
  • Step 5 – Import Facebook Login Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Bootstrap 4 Library

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>React Facebook Login Example</h2>
    </div>
  );
}

export default App;

Step 3 – Install and Configure react-facebook-login

In this step, execute the following command to install Facebook login plugin into your react app:

npm install react-facebook-login

Step 4 – Create Facebook Login Component

In this step, /src/ directory and create a component, which names FacebookLoginComponent.js. Then add the following code into it:

import React from 'react'
import React, { useState } from 'react';
import FacebookLogin from 'react-facebook-login';
import { Card, Image } from 'react-bootstrap';
import './App.css';

class FacebookLoginComponent extends React.Component{
    const [login, setLogin] = useState(false);
    const [data, setData] = useState({});
    const [picture, setPicture] = useState('');

    const responseFacebook = (response) => {
    console.log(response);
    setData(response);
    setPicture(response.picture.data.url);
    if (response.accessToken) {
          setLogin(true);
        } else {
          setLogin(false);
        }
    }
    render(){
        return (
        <div class="container">
          <Card style={{ width: '600px' }}>
            <Card.Header>
              { !login && 
                <FacebookLogin
                  appId="562118384400275"
                  autoLoad={true}
                  fields="name,email,picture"
                  scope="public_profile,user_friends"
                  callback={responseFacebook}
                  icon="fa-facebook" />
              }
              { login &&
                <Image src={picture} roundedCircle />
              }
            </Card.Header>
            { login &&
              <Card.Body>
                <Card.Title>{data.name}</Card.Title>
                <Card.Text>
                  {data.email}
                </Card.Text>
              </Card.Body>
            }
          </Card>
        </div>
        );
    }
}

export default FacebookLoginComponent;

Step 5 – Import Facebook Login Component in App.js

In this step, you need to add the FacebookLoginComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import FacebookLoginComponent from './FacebookLoginComponent';

function App() {
  return (
    <div>
      
        <FacebookLoginComponent />

    </div>
  );
}

export default App;

Conclusion

Add Facebook login button in react apps; In this example tutorial, you have learned from scratch how to implement facebook login in react apps using react-facebook-plugin.

Recommended React Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *