Linking multiple providers in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase with the correct configuration object.

Firebase

const app = initializeApp([1]);

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

Asettings

BconfigObject

CfirebaseConfig

DappConfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not hold the Firebase config object.

Passing an empty object or undefined.

The initializeApp function requires the Firebase configuration object, which is usually named firebaseConfig.

2fill in blank

medium

Complete the code to link a Google provider to the current Firebase user.

Firebase

const provider = new GoogleAuthProvider();
const result = await linkWithPopup(auth.currentUser, [1]);

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

Aprovider

BtwitterProvider

CfacebookProvider

DgithubProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a different provider variable that is not initialized.

Passing the provider class instead of an instance.

The linkWithPopup function requires the provider instance you want to link. Here, it is provider which is a GoogleAuthProvider instance.

3fill in blank

hard

Fix the error in the code to link a Facebook provider using a popup.

Firebase

const facebookProvider = new FacebookAuthProvider();
const user = auth.currentUser;
const linkedUser = await linkWithPopup([1], facebookProvider);

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

Auser

Bauth

Cauth.currentUser.uid

DfacebookProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the auth object instead of the user.

Passing the user ID string instead of the user object.

The first argument to linkWithPopup must be the current user object, which is stored in user. Passing auth or other values causes errors.

4fill in blank

hard

Fill both blanks to link Twitter and GitHub providers to the current user.

Firebase

const twitterProvider = new TwitterAuthProvider();
const githubProvider = new GithubAuthProvider();
await linkWithPopup(auth.currentUser, [1]);
await linkWithPopup(auth.currentUser, [2]);

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

AtwitterProvider

BgithubProvider

CfacebookProvider

DgoogleProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up provider variables.

Using providers not initialized in the code.

To link multiple providers, you call linkWithPopup with the current user and the provider instance. Here, the first call links twitterProvider, the second links githubProvider.

5fill in blank

hard

Fill all three blanks to handle linking Google, Facebook, and Twitter providers with error handling.

Firebase

try {
  await linkWithPopup(auth.currentUser, [1]);
  await linkWithPopup(auth.currentUser, [2]);
  await linkWithPopup(auth.currentUser, [3]);
} catch (error) {
  console.error('Error linking provider:', error);
}

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

AgoogleProvider

BfacebookProvider

CtwitterProvider

DgithubProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong provider names.

Not wrapping calls in try-catch for error handling.

This code tries to link three providers: Google, Facebook, and Twitter. Each linkWithPopup call uses the current user and one provider instance. Errors are caught and logged.