Google sign-in in Firebase - Mini Project: Build & Apply

Google Sign-In with Firebase

📖 Scenario: You are building a simple web app that allows users to sign in using their Google account. This helps users log in quickly without creating a new password.

🎯 Goal: Create a Firebase project setup that enables Google sign-in authentication and implement the sign-in logic in your web app.

📋 What You'll Learn

Initialize Firebase in your project with the given config

Create a Firebase Auth instance

Set up GoogleAuthProvider for Google sign-in

Implement a function to trigger Google sign-in popup

💡 Why This Matters

🌍 Real World

Google sign-in is a common way to let users quickly log into web apps without creating new passwords, improving user experience and security.

💼 Career

Understanding how to integrate third-party authentication providers like Google with Firebase is a valuable skill for frontend and full-stack developers working on modern web applications.

1

Initialize Firebase

Create a constant called firebaseConfig with the exact keys and values: apiKey: "AIzaSyExampleKey12345", authDomain: "your-app.firebaseapp.com", projectId: "your-app", storageBucket: "your-app.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef123456". Then initialize Firebase with initializeApp(firebaseConfig) and assign it to a constant called app.

Firebase

# Create firebaseConfig object and initialize Firebase app
# Your code here

Hint

Use const firebaseConfig = { ... } with the exact keys and values. Then call initializeApp(firebaseConfig) and assign it to app.

2

Create Firebase Auth Instance

Create a constant called auth and assign it the result of calling getAuth(app).

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyExampleKey12345",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

# Create auth instance from app
# Your code here

Hint

Use const auth = getAuth(app); to create the auth instance.

3

Set Up GoogleAuthProvider

Create a constant called provider and assign it a new instance of GoogleAuthProvider().

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyExampleKey12345",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

# Create GoogleAuthProvider instance
# Your code here

Hint

Use const provider = new GoogleAuthProvider(); to create the provider.

4

Implement Google Sign-In Function

Create an async function called signInWithGoogle that calls signInWithPopup(auth, provider) and awaits its result.

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyExampleKey12345",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456"
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);

const provider = new GoogleAuthProvider();

# Create async function signInWithGoogle that calls signInWithPopup(auth, provider)
# Your code here

Hint

Define async function signInWithGoogle() and inside it call await signInWithPopup(auth, provider);.

Practice

1. What is the main purpose of using Google sign-in with Firebase Authentication?

easy

A. To store user data in Google Drive

B. To let users log in easily using their Google accounts

C. To send emails through Gmail automatically

D. To create Google Cloud virtual machines

Solution

1. Step 1: Understand Firebase Authentication

   Firebase Authentication helps users sign in securely to apps.

2. Step 2: Identify Google sign-in role

   Google sign-in allows users to log in using their Google accounts easily.

3. Final Answer:

   To let users log in easily using their Google accounts -> Option B

4. Quick Check:

   Google sign-in = Easy user login [OK]

Hint: Google sign-in means easy login with Google accounts [OK]

Common Mistakes:

• Confusing sign-in with data storage
• Thinking it sends emails automatically
• Assuming it manages cloud machines

2. Which Firebase Authentication code snippet correctly initializes Google sign-in in JavaScript?

easy

A. const provider = new firebase.auth.TwitterAuthProvider();

B. const provider = new firebase.auth.EmailAuthProvider();

C. const provider = new firebase.auth.FacebookAuthProvider();

D. const provider = new firebase.auth.GoogleAuthProvider();

Solution

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

   Google sign-in uses GoogleAuthProvider in Firebase Authentication.

2. Step 2: Match code snippet

   The snippet with new firebase.auth.GoogleAuthProvider() is correct.

3. Final Answer:

   const provider = new firebase.auth.GoogleAuthProvider(); -> Option D

4. Quick Check:

   GoogleAuthProvider = Google sign-in [OK]

Hint: Google sign-in uses GoogleAuthProvider class [OK]

Common Mistakes:

• Using EmailAuthProvider for Google sign-in
• Confusing with Twitter or Facebook providers
• Missing 'new' keyword in initialization

3. Given this JavaScript code snippet for Google sign-in, what will be logged if the user successfully signs in?

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

medium

A. The user's Google email address

B. An error message about sign-in failure

C. The user's Google profile photo URL

D. The user's Google display name

Solution

1. Step 1: Analyze the success callback

   On success, result.user.email is logged.

2. Step 2: Understand what result.user.email contains

   It contains the signed-in user's Google email address.

3. Final Answer:

   The user's Google email address -> Option A

4. Quick Check:

   result.user.email = user email [OK]

Hint: signInWithPopup success logs user email [OK]

Common Mistakes:

• Confusing email with display name or photo URL
• Assuming error message logs on success
• Ignoring the promise success path

4. You wrote this code to sign in with Google but get an error: firebase.auth().signInWithPopup(provider) is not a function. What is the likely cause?

medium

A. The user canceled the sign-in popup

B. Google sign-in is disabled in Firebase console

C. Firebase Authentication SDK is not imported or initialized properly

D. The provider variable is not declared

Solution

1. Step 1: Understand the error message

   The error says signInWithPopup is not a function, meaning Firebase Auth is missing or not loaded.

2. Step 2: Identify common causes

   Not importing or initializing Firebase Authentication SDK causes this error.

3. Final Answer:

   Firebase Authentication SDK is not imported or initialized properly -> Option C

4. Quick Check:

   Missing SDK causes method undefined error [OK]

Hint: Check Firebase Auth SDK import if signInWithPopup missing [OK]

Common Mistakes:

• Assuming Google sign-in disabled causes method error
• Ignoring SDK import errors
• Confusing user cancel with missing function error

5. You want to allow users to sign in with Google and then save their display name and email in Firestore. Which sequence of steps is correct?

hard

A. Enable Google sign-in in Firebase console, sign in with GoogleAuthProvider, then write user info to Firestore

B. Sign in with GoogleAuthProvider, then enable Google sign-in in Firebase console, then write user info

C. Write user info to Firestore first, then enable Google sign-in, then sign in

D. Enable Google sign-in in Firebase console, write user info to Firestore, then sign in

Solution

1. Step 1: Enable Google sign-in in Firebase console

   This step is required before users can sign in with Google.

2. Step 2: Sign in users using GoogleAuthProvider

   After enabling, use Firebase code to sign in users.

3. Step 3: Save user display name and email to Firestore

   Once signed in, write user info to Firestore database.

4. Final Answer:

   Enable Google sign-in in Firebase console, sign in with GoogleAuthProvider, then write user info to Firestore -> Option A

5. Quick Check:

   Enable -> Sign in -> Save data [OK]

Hint: Enable sign-in first, then sign in, then save user data [OK]

Common Mistakes:

• Trying to sign in before enabling Google sign-in
• Saving user data before sign-in
• Changing order of steps incorrectly