Auth state observer in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start observing authentication state changes.

Firebase

firebase.auth().onAuthStateChanged([1]);

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

Auser => console.log(user)

Bcallback

CsignIn

DauthState

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of a function.

Using a variable name that is not defined.

Forgetting to pass any argument.

The onAuthStateChanged method takes a callback function that runs when the auth state changes. Here, user => console.log(user) is a valid callback.

2fill in blank

medium

Complete the code to check if a user is signed in inside the observer.

Firebase

firebase.auth().onAuthStateChanged(user => {
  if ([1]) {
    console.log('User signed in');
  } else {
    console.log('No user signed in');
  }
});

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

Auser.exists

Buser

Cuser.isSignedIn

Duser === null

Attempts:

3 left

💡 Hint

Common Mistakes

Checking user.isSignedIn which does not exist.

Using user === null to check signed in (this checks opposite).

The user object is null if no user is signed in. Checking if (user) means the user is signed in.

3fill in blank

hard

Fix the error in the observer callback to correctly access the user's email.

Firebase

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    console.log('Email:', user[1]);
  }
});

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

A.email

B.email()

C.getEmail()

D.userEmail

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses like user.email() which causes an error.

Trying to call a method getEmail() which does not exist.

The user's email is accessed as a property user.email, not as a method.

4fill in blank

hard

Fill both blanks to unsubscribe the auth state observer correctly.

Firebase

const unsubscribe = firebase.auth().onAuthStateChanged([1]);

// Later when no longer needed
[2]();

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

Auser => console.log(user)

Bunsubscribe

Cunsubscribe()

Dfirebase.auth().signOut

Attempts:

3 left

💡 Hint

Common Mistakes

Calling unsubscribe() immediately instead of storing it.

Using firebase.auth().signOut which signs out user, not unsubscribes.

The onAuthStateChanged returns an unsubscribe function. Store it in a variable and call it later with parentheses to unsubscribe.

5fill in blank

hard

Fill all three blanks to log a message only when a user signs out.

Firebase

firebase.auth().onAuthStateChanged(user => {
  if (user [1] null) {
    console.log('User signed in');
  } else if (user [2] null) {
    console.log([3]);
  }
});

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

A!==

B===

C'User signed out'

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using != instead of !== which is less strict.

Logging wrong message on sign out.

Use !== null to check user signed in, === null to check signed out, and log the message string.