User profile data in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the current user's UID.

Firebase

const userId = firebase.auth().currentUser.[1];

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

AdisplayName

Bemail

Cuid

DphoneNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'email' instead of 'uid' will not give the unique user ID.

Trying to access 'displayName' when you want the user ID.

The uid property uniquely identifies the user in Firebase Authentication.

2fill in blank

medium

Complete the code to update the user's display name in their profile.

Firebase

firebase.auth().currentUser.updateProfile({ displayName: [1] });

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

A'user123'

BdisplayName

CuserName

D'New Name'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a variable without quotes when a string is expected.

Using the property name instead of a string value.

The updateProfile method expects an object with the new display name as a string.

3fill in blank

hard

Fix the error in the code to correctly fetch the user's email.

Firebase

const email = firebase.auth().currentUser.[1];

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

Aemail

Bmail

CuserEmail

DemailAddress

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'emailAddress' or 'userEmail' which are not valid properties.

Trying to access 'mail' which does not exist.

The correct property to get the user's email is email.

4fill in blank

hard

Fill both blanks to set the user's photo URL and then reload the user data.

Firebase

firebase.auth().currentUser.updateProfile({ photoURL: [1] }).then(() => { return firebase.auth().currentUser.[2](); });

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

A'https://example.com/photo.jpg'

Breload

Crefresh

Dupdate

Attempts:

3 left

💡 Hint

Common Mistakes

Using a method name instead of a string for photoURL.

Calling a non-existent method like 'refresh' or 'update' instead of 'reload'.

Use a string URL for photoURL and call reload() to refresh user data.

5fill in blank

hard

Fill all three blanks to create a user profile object with UID, email, and display name.

Firebase

const profile = { id: [1], email: [2], name: [3] };

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

Afirebase.auth().currentUser.uid

Bfirebase.auth().currentUser.email

Cfirebase.auth().currentUser.displayName

Dfirebase.auth().currentUser.phoneNumber

Attempts:

3 left

💡 Hint

Common Mistakes

Using phoneNumber instead of displayName for the name field.

Mixing up email and uid properties.

Use uid for id, email for email, and displayName for name from the current user.

Practice

1. What is the main purpose of storing user profile data in Firebase Firestore?

easy

A. To host static website files

B. To run server-side scripts automatically

C. To send emails to users

D. To save personal information for each user securely

Solution

1. Step 1: Understand user profile data purpose

   User profile data holds personal details like name and email for each user.

2. Step 2: Identify Firebase Firestore role

   Firestore stores this data securely and allows easy access and updates.

3. Final Answer:

   To save personal information for each user securely -> Option D

4. Quick Check:

   User profile data = personal info storage [OK]

Hint: User profiles store personal info, not run scripts or host files [OK]

Common Mistakes:

• Confusing Firestore with hosting or email services
• Thinking Firestore runs backend code automatically
• Assuming user profiles are for sending emails

2. Which Firebase Firestore syntax correctly creates a document for a user profile with ID 'user123'?

easy

A. db.collection('users').doc('user123').set({name: 'Alice'})

B. db.users('user123').add({name: 'Alice'})

C. db.collection('users').add('user123', {name: 'Alice'})

D. db.doc('users/user123').create({name: 'Alice'})

Solution

1. Step 1: Review Firestore document creation syntax

   Use collection('name').doc('id').set(data) to create or overwrite a document.

2. Step 2: Match syntax with options

   db.collection('users').doc('user123').set({name: 'Alice'}) matches correct syntax: collection, doc, then set with data object.

3. Final Answer:

   db.collection('users').doc('user123').set({name: 'Alice'}) -> Option A

4. Quick Check:

   Correct Firestore doc creation = db.collection('users').doc('user123').set({name: 'Alice'}) [OK]

Hint: Use collection().doc().set() to create user profile docs [OK]

Common Mistakes:

• Using add() with document ID specified
• Wrong method names like create() instead of set()
• Incorrect chaining of methods

3. Given this code snippet, what will be the output if the user document does not exist?

const docRef = db.collection('users').doc('user999');
docRef.get().then(doc => {
  if (doc.exists) {
    console.log(doc.data().name);
  } else {
    console.log('No user found');
  }
});

medium

A. No user found

B. undefined

C. Error: Document not found

D. null

Solution

1. Step 1: Understand doc.exists property

   doc.exists is false if document does not exist in Firestore.

2. Step 2: Follow code logic for missing document

   If doc.exists is false, code logs 'No user found'.

3. Final Answer:

   No user found -> Option A

4. Quick Check:

   Missing doc triggers else block = 'No user found' [OK]

Hint: Check doc.exists before accessing data to avoid errors [OK]

Common Mistakes:

• Assuming doc.data() returns null or undefined
• Expecting an error instead of else block output
• Ignoring the else condition

4. Identify the error in this Firebase Firestore code to update a user's profile name:

db.collection('users').doc('user123').update({
  username: 'Bob'
});

medium

A. update() cannot be used to change existing fields

B. Missing await or then to handle promise

C. Field name should be 'name' not 'username'

D. Document ID 'user123' must be a number

Solution

1. Step 1: Check Firestore update method usage

   update() returns a promise and should be handled with await or then.

2. Step 2: Identify missing promise handling

   Code does not handle promise, which can cause silent failures.

3. Final Answer:

   Missing await or then to handle promise -> Option B

4. Quick Check:

   Firestore update returns promise, must handle it [OK]

Hint: Always handle promises with await or then in Firestore calls [OK]

Common Mistakes:

• Thinking update() cannot change fields
• Assuming field names must be fixed
• Believing document IDs must be numeric

5. You want to store user profiles with optional phone numbers. Which Firestore data structure best handles missing phone numbers without errors?

hard

A. Set phone number field to empty string if missing

B. Always set phone number field to null

C. Include phone number field only if user provides it

D. Create a separate collection for phone numbers

Solution

1. Step 1: Understand optional fields in Firestore

   Firestore allows documents to omit fields that are not provided.

2. Step 2: Choose best practice for optional data

   Including the phone number field only when available avoids storing empty or null values and reduces confusion.

3. Final Answer:

   Include phone number field only if user provides it -> Option C

4. Quick Check:

   Omit optional fields if missing to keep data clean [OK]

Hint: Omit optional fields instead of storing empty or null values [OK]

Common Mistakes:

• Storing empty strings which can confuse queries
• Using null values that may cause unexpected behavior
• Overcomplicating with separate collections for simple optional data