Authentication providers overview in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Authentication.

Firebase

const auth = [1](app);

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

AgetAuth

BsignIn

CinitializeApp

DcreateUser

Attempts:

3 left

💡 Hint

Common Mistakes

Using initializeApp instead of getAuth

Trying to call signIn or createUser directly here

The getAuth() method initializes the Firebase Authentication service.

2fill in blank

medium

Complete the code to enable Google sign-in provider.

Firebase

const provider = new [1]();

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

AGoogleAuthProvider

BFacebookAuthProvider

CTwitterAuthProvider

DEmailAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing FacebookAuthProvider or TwitterAuthProvider by mistake

Using EmailAuthProvider which is for email/password sign-in

The GoogleAuthProvider class is used to enable Google sign-in.

3fill in blank

hard

Fix the error in the code to sign in with a popup using Google provider.

Firebase

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

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

AsignInWithRedirect

BsignInWithPopup

CsignOut

DcreateUserWithEmailAndPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect instead of signInWithPopup

Using signOut or createUserWithEmailAndPassword incorrectly

signInWithPopup is the correct method to sign in using a popup window.

4fill in blank

hard

Fill both blanks to configure Facebook authentication and sign in with redirect.

Firebase

const fbProvider = new [1]();
auth.[2](fbProvider);

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

AFacebookAuthProvider

BsignInWithPopup

CsignInWithRedirect

DGoogleAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using GoogleAuthProvider instead of FacebookAuthProvider

Using signInWithPopup instead of signInWithRedirect

FacebookAuthProvider creates the Facebook provider instance, and signInWithRedirect starts sign-in with redirect.

5fill in blank

hard

Fill all three blanks to create an email/password user and handle errors.

Firebase

auth.[1](email, password)
  .then(userCredential => {
    console.log(userCredential.user);
  })
  .catch(error => {
    console.error(error.[2]);
  });

const email = '[3]';

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

AcreateUserWithEmailAndPassword

Bmessage

[e-mail]

DsignInWithEmailAndPassword

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithEmailAndPassword instead of createUserWithEmailAndPassword

Accessing error.code instead of error.message

Leaving email blank or invalid

createUserWithEmailAndPassword creates a new user. The error object has a message property. The email is a sample string.