GitHub sign-in in Firebase - Commands & Configuration

Introduction

GitHub sign-in lets users log into your app using their GitHub account. This makes it easier for users because they don't need to create a new password for your app.

When you want to let users quickly access your app without creating a new account.

When your app targets developers who likely have GitHub accounts.

When you want to reduce password management and improve security by using GitHub's login system.

When you want to link user activity in your app to their GitHub identity.

When you want to simplify user registration and sign-in flows.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

This file configures Firebase Hosting.

hosting.public: The folder with your web files.

Commands

Log into Firebase CLI with your Google account to manage your Firebase projects.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

Initialize Firebase Authentication in your project to enable sign-in methods like GitHub.

Terminal

firebase init auth

Expected Output

=== Authentication Setup ===

✔  Authentication enabled

✔  GitHub provider enabled

Firebase Authentication has been set up.

Deploy the authentication configuration to Firebase so GitHub sign-in is active.

Terminal

firebase deploy --only auth

Expected Output

=== Deploying to 'your-project-id'...

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id/overview

→

--only - Deploy only the specified Firebase feature, here 'auth' to update authentication settings.

Open the Firebase Console Authentication page in your browser to verify GitHub sign-in is enabled.

Terminal

firebase open auth

Expected Output

No output (command runs silently)

Key Concept

If you remember nothing else from this pattern, remember: enabling GitHub sign-in in Firebase lets users log in easily using their existing GitHub accounts without managing new passwords.

Common Mistakes

Not enabling GitHub sign-in in the Firebase Console after deploying.

Users won't see GitHub as a login option if it's not enabled in the console.

Always verify GitHub provider is enabled in the Firebase Console Authentication settings.

Not setting up OAuth credentials in GitHub Developer settings.

Firebase needs these credentials to connect your app with GitHub for sign-in.

Create OAuth app in GitHub, then enter Client ID and Secret in Firebase Console under GitHub sign-in.

Deploying without running 'firebase login' first.

You must be logged in to deploy changes to Firebase.

Run 'firebase login' before deploying to authenticate your CLI session.

Summary

Use 'firebase login' to authenticate your CLI with Firebase.

Run 'firebase init auth' to set up authentication including GitHub sign-in.

Deploy your auth settings with 'firebase deploy --only auth' to activate GitHub login.

Verify GitHub sign-in is enabled in the Firebase Console.

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