GitHub sign-in in Firebase - Step-by-Step Execution

Process Flow - GitHub sign-in

User clicks 'Sign in with GitHub'

↓

Firebase triggers GitHub OAuth flow

↓

User enters GitHub credentials

↓

GitHub verifies credentials

↓

GitHub sends auth token to Firebase

↓

Firebase verifies token and signs in user

↓

User is signed in and app updates UI

The user clicks sign-in, Firebase starts GitHub login, user authenticates on GitHub, then Firebase signs in the user and updates the app.

Execution Sample

Firebase

const provider = new firebase.auth.GithubAuthProvider();
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    console.log('User signed in:', result.user);
  })
  .catch((error) => console.error(error));

This code starts GitHub sign-in using a popup and logs the signed-in user or error.

Process Table

Step	Action	Firebase State	GitHub State	Result
1	User clicks 'Sign in with GitHub'	Idle	Idle	Start OAuth flow
2	Firebase opens GitHub login popup	Waiting for GitHub auth	Waiting for user input	Popup shown
3	User enters GitHub username and password	Waiting for GitHub auth	Verifying credentials	Credentials submitted
4	GitHub verifies credentials	Waiting for GitHub auth	Credentials valid	Token generated
5	GitHub sends token to Firebase	Verifying token	Token sent	Token received
6	Firebase verifies token and signs in user	User signed in	Token accepted	User authenticated
7	App updates UI to signed-in state	User signed in	Idle	UI updated
8	Process ends	User signed in	Idle	Sign-in complete

💡 User is signed in after Firebase verifies GitHub token and updates the app UI.

Status Tracker

Variable	Start	After Step 3	After Step 5	After Step 6	Final
firebaseState	Idle	Waiting for GitHub auth	Verifying token	User signed in	User signed in
gitHubState	Idle	Verifying credentials	Token sent	Token accepted	Idle
user	null	null	null	User object	User object

Key Moments - 3 Insights

Why does Firebase wait after opening the GitHub login popup?

Firebase waits for the user to enter credentials and GitHub to verify them, as shown in steps 2 and 3 of the execution_table.

What happens if GitHub credentials are incorrect?

Firebase will not receive a valid token, so the sign-in fails and an error is caught, stopping before step 6 in the execution_table.

When is the user object available in Firebase?

After Firebase verifies the GitHub token successfully at step 6, the user object becomes available.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Firebase state at step 4?

A Idle

B Verifying token

C Waiting for GitHub auth

D User signed in

💡 Hint

Check the 'Firebase State' column at step 4 in the execution_table.

At which step does the user become signed in according to the execution_table?

A Step 5

B Step 6

C Step 3

D Step 7

💡 Hint

Look for when 'User signed in' appears in the 'Firebase State' column.

If the user closes the GitHub popup before entering credentials, which step would not occur?

A Step 3

B Step 2

C Step 6

D Step 7

💡 Hint

Refer to the 'Action' column and consider when user input is required.

Concept Snapshot

GitHub sign-in with Firebase:
1. Create GitHubAuthProvider.
2. Call signInWithPopup(provider).
3. User logs in via GitHub popup.
4. Firebase receives token and signs in user.
5. Handle success or error.
Use this flow to authenticate users easily.

Full Transcript

GitHub sign-in with Firebase starts when the user clicks the sign-in button. Firebase opens a popup for GitHub login. The user enters their GitHub username and password. GitHub verifies these credentials and sends a token back to Firebase. Firebase verifies this token and signs in the user. Finally, the app updates the UI to show the user is signed in. If any step fails, an error is returned. This flow ensures secure and simple authentication using GitHub accounts.