How to Add "Continue with GitHub" and "Continue with Facebook" Login to Your Firebase Web App

Offering social login options can significantly improve user experience and make authentication seamless. In this guide, we’ll walk through how to set up both GitHub and Facebook login using Firebase Authentication, and then host your app using Firebase Hosting.

Step 1: Set Up Firebase Project

Before we add login options, you need a Firebase project.

Go to Firebase Console.
Create a new project (or use an existing one).
Enable Authentication under "Build" > "Authentication" > "Sign-in method".

Step 2: Enable GitHub and Facebook Sign-In

Enable GitHub Login

Go to Authentication > Sign-in method.
Enable GitHub.
Add your GitHub Client ID and Client Secret (get these from GitHub Developer Settings).

Enable Facebook Login

Still in the Sign-in method section, enable Facebook.
Enter your Facebook App ID and App Secret (from Facebook for Developers).
Add the OAuth redirect URI shown by Firebase to your Facebook app settings.

Step 3: Code the Frontend

Below is the complete HTML/JS code to handle Email/Password, GitHub, and Facebook authentication using Firebase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Firebase Social Login</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f4f4f4;
    }
    .container {
      width: 300px;
      padding: 20px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: white;
    }
    input {
      width: 90%;
      margin: 5px 0;
      padding: 8px;
    }
    button {
      width: 100%;
      padding: 8px;
      margin-top: 10px;
      cursor: pointer;
    }
    .github-button {
      background-color: #333;
      color: white;
      border: none;
      font-weight: bold;
    }
    .facebook-button {
      background-color: #4267B2;
      color: white;
      border: none;
      font-weight: bold;
    }
    .error-message {
      color: red;
      font-size: 14px;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Login</h2>
  <p id="error-message" class="error-message"></p>

  <input type="email" id="email" placeholder="Enter your email" />
  <input type="password" id="password" placeholder="Enter your password" />

  <button onclick="login()">Login</button>
  <button onclick="signUp()">Sign Up</button>

  <hr/>

  <button class="github-button" onclick="loginWithGitHub()">Continue with GitHub</button>
  <button class="facebook-button" onclick="loginWithFacebook()">Continue with Facebook</button>
</div>

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-app.js";
  import {
    getAuth,
    signInWithEmailAndPassword,
    createUserWithEmailAndPassword,
    signInWithPopup,
    GithubAuthProvider,
    FacebookAuthProvider
  } from "https://www.gstatic.com/firebasejs/11.6.0/firebase-auth.js";

  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_BUCKET.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const githubProvider = new GithubAuthProvider();
  const facebookProvider = new FacebookAuthProvider();

  // Email/Password Login
  window.login = function () {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const errorMessage = document.getElementById("error-message");

    signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        alert("Logged in successfully!");
      })
      .catch(error => {
        errorMessage.textContent = error.message;
      });
  };

  // Email/Password Sign Up
  window.signUp = function () {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const errorMessage = document.getElementById("error-message");

    createUserWithEmailAndPassword(auth, email, password)
      .then(() => {
        alert("Account created successfully!");
      })
      .catch(error => {
        errorMessage.textContent = error.message;
      });
  };

  // GitHub Login
  window.loginWithGitHub = function () {
    signInWithPopup(auth, githubProvider)
      .then((result) => {
        const user = result.user;
        alert("Logged in with GitHub as " + (user.displayName || user.email));
        console.log(user);
      })
      .catch(error => {
        document.getElementById("error-message").textContent = error.message;
      });
  };

  // Facebook Login
  window.loginWithFacebook = function () {
    signInWithPopup(auth, facebookProvider)
      .then((result) => {
        const user = result.user;
        alert("Logged in with Facebook as " + (user.displayName || user.email));
        console.log(user);
      })
      .catch(error => {
        document.getElementById("error-message").textContent = error.message;
      });
  };
</script>

</body>
</html>

Note: Replace YOUR_API_KEY, YOUR_PROJECT_ID, etc., with your actual Firebase config values.

Step 4: Host Your App with Firebase Hosting

Once your login system is ready, it’s time to go live!

1. Install Firebase CLI

npm install -g firebase-tools

2. Login to Firebase

firebase login

3. Initialize Your Project

firebase init

Choose Hosting.
Select your Firebase project.
Choose public as the directory.
Select Yes when asked to configure as a single-page app.

4. Deploy Your App

firebase deploy

You’ll get a live URL like https://your-project-name.web.app.

Final Thoughts

By integrating GitHub and Facebook Login with Firebase Authentication, you give users flexibility and ease of access. Pairing this with Firebase Hosting allows you to launch your app in just minutes.

Need help customizing or styling the login buttons? Let me know!

Search This Blog

Vinayhac