JWT integration in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extract the JWT token from the Authorization header.

GraphQL

const token = context.req.headers.authorization?.[1](' ')[1];

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

Ajoin

Bsplit

Creplace

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Using join instead of split causes errors because join combines strings.

Using replace or slice does not correctly isolate the token.

The Authorization header usually contains the token prefixed by 'Bearer '. Using split(' ') splits the string into parts, and the token is the second part.

2fill in blank

medium

Complete the code to verify the JWT token using the secret key.

GraphQL

const decoded = jwt.[1](token, process.env.JWT_SECRET);

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

Averify

Bsign

Cdecode

Dencrypt

Attempts:

3 left

💡 Hint

Common Mistakes

Using sign instead of verify creates a new token instead of checking one.

Using decode does not verify the token's signature.

The verify method checks the token's validity and decodes it using the secret key.

3fill in blank

hard

Fix the error in the code to handle missing or invalid JWT tokens gracefully.

GraphQL

if (!token) throw new Error('[1]');

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

AToken is valid

BUser authenticated

CToken verified

DNo token provided

Attempts:

3 left

💡 Hint

Common Mistakes

Using messages that imply success when the token is missing.

Using vague error messages that don't help identify the problem.

If the token is missing, the error message should clearly say 'No token provided' to help debugging.

4fill in blank

hard

Fill both blanks to create a GraphQL context function that extracts and verifies the JWT token.

GraphQL

const context = ({ req }) => {
  const token = req.headers.authorization?.[1](' ')[1];
  const user = jwt.[2](token, process.env.JWT_SECRET);
  return { user };
};

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

Asplit

Bsign

Cverify

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Using sign instead of verify for token validation.

Using slice instead of split to extract the token.

First, split the Authorization header to get the token. Then verify the token with the secret key to get the user info.

5fill in blank

hard

Fill all three blanks to create a resolver that checks user authentication using JWT.

GraphQL

const resolver = async (parent, args, context) => {
  if (!context.[1]) {
    throw new Error('[2]');
  }
  return await getUserData(context.[3].id);
};

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

Auser

BAuthentication required

Dtoken

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for 'token' instead of 'user' in context.

Using wrong error messages that confuse the user.

The resolver checks if context.user exists. If not, it throws an error saying 'Authentication required'. Then it uses context.user.id to get user data.