Facebook sign-in in Firebase - Mini Project: Build & Apply

Facebook Sign-In with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using their Facebook account. This makes it easy for users to log in without creating a new password.

🎯 Goal: Set up Facebook sign-in authentication using Firebase in a web app. You will create the initial Firebase configuration, add Facebook as a sign-in provider, implement the sign-in function, and complete the setup to allow users to log in with Facebook.

📋 What You'll Learn

Create a Firebase configuration object with the given API keys

Add a FacebookAuthProvider instance for Facebook sign-in

Implement a function to sign in with Facebook using Firebase Authentication

Complete the Firebase app initialization and export the sign-in function

💡 Why This Matters

🌍 Real World

Many web apps allow users to sign in with social accounts like Facebook to simplify login and improve user experience.

💼 Career

Understanding how to implement social sign-in with Firebase is a common task for frontend and full-stack developers working on user authentication.

1

Create Firebase configuration object

Create a constant called firebaseConfig with the following exact properties and values: apiKey: 'AIzaSyExampleKey1234567890', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'.

Firebase

# Your code here

Need a hint?

Use a JavaScript object with the exact keys and values given.

2

Add FacebookAuthProvider instance

Create a constant called facebookProvider and set it to a new instance of firebase.auth.FacebookAuthProvider().

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

# Your code here

Need a hint?

Use the new keyword to create the FacebookAuthProvider instance.

3

Implement Facebook sign-in function

Write an async function called signInWithFacebook that calls firebase.auth().signInWithPopup(facebookProvider) and returns the result.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const facebookProvider = new firebase.auth.FacebookAuthProvider();

# Your code here

Need a hint?

Use async and await to handle the popup sign-in.

4

Initialize Firebase app and export sign-in function

Add the line firebase.initializeApp(firebaseConfig); to initialize Firebase. Then export the signInWithFacebook function using export { signInWithFacebook };.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey1234567890',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app',
  storageBucket: 'your-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456'
};

const facebookProvider = new firebase.auth.FacebookAuthProvider();

async function signInWithFacebook() {
  return await firebase.auth().signInWithPopup(facebookProvider);
}

# Your code here

Need a hint?

Call firebase.initializeApp with the config, then export the sign-in function.