Authentication providers overview in Firebase - Step-by-Step Execution

Process Flow - Authentication providers overview

User opens app

↓

Choose sign-in method

↓

Select provider

↓

Email

↓

Authenticate with provider

↓

Firebase verifies

↓

User signed in or error

↓

Access granted or retry

User picks a sign-in method, Firebase verifies it, then grants access or asks to retry.

Execution Sample

Firebase

firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());

This code starts Google sign-in using a popup window.

Process Table

Step	Action	Provider Selected	Firebase Response	User State
1	User opens app	None	Waiting for input	Not signed in
2	User clicks sign-in	Google	Popup opens	Not signed in
3	User enters Google credentials	Google	Verifying credentials	Not signed in
4	Firebase verifies token	Google	Token valid	Not signed in
5	Firebase signs in user	Google	Sign-in success	Signed in
6	User accesses app	Google	Access granted	Signed in
7	User signs out	Google	Signed out	Not signed in
8	User tries Facebook sign-in	Facebook	Popup opens	Not signed in
9	User cancels Facebook sign-in	Facebook	Sign-in cancelled	Not signed in

💡 User either signs in successfully or cancels sign-in, ending the flow.

Status Tracker

Variable	Start	After Step 2	After Step 5	After Step 7	After Step 9
User State	Not signed in	Not signed in	Signed in	Not signed in	Not signed in
Provider Selected	None	Google	Google	Google	Facebook
Firebase Response	Waiting for input	Popup opens	Sign-in success	Signed out	Sign-in cancelled

Key Moments - 3 Insights

Why does the user state remain 'Not signed in' after opening the popup?

Because the user has not completed authentication yet; see step 2 and 3 in execution_table where popup opens but sign-in is not done.

What happens if the user cancels sign-in?

Firebase returns a 'Sign-in cancelled' response and user state stays 'Not signed in', as shown in step 9.

How does Firebase know which provider to use?

The app code specifies the provider (Google, Facebook, etc.) before calling Firebase sign-in, as seen in 'Provider Selected' column.

Visual Quiz - 3 Questions

Look at the execution table, what is the user state at step 5?

A Not signed in

B Signed in

C Signing in

D Signed out

💡 Hint

Check the 'User State' column at step 5 in the execution_table.

At which step does Firebase verify the user's credentials?

A Step 6

B Step 3

C Step 4

D Step 2

💡 Hint

Look for 'Verifying credentials' or 'Token valid' in the 'Firebase Response' column.

If the user cancels sign-in, what Firebase response is shown?

A Sign-in cancelled

B Popup opens

C Sign-in success

D Access granted

💡 Hint

See the last row in the execution_table for the cancellation scenario.

Concept Snapshot

Authentication providers let users sign in using methods like Email, Google, or Facebook.
User picks a provider, Firebase opens a sign-in popup or redirect.
Firebase verifies credentials and signs in the user.
If successful, user gains access; if not, they can retry or cancel.
Each provider requires specific setup but follows this general flow.

Full Transcript

This visual execution shows how Firebase authentication providers work. The user opens the app and chooses a sign-in method like Google or Facebook. Firebase opens a popup for the user to enter credentials. Firebase then verifies these credentials. If valid, Firebase signs in the user and grants access. If the user cancels or credentials are invalid, the user remains signed out. The variable tracker shows how user state and provider selection change step by step. Key moments clarify common confusions like why the user is not signed in immediately after popup opens and what happens on cancellation. The quiz tests understanding of user state changes and Firebase responses during sign-in.

Practice

1. Which of the following is NOT a Firebase Authentication provider?

easy

A. Google

B. Twitter

C. LinkedIn

D. Facebook

Solution

1. Step 1: Recall Firebase supported providers

   Firebase supports Google, Facebook, Twitter, Email/Password, Phone, and Anonymous sign-in.

2. Step 2: Identify unsupported provider

   LinkedIn is not officially supported as a Firebase Authentication provider.

3. Final Answer:

   LinkedIn -> Option C

4. Quick Check:

   Firebase providers exclude LinkedIn [OK]

Hint: Remember common providers: Google, Facebook, Twitter, no LinkedIn [OK]

Common Mistakes:

• Confusing LinkedIn as supported
• Thinking all social logins are included
• Mixing OAuth providers with Firebase support

2. Which Firebase Authentication method is used to start a Google sign-in flow in JavaScript?

easy

A. firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider())

B. firebase.auth().signInWithGoogle()

C. firebase.auth().signInWithRedirect('google')

D. firebase.auth().signInWithEmailAndPassword('google')

Solution

1. Step 1: Identify correct method for Google sign-in

   Firebase uses signInWithPopup() or signInWithRedirect() with a provider instance.

2. Step 2: Match method and provider

   signInWithPopup(new firebase.auth.GoogleAuthProvider()) is the correct syntax to start Google sign-in.

3. Final Answer:

   firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider()) -> Option A

4. Quick Check:

   Use signInWithPopup with GoogleAuthProvider [OK]

Hint: Use signInWithPopup with new GoogleAuthProvider() [OK]

Common Mistakes:

• Using non-existent signInWithGoogle()
• Passing string instead of provider object
• Confusing email sign-in method

3. What will the following Firebase Authentication code do?

const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
  console.log(result.user.email);
});

medium

A. Sign in anonymously and log user ID

B. Start Google sign-in and log user's email on success

C. Throw an error because FacebookAuthProvider is invalid

D. Start Facebook sign-in and log user's email on success

Solution

1. Step 1: Analyze provider and method

   The code creates a FacebookAuthProvider and calls signInWithPopup(provider), which starts Facebook sign-in.

2. Step 2: Understand the then() callback

   On success, it logs the signed-in user's email from result.user.email.

3. Final Answer:

   Start Facebook sign-in and log user's email on success -> Option D

4. Quick Check:

   FacebookAuthProvider + signInWithPopup logs email [OK]

Hint: Provider class matches sign-in method and logs user email [OK]

Common Mistakes:

• Confusing Facebook with Google provider
• Expecting anonymous sign-in
• Thinking provider is invalid

4. Identify the error in this Firebase Authentication code snippet for phone sign-in:

const provider = new firebase.auth.PhoneAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => {
  console.log(result.user.phoneNumber);
});

medium

A. Missing email parameter for phone sign-in

B. PhoneAuthProvider cannot be used with signInWithPopup()

C. PhoneAuthProvider requires OAuth scopes

D. signInWithPopup() only works with anonymous sign-in

Solution

1. Step 1: Check usage of PhoneAuthProvider

   PhoneAuthProvider is used differently; it does not support signInWithPopup().

2. Step 2: Identify correct phone sign-in method

   Phone sign-in uses verification codes and confirmation, not popup OAuth flows.

3. Final Answer:

   PhoneAuthProvider cannot be used with signInWithPopup() -> Option B

4. Quick Check:

   Phone sign-in uses verification, not popup [OK]

Hint: Phone sign-in uses verification, not popup method [OK]

Common Mistakes:

• Trying to use popup with phone provider
• Expecting email for phone sign-in
• Confusing OAuth scopes with phone auth

5. You want to allow users to sign in anonymously but later link their account to Google sign-in. Which Firebase Authentication approach is correct?

hard

A. Use signInAnonymously() first, then linkWithPopup(new GoogleAuthProvider())

B. Use signInWithPopup(new GoogleAuthProvider()) only, no anonymous sign-in

C. Use signInAnonymously() only, no linking possible

D. Use signInWithEmailAndPassword() then linkWithPopup(new GoogleAuthProvider())

Solution

1. Step 1: Understand anonymous sign-in and linking

   Firebase allows anonymous sign-in, then linking that anonymous user to another provider.

2. Step 2: Identify correct linking method

   After signInAnonymously(), use linkWithPopup() with GoogleAuthProvider to link accounts.

3. Final Answer:

   Use signInAnonymously() first, then linkWithPopup(new GoogleAuthProvider()) -> Option A

4. Quick Check:

   Anonymous sign-in + linkWithPopup for Google [OK]

Hint: Sign in anonymously, then link Google with linkWithPopup() [OK]

Common Mistakes:

• Skipping linking step
• Using only Google sign-in without anonymous
• Trying to link email/password instead