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

GitHub Sign-In with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using their GitHub accounts. This helps users log in quickly without creating a new username and password.

🎯 Goal: Create a Firebase authentication setup that enables users to sign in with GitHub. You will configure the initial Firebase app, set up GitHub as an authentication provider, implement the sign-in logic, and finalize the sign-in button in HTML.

📋 What You'll Learn

Initialize Firebase app with given config

Create a GitHubAuthProvider instance

Implement signInWithPopup using GitHub provider

Add a button element with id 'github-signin' for triggering sign-in

💡 Why This Matters

🌍 Real World

Many web apps allow users to sign in using their existing GitHub accounts to simplify login and improve security.

💼 Career

Understanding how to integrate third-party authentication providers like GitHub with Firebase is a valuable skill for building modern web applications.

1

Initialize Firebase App

Create a constant called firebaseConfig with the exact keys and values: apiKey: 'AIzaSyExample1234567890', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app', storageBucket: 'your-app.appspot.com', messagingSenderId: '1234567890', appId: '1:1234567890:web:abcdef123456'. Then initialize Firebase app by calling initializeApp(firebaseConfig) and assign it to a constant called app.

Firebase

# Create firebaseConfig object and initialize app
# Your code here

Need a hint?

Use const to declare firebaseConfig and app. The initializeApp function comes from Firebase SDK.

2

Create GitHub Auth Provider

Create a constant called provider and assign it a new instance of GithubAuthProvider from Firebase authentication.

Firebase

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

const app = initializeApp(firebaseConfig);

// Create GitHub auth provider
# Your code here

Need a hint?

Use new GithubAuthProvider() to create the provider instance.

3

Implement Sign-In Logic

Create a constant called auth by calling getAuth(app). Then write a function called signInWithGitHub that calls signInWithPopup(auth, provider) to start the GitHub sign-in process.

Firebase

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

const app = initializeApp(firebaseConfig);

const provider = new GithubAuthProvider();

// Create auth and signInWithGitHub function
# Your code here

Need a hint?

Use getAuth(app) to get the auth instance. Define a function that calls signInWithPopup with auth and provider.

4

Add Sign-In Button in HTML

Add a button element with id="github-signin" and text content Sign in with GitHub. Then add an event listener to this button that calls the signInWithGitHub function when clicked.

Firebase

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

const app = initializeApp(firebaseConfig);

const provider = new GithubAuthProvider();

const auth = getAuth(app);

function signInWithGitHub() {
  signInWithPopup(auth, provider);
}

// Add button element and event listener
# Your code here

Need a hint?

Create a button element, set its id and text, append it to the document body, and add a click event listener that calls signInWithGitHub.