Google sign-in in Firebase - Commands & Configuration

Introduction

Google sign-in lets users log into your app using their Google account. It solves the problem of creating and managing separate usernames and passwords by using a trusted Google login.

When you want users to quickly sign in without creating a new account.

When you want to improve security by using Google's authentication system.

When you want to reduce password management and reset requests.

When you want to access basic user profile info like name and email easily.

When you want to support single sign-on across multiple apps using Google accounts.

Config File - firebase.json

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/**",
        "destination": "/index.html"
      }
    ]
  }
}

This file configures Firebase hosting.

hosting.public: folder with your app files.

Commands

Log in to Firebase CLI with your Google account to manage your Firebase projects.

Terminal

firebase login

Expected Output

✔  Success! Logged in as [e-mail]

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

Terminal

firebase init auth

Expected Output

=== Authentication Setup ===

✔  Firebase Authentication enabled

✔  Google sign-in provider enabled

Firebase Authentication has been set up in your project.

Deploy the authentication configuration to Firebase so Google sign-in becomes active.

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/authentication/providers

→

--only - Deploy only the specified Firebase feature, here 'auth' for authentication.

List all enabled sign-in methods to verify Google sign-in is active.

Terminal

firebase auth:sign-in-methods:list

Expected Output

Enabled sign-in methods:

- Google

- Email/Password

Key Concept

If you remember nothing else from this pattern, remember: enabling Google sign-in in Firebase lets users log in easily using their existing Google accounts without managing new passwords.

Common Mistakes

Not enabling Google sign-in provider in Firebase console or config.

Users cannot log in with Google if the provider is not enabled.

Always enable Google sign-in in Firebase Authentication settings before deploying.

Forgetting to deploy authentication changes after enabling Google sign-in.

Changes stay local and do not affect the live app.

Run 'firebase deploy --only auth' to apply authentication updates.

Using incorrect OAuth client IDs or not configuring OAuth consent screen in Google Cloud Console.

Google sign-in will fail due to invalid credentials or permissions.

Set up OAuth client IDs and consent screen properly in Google Cloud Console linked to your Firebase project.

Summary

Use 'firebase login' to authenticate your CLI with Firebase.

Run 'firebase init auth' to enable authentication and Google sign-in.

Deploy changes with 'firebase deploy --only auth' to activate Google sign-in.

Verify enabled sign-in methods with 'firebase auth:sign-in-methods:list'.

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