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

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

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

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

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.

Practice

1. What is the main purpose of using GithubAuthProvider in Firebase authentication?

easy

A. To send emails to users

B. To store user data in Firebase database

C. To allow users to sign in using their GitHub accounts

D. To create a new GitHub repository

Solution

1. Step 1: Understand the role of GithubAuthProvider

   GithubAuthProvider is a Firebase class that helps connect Firebase authentication with GitHub accounts.

2. Step 2: Identify its main use

   It is used to let users sign in to your app using their GitHub login credentials.

3. Final Answer:

   To allow users to sign in using their GitHub accounts -> Option C

4. Quick Check:

   GithubAuthProvider = GitHub sign-in [OK]

Hint: GithubAuthProvider is for GitHub login only [OK]

Common Mistakes:

• Confusing authentication with database storage
• Thinking it sends emails
• Assuming it manages GitHub repositories

2. Which of the following is the correct way to create a GitHub auth provider instance in Firebase JavaScript SDK?

easy

A. const provider = new GitHubAuth();

B. const provider = new GitAuthProvider();

C. const provider = new GithubProvider();

D. const provider = new GithubAuthProvider();

Solution

1. Step 1: Recall the exact class name

   The Firebase SDK uses the class named GithubAuthProvider to create a GitHub auth provider.

2. Step 2: Match the syntax

   The correct syntax to create an instance is new GithubAuthProvider().

3. Final Answer:

   const provider = new GithubAuthProvider(); -> Option D

4. Quick Check:

   Correct class name and syntax = const provider = new GithubAuthProvider(); [OK]

Hint: Class name is exactly GithubAuthProvider with capital G and A [OK]

Common Mistakes:

• Misspelling the class name
• Using incorrect capitalization
• Using incomplete class names

3. What will happen when the following Firebase code runs successfully?

const provider = new GithubAuthProvider();
const result = await signInWithPopup(auth, provider);
console.log(result.user.email);

medium

A. It throws an error because signInWithPopup is not async

B. It logs the signed-in user's GitHub email address

C. It logs the user's GitHub password

D. It logs undefined because result has no user

Solution

1. Step 1: Understand signInWithPopup behavior

   This function opens a popup for GitHub sign-in and returns a user credential object on success.

2. Step 2: Access user email from result

   The result.user.email contains the authenticated user's email from GitHub.

3. Final Answer:

   It logs the signed-in user's GitHub email address -> Option B

4. Quick Check:

   signInWithPopup returns user info including email [OK]

Hint: signInWithPopup returns user info including email [OK]

Common Mistakes:

• Thinking password is accessible
• Assuming signInWithPopup is synchronous
• Expecting result.user to be undefined

4. You wrote this code but get an error: signInWithPopup(auth, provider) is not a function. What is the most likely cause?

medium

A. You forgot to import signInWithPopup from Firebase auth module

B. You did not create a GitHub account

C. You used signInWithRedirect instead of signInWithPopup

D. You did not enable GitHub sign-in in Firebase console

Solution

1. Step 1: Analyze the error message

   The error says signInWithPopup is not a function, meaning it is not recognized in the code.

2. Step 2: Check imports

   This usually happens if signInWithPopup was not imported from Firebase auth module properly.

3. Final Answer:

   You forgot to import signInWithPopup from Firebase auth module -> Option A

4. Quick Check:

   Missing import causes function not found error [OK]

Hint: Always import functions you use from Firebase SDK [OK]

Common Mistakes:

• Assuming GitHub account absence causes this error
• Confusing signInWithPopup with signInWithRedirect
• Ignoring Firebase console settings

5. You want to add GitHub sign-in to your Firebase app. Which steps must you complete before calling signInWithPopup(auth, provider)? Select the best sequence.

hard

A. Register OAuth app on GitHub, enable GitHub sign-in in Firebase console, create GithubAuthProvider instance

B. Create GithubAuthProvider instance, enable GitHub sign-in in Firebase console, register OAuth app on GitHub

C. Register OAuth app on GitHub, create GithubAuthProvider instance, enable GitHub sign-in in Firebase console

D. Enable GitHub sign-in in Firebase console, create GithubAuthProvider instance, register OAuth app on GitHub

Solution

1. Step 1: Register OAuth app on GitHub

   You must register your app on GitHub to get client ID and secret for authentication.

2. Step 2: Enable GitHub sign-in in Firebase console

   This step activates GitHub as a sign-in provider in your Firebase project.

3. Step 3: Create GithubAuthProvider instance in your code

   After setup, create the provider instance to use in signInWithPopup.

4. Final Answer:

   Register OAuth app on GitHub, enable GitHub sign-in in Firebase console, create GithubAuthProvider instance -> Option A

5. Quick Check:

   Setup order matters: GitHub app, Firebase console, then code [OK]

Hint: Register on GitHub, enable in Firebase, then code [OK]

Common Mistakes:

• Skipping enabling GitHub sign-in in Firebase
• Not registering OAuth app on GitHub
• Creating provider before setup steps