Authentication providers overview in Firebase - Commands & Configuration

Introduction

When you build an app, you need a way to know who is using it. Authentication providers help you let users sign in easily and safely using different methods like email, phone, or social accounts.

When you want users to sign in with their Google account without creating a new password.

When you want to allow users to sign in using their phone number with a verification code.

When you want to let users create accounts using their email and password.

When you want to support sign-in with Facebook or Twitter for easier access.

When you want to manage user identity securely without building your own system.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  },
  "auth": {
    "providers": [
      "google.com",
      "password",
      "phone",
      "facebook.com",
      "twitter.com"
    ]
  }
}

This file configures Firebase hosting and lists the authentication providers enabled for your app.

hosting.public points to your app's public files.

auth.providers lists the sign-in methods your app supports, like Google, email/password, phone, Facebook, and Twitter.

Commands

Log in to your Firebase account to manage your projects and authentication settings.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

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

Terminal

firebase init auth

Expected Output

✔  Firebase Authentication setup complete.

✔  Enabled providers: Google, Email/Password, Phone, Facebook, Twitter

Deploy your authentication configuration to Firebase so users can start signing in.

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' for authentication.

List all users currently registered in your Firebase Authentication system.

Terminal

firebase auth:list

Expected Output

Users:

- uid: abc123, email: [e-mail], provider: password

- uid: def456, email: [e-mail], provider: google.com

Key Concept

If you remember nothing else from this pattern, remember: authentication providers let users sign in easily and securely using familiar accounts or methods without building your own system.

Common Mistakes

Not enabling the desired authentication providers in the Firebase console or config file.

Users cannot sign in with those methods if they are not enabled, causing login failures.

Always enable and configure each authentication provider you want to support before deploying.

Deploying the app without deploying the authentication configuration.

Changes to sign-in methods won't take effect, so users may not be able to log in as expected.

Run 'firebase deploy --only auth' after updating authentication settings.

Using phone authentication without setting up the required SMS verification in Firebase.

Phone sign-in will fail because Firebase cannot send verification codes.

Configure phone authentication properly in Firebase console and test SMS delivery.

Summary

Use 'firebase init auth' to set up authentication providers in your Firebase project.

Enable desired sign-in methods like Google, email/password, phone, Facebook, and Twitter in your config.

Deploy authentication settings with 'firebase deploy --only auth' to make them active.

Use 'firebase auth:list' to see registered users and verify authentication is working.

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