Why social login improves conversion in Firebase - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase Authentication with Google as a social login provider.

Firebase

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

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

AGoogleAuthProvider

BTwitterAuthProvider

CFacebookAuthProvider

DGithubAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a provider unrelated to Google.

GoogleAuthProvider is used to enable Google social login in Firebase Authentication.

2fill in blank

medium

Complete the code to trigger the social login popup using Firebase Authentication.

Firebase

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

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

APopup

BCredential

CEmailLink

DRedirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect which reloads the page.

signInWithPopup opens a popup window for social login, improving user experience and conversion.

3fill in blank

hard

Fix the error in the code to correctly handle the social login result.

Firebase

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

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

Acredential

Bprofile

Cuser

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Accessing result.credential instead of result.user.

The user object is accessed via result.user to get user details like email.

4fill in blank

hard

Fill both blanks to create a function that triggers Google social login and handles errors.

Firebase

function socialLogin() {
  firebase.auth().signInWith[1](provider).catch(error => {
    console.error('Login failed:', error.[2]);
  });
}

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

APopup

BRedirect

Cmessage

Dcode

Attempts:

3 left

💡 Hint

Common Mistakes

Using Redirect method or accessing error.code instead of error.message.

signInWithPopup triggers the login popup, and error.message provides the error description.

5fill in blank

hard

Fill all three blanks to create a Firebase config object with API key, authDomain, and projectId.

Firebase

const firebaseConfig = {
  apiKey: '[1]',
  authDomain: '[2]',
  projectId: '[3]'
};

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

AAIzaSyExampleKey1234567890

Byour-app.firebaseapp.com

Cyour-app-project-id

Drandom-string

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or placeholder values that don't match Firebase project settings.

These three fields are essential for Firebase initialization: apiKey, authDomain, and projectId.