Implementing Facebook Authentication

1. Adding Facebook Authentication to Your App

For a web app we will include Firebase and Facebook SDKs in our HTML file:

<!-- Firebase App (the core Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-app.js"></script>

<!-- Firebase Auth (specifically for authentication) -->
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-auth.js"></script>

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

Explanation:

• The first two script tags include the Firebase SDK for the core functionality (firebase-app.js) and authentication (firebase-auth.js), which are essential for integrating Firebase services, including authentication, into the web application.
• The third script tag includes the Facebook SDK which is used for integrating Facebook login functionality into the application for authentication purposes.

2. Initialize Firebase and Set Up Facebook Authentication

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Facebook SDK
window.fbAsyncInit = function() {
  FB.init({
    appId: 'YOUR_FACEBOOK_APP_ID',
    cookie: true,
    xfbml: true,
    version: 'v13.0'
  });

  // Check Facebook Login status
  FB.getLoginStatus(function(response) {
    // Handle the response
  });
};

Explanation: The code snippet initializes Firebase and the Facebook SDK in a web application.

• firebaseConfig contains the configuration information required to initialize Firebase, including the API key, authentication domain, project ID, and app ID.
• firebase.initializeApp(firebaseConfig) initializes Firebase using the provided configuration.
• window.fbAsyncInit is a callback function that initializes the Facebook SDK. It sets up the Facebook app ID, enables cookies, initializes the Facebook Markup Language (XFBML), and specifies the version of the Facebook Graph API to use.
• FB.getLoginStatus checks the current login status of the user with Facebook. The response object contains information about the user’s login status, which can be used to handle the response accordingly

3. Implementing Facebook Sign-In

function signInWithFacebook() {
  FB.login(function(response) {
    if (response.authResponse) {
      const credential = firebase.auth.FacebookAuthProvider.credential(
        response.authResponse.accessToken
      );

      // Sign in with the Facebook credential
      firebase.auth().signInWithCredential(credential)
        .then((userCredential) => {
          // Signed in successfully
          const user = userCredential.user;
          console.log(user);
        })
        .catch((error) => {
          console.error(error.message);
        });
    } else {
      console.log('User cancelled login or did not fully authorize.');
    }
  });
}

Explanation: This signInWithFacebook function handles the sign-in process using Facebook authentication in a web application. Here’s a breakdown of how it works:

1. FB.login is a Facebook SDK method that prompts the user to log in to their Facebook account and authorize the app.
2. The response parameter in the callback function of FB.login contains the user’s response to the login prompt.
3. If the user successfully logs in and authorizes the app (response.authResponse is truthy), the function creates a Firebase credential using the Facebook access token (response.authResponse.accessToken).
4. The firebase.auth().signInWithCredential(credential) method signs the user in to Firebase using the Facebook credential.
5. If the sign-in is successful, the then block is executed, and the user’s information is logged to the console.
6. If the user cancels the login or does not fully authorize the app, the else block is executed, and a message is logged to the console.

4. Handling User Authentication State

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in
    console.log("User is signed in");
  } else {
    // No user is signed in
    console.log("No user is signed in");
  }
});

Explanation: This code sets up a listener for authentication state changes in Firebase. When the authentication state changes (i.e., a user signs in or signs out), the provided callback function is called with the current user object.

• If a user is signed in (if (user)), it logs “User is signed in” to the console.
• If no user is signed in (else), it logs “No user is signed in” to the console.

This listener is useful for updating the UI based on the user’s authentication state, such as showing different content or navigation options for authenticated and unauthenticated users.

User authentication is a fundamental aspect of app development, ensuring secure access to user data and personalization. Firebase, a platform by Google, offers seamless integration with various authentication providers, including Facebook.

In this guide, we will explore how to implement Facebook Authentication with Firebase, complete with examples and outputs.