How to Host a GitHub Login Page on Firebase (Step-by-Step Guide)

How to Implement GitHub Login and Host Your Web App on Firebase Hosting

Firebase is an excellent platform for building and hosting web apps, and in this tutorial, we’ll walk you through how to integrate GitHub login for user authentication and then deploy your app on Firebase Hosting.

1. Firebase Authentication with GitHub Login

Firebase Authentication simplifies adding authentication to your web app. With Firebase, you can easily add social login features, including GitHub authentication. This section covers the steps to implement GitHub login in your app.

Step 1: Set Up Firebase Project

Go to the Firebase Console.
Click on “Add Project” and follow the steps to create a new project.
Once your project is created, click on "Authentication" in the left sidebar, and enable the GitHub sign-in method under the "Sign-in method" tab.
You’ll need to provide the Client ID and Client Secret from GitHub, which you can get by creating a new OAuth application in your GitHub Developer Settings.

Step 2: Implement GitHub Login in Your Web App

Here’s the HTML and JavaScript code that implements the GitHub login:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Firebase Login with GitHub</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;
      padding: 10px;
      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>
  </div>

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

    // ✅ Your Firebase config
    const firebaseConfig = {
      apiKey: "AIzaSyD0fqYVO7KtOkcEj2xZUr-CXku_-OqGBs0",
      authDomain: "github-login-63d76.firebaseapp.com",
      projectId: "github-login-63d76",
      storageBucket: "github-login-63d76.firebasestorage.app",
      messagingSenderId: "737714994471",
      appId: "1:737714994471:web:cd037b40e941c683c7fd02"
    };

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    const githubProvider = new GithubAuthProvider();

    // 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;
        });
    };

    // Signup
    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;
        });
    };
  </script>

</body>
</html>

Step 3: Set Up Firebase Hosting

Once you've integrated GitHub login into your web app, the next step is to host your web app on Firebase Hosting.

Step 1: Install Firebase CLI

Install the Firebase CLI globally:

npm install -g firebase-tools

Step 2: Login to Firebase

Run the following command to log in to Firebase:

firebase login

This will open a browser where you can log in to your Firebase account.

Step 3: Initialize Firebase Hosting

In your project folder, run the following command:

firebase init

Select Hosting from the options and follow the instructions to set up your Firebase Hosting.

Step 4: Build Your Project (If Using a Framework)

If you're using a JavaScript framework like React, you’ll need to build your project. For React, run:

npm run build

This will generate a build folder containing your static files.

Step 5: Deploy Your App

To deploy your app, run:

firebase deploy

Once the deployment is complete, Firebase will provide you with a live URL to your hosted site, like:

https://your-project-id.web.app

Step 6: Visit Your Live Site

After deployment, you can visit the live URL to see your GitHub login web app hosted on Firebase.

Conclusion

By following these steps, you can easily integrate GitHub login into your Firebase app and host it on Firebase Hosting. Firebase makes it simple to set up secure authentication and deploy your web app quickly.

Check out the live demo here:

Live Demo: GitHub Login with Firebase

Firebase provides a seamless environment for building and deploying modern web apps, making it a great choice for developers.

Search This Blog

Vinayhac