GitHub sign-in in Firebase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize GitHub sign-in provider.

Firebase

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

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

AGitHubAuthProvider

BFacebookAuthProvider

CGoogleAuthProvider

DTwitterAuthProvider

Attempts:

3 left

💡 Hint

Common Mistakes

Using GoogleAuthProvider instead of GitHubAuthProvider

Misspelling the provider name

The GitHubAuthProvider is used to enable GitHub sign-in in Firebase.

2fill in blank

medium

Complete the code to sign in with a popup using the GitHub provider.

Firebase

firebase.auth().signInWith[1](provider).then(result => {
  // handle result
});

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

AEmailAndPassword

BRedirect

CPopup

DCredential

Attempts:

3 left

💡 Hint

Common Mistakes

Using signInWithRedirect instead of signInWithPopup

Using incorrect method names

The method signInWithPopup opens a popup window for GitHub sign-in.

3fill in blank

hard

Fix the error in the code to get the GitHub access token from the sign-in result.

Firebase

const credential = [1].credentialFromResult(result);
const token = credential.accessToken;

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

Afirebase.auth.GitHubAuthProvider

Bfirebase

Cfirebase.auth

Dauth

Attempts:

3 left

💡 Hint

Common Mistakes

Calling credentialFromResult on result.auth

Using incorrect namespaces

The correct way to get the credential is using firebase.auth.GitHubAuthProvider.credentialFromResult(result).

4fill in blank

hard

Fill both blanks to request additional GitHub scopes and handle sign-in errors.

Firebase

provider.[1]('repo');
firebase.auth().signInWithPopup(provider).catch(error => {
  const errorCode = error.[2];
  // handle error
});

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

AaddScope

Bcode

Cmessage

DerrorCode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'errorCode' or 'message' instead of 'code'

Using 'addScopes' instead of 'addScope'

Use addScope to request GitHub scopes. The error code is accessed via error.code.

5fill in blank

hard

Fill all three blanks to create a user object from the GitHub sign-in result.

Firebase

const user = {
  id: result.user.[1],
  name: result.user.[2],
  email: result.user.[3]
};

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

Auid

BdisplayName

Cemail

DphotoURL

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'uid'

Using 'name' instead of 'displayName'

The user object properties are uid for ID, displayName for name, and email for email address.