Authentication providers overview in Firebase - Mini Project: Build & Apply

Authentication Providers Overview with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using different authentication methods. You want to set up Firebase Authentication to support Email/Password and Google sign-in providers.

🎯 Goal: Set up Firebase Authentication with Email/Password and Google sign-in providers enabled in the configuration.

📋 What You'll Learn

Create a Firebase configuration object with the given apiKey and projectId

Add a variable to specify the authentication providers to enable

Initialize Firebase Authentication with the specified providers

Export the authentication instance for use in the app

💡 Why This Matters

🌍 Real World

Many web and mobile apps use Firebase Authentication to let users sign in easily with popular providers like Email and Google.

💼 Career

Understanding how to configure and initialize authentication providers is essential for cloud developers working on user management and security.

1

Create Firebase configuration object

Create a constant called firebaseConfig with these exact properties and values: apiKey: 'AIzaSyExampleKey12345', authDomain: 'your-app.firebaseapp.com', projectId: 'your-app'.

Firebase

# Your code here

Hint

Use a JavaScript object with the exact keys and values given.

2

Specify enabled authentication providers

Create a constant called enabledProviders and set it to an array containing the strings 'email' and 'google'.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

// Your code here

Hint

Use an array with the exact strings 'email' and 'google'.

3

Initialize Firebase Authentication with providers

Import initializeApp from 'firebase/app' and getAuth, EmailAuthProvider, and GoogleAuthProvider from 'firebase/auth'. Then initialize Firebase app with firebaseConfig and create a constant auth by calling getAuth(app). Also create a constant providers as an object with keys email and google mapped to new instances of EmailAuthProvider() and GoogleAuthProvider() respectively.

Firebase

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

const enabledProviders = ['email', 'google'];

// Your code here

Hint

Remember to import the required functions and classes from Firebase packages.

4

Export the authentication instance

Add a line to export the constant auth as the default export.

Firebase

import { initializeApp } from 'firebase/app';
import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey12345',
  authDomain: 'your-app.firebaseapp.com',
  projectId: 'your-app'
};

const enabledProviders = ['email', 'google'];

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const providers = {
  email: new EmailAuthProvider(),
  google: new GoogleAuthProvider()
};

// Your code here

Hint

Use export default auth; to export the authentication instance.

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