How to login Facebook using JavaScript?

Facebook is one of the most popular social media platforms, with over 2.9 billion monthly active users as of 2023. Logging into Facebook is something many users do on a daily basis to access their newsfeed and connect with friends and family. While Facebook offers a straightforward login process through their website and mobile apps, it is also possible to log into Facebook using JavaScript code.

In this comprehensive guide, we will walk through the steps to log into Facebook programmatically using JavaScript. We will cover the Facebook Login SDK, setting up a basic login page, handling permissions and user sessions, and customizing the login experience. By the end, you will have the knowledge to build your own Facebook login system for web apps and websites.

Prerequisites

Before we dive into the code, there are a few prerequisites you need to get started:

Basic knowledge of HTML, CSS, and JavaScript
Facebook developer account and app setup
Code editor like Visual Studio Code

Local web server like XAMPP or Node.js

You don’t need to be an expert developer, but having basic web development skills will be helpful. We’ll explain each prerequisite in more detail throughout the article.

Installing the Facebook SDK

The first step is to install the Facebook SDK for JavaScript, which handles all the underlying API calls and authentication logic. There are a few different ways to add the SDK to your project:

Via CDN

The simplest method is to link the SDK from Facebook’s CDN:

<script async defer crossorigin="anonymous" 
  src="https://connect.facebook.net/en_US/sdk.js">
</script>

This will give you access to the FB JavaScript object to make API calls.

npm

Alternatively, you can install the SDK via npm:

npm install facebook-login-sdk

And import it:

import * as Facebook from 'facebook-login-sdk';

Download SDK

Finally, you can download the SDK directly from GitHub and link it:

<script src="facebook-login-sdk.js"></script>

Choose the method that best fits your project setup. The CDN provides the easiest integration, while npm gives more control for complex apps.

Setting up the Facebook App

Before we can integrate Facebook Login, we need to register an app on Facebook’s Developer Console and get our app credentials:

Go to https://developers.facebook.com and login
Click My Apps > Create App

Enter a display name, contact email, and category for your app
Go to the Facebook Login product and click Set Up
Enter your development and production OAuth redirect URIs (we’ll use http://localhost for now)

Save changes and note down your App ID and App Secret

This registers your app with Facebook and gets your credentials for making API calls. Make sure to set a valid OAuth redirect URI or you may see login issues.

Creating a Basic Login Page

With our app setup, we can now start building out our basic login page. Here is a simple HTML page with a Login button:

<!DOCTYPE html>
<html>
<head>
  <title>Facebook Login</title>
</head>
<body>

  <script async defer crossorigin="anonymous" 
    src="https://connect.facebook.net/en_US/sdk.js">
  </script>
  
  <div id="fb-root"></div>
  
  <button id="loginBtn">Login with Facebook</button>

  <script>
    // JavaScript code here
  </script>

</body>
</html>

We load the Facebook SDK script and include a

with id “fb-root”. This is required for the SDK.

Next, inside our JavaScript, we can initialize the Facebook SDK:

window.fbAsyncInit = function() {
  FB.init({
    appId            : 'your-app-id',
    autoLogAppEvents : true,
    xfbml            : true,
    version          : 'v13.0'
  });
};

Replace your-app-id with the actual App ID from your Facebook app settings. This initializes the SDK.

Now when the login button is clicked, we can trigger the Facebook login dialog:

loginBtn.addEventListener('click', (e) => {
  FB.login(response => {
    // handle response
  });
});

The FB.login method opens the login popup. On completion, we get the response object we can use to check if the user logged in successfully.

That’s it for a basic Facebook login page! The user will see the login dialog when clicking the button.

Handling Login Response and Sessions

When the user logs in, we can check the response status to see if they successfully authenticated:

FB.login(response => {
  if (response.status === 'connected') {
    // user logged in
  } else {
    // user cancelled login
  } 
});

If the status is “connected”, that means the user logged in properly and we can access their Facebook profile.

To actually get the user profile information, we need to make an API call to the /me Graph endpoint after login:

FB.api('/me', userData => {
  console.log(userData); // user profile object
});

This gives us access to their name, profile pic, email, etc. depending on app permissions.

It’s also important to properly handle user sessions with the SDK. When the page first loads, we should check if a user is already logged in:

FB.getLoginStatus(response => {
  if (response.status === 'connected') {
    // user is logged in
  } else {
    // user is not logged in
  }
});

This ensures we show the right UI state for the current user. For example, hiding the Login button if they are already connected.

Similarly, when the user logs out, we need to update the session state:

FB.logout(response => {
  // user is now logged out
});

This will destroy the access token from the SDK so the user is properly logged out.

Requesting Additional Permissions

By default, Facebook only provides basic profile info on the user. To get additional data like their email, birthday, posts, etc. you need to request extended permissions:

FB.login(response => {
  // Request additional permissions  
  FB.api('/me/permissions', 'post', {
    permissions: ['email', 'user_birthday'] 
  });
});

The permissions array can contain any valid Facebook permissions you want to request access to.

It’s best to only ask for permissions that are necessary for your app. The first time your app requests sensitive permissions, the user will see a dialog confirming they grant access.

Customizing the Login Button

The default Facebook login button UI is pretty plain. We can customize it using some additional parameters:

FB.login(response => {
  // login handler
}, {
  scope: 'email,user_birthday',
  return_scopes: true, 
  auth_type: 'reauthenticate',
  button_shape: 'pill',
  button_size: 'large' 
});

This makes the button pill-shaped, large, and requests additional scopes on login. See the docs for all customization options.

For even more customization, you can create your own login button and use fbAsyncInit to trigger the dialog:

<button id="customBtn">Login</button>

const customBtn = document.getElementById('customBtn');

customBtn.addEventListener('click', () => {
  FB.login(//...); 
});

This lets you handle the UI while the SDK does the actual authentication logic.

Advanced Features

Here are some advanced features to take your Facebook Login integration further:

Login with Redirect

Rather than a popup, you can do a full redirect login flow:

FB.login(response => {
  // handle response
}, {
  auth_type: 'reauthenticate',
  redirect_uri: '/home' 
});

After login, the user will redirect to /home rather than seeing a popup. Useful for certain types of apps.

Facebook Login Button

For an out-of-the-box solution, use the XFBML Facebook Login Button:

<div 
  class="fb-login-button" 
  data-width="200"
  data-max-rows="1"
  data-size="large"
  data-button-type="login_with"
  data-show-faces="false"
  data-auto-logout-link="true"
  data-use-continue-as="false">
</div>

This generates a customized login button managed by Facebook. Less flexibility but easier integration.

Facebook SDK for other Platforms

In addition to JavaScript, Facebook provides SDKs for React Native, iOS, Android, Unity, and more. The concepts are similar across platforms.

Check the Facebook for Developers site for docs on leveraging Facebook login across multiple platforms.

Conclusion

That covers the basics of logging into Facebook using the Facebook SDK for JavaScript! Here are some key points:

Install the Facebook SDK

Initialize the SDK with your Facebook App ID
Use FB.login() to open the login popup and get user access tokens
Handle user sessions on initial page load and logout

Customize permissions and the login button UI
Use FB APIs to get user profile data

With these steps, you can build a fully-featured Facebook login for your web apps. The JavaScript SDK handles much of the complexity around authentication and session management. Add the ability to post to Facebook, invite friends, or access other Facebook features to take your integration even further!