Google sign-in in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Authentication with Google provider.

Firebase

const provider = new firebase.auth.[1]();

Drag options to blanks, or click blank then click option'

AGoogleAuthProvider

BFacebookAuthProvider

CTwitterAuthProvider

DEmailAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using FacebookAuthProvider instead of GoogleAuthProvider

Using EmailAuthProvider which is for email/password sign-in

The GoogleAuthProvider is used to enable Google sign-in in Firebase Authentication.

2fill in blank

medium

Complete the code to trigger the Google sign-in popup.

Firebase

firebase.auth().signInWith[1](provider).then(result => { console.log(result.user); });

Drag options to blanks, or click blank then click option'

ARedirect

BToken

CEmail

DPopup

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect when popup is needed

Using signInWithEmail which is for email/password

The signInWithPopup method opens a popup window for Google sign-in.

3fill in blank

hard

Fix the error in the code to correctly handle sign-in errors.

Firebase

firebase.auth().signInWithPopup(provider).catch(error => { console.log(error.[1]); });

Drag options to blanks, or click blank then click option'

Amessage

Bmsg

CerrorMessage

DerrorMsg

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like msg or errorMsg

Trying to access errorMessage which does not exist

The error object has a message property that contains the error description.

4fill in blank

hard

Fill both blanks to create a user object with display name and email from the sign-in result.

Firebase

const user = { name: result.user.[1], email: result.user.[2] };

Drag options to blanks, or click blank then click option'

AdisplayName

Bemail

Cuid

DphotoURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using uid or photoURL instead of displayName for name

Mixing up email with other properties

The displayName and email properties hold the user's name and email address.

5fill in blank

hard

Fill all three blanks to sign out the user and log a confirmation message.

Firebase

firebase.auth().[1]().then(() => { console.log('[2]'); }).catch(error => { console.log(error.[3]); });

Drag options to blanks, or click blank then click option'

AsignOut

BUser signed out successfully

Cmessage

DsignIn

Attempts:

3 left

💡 Hint

Common Mistakes

Using signIn instead of signOut

Logging error without accessing the message property

signOut() signs out the user. The success message confirms sign-out. Errors are logged using the message property.

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