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.

Practice

1. What is the main purpose of using JWT in GraphQL database integration?

easy

A. To store large amounts of data

B. To speed up database queries

C. To verify the user's identity and secure database access

D. To format the GraphQL schema

Solution

1. Step 1: Understand JWT role in security

   JWT (JSON Web Token) is used to confirm who the user is by verifying their identity.

2. Step 2: Connect JWT to database access

   This verification controls who can access or change data in the GraphQL database.

3. Final Answer:

   To verify the user's identity and secure database access -> Option C

4. Quick Check:

   JWT secures access [OK]

Hint: JWT = user identity check for secure access [OK]

Common Mistakes:

• Thinking JWT speeds up queries
• Confusing JWT with data storage
• Assuming JWT changes schema format

2. Which is the correct way to send a JWT token in a GraphQL request header?

easy

A. Token: Authorization <token>

B. Authorization: Token <token>

C. Auth: Bearer <token>

D. Authorization: Bearer <token>

Solution

1. Step 1: Recall standard JWT header format

   The JWT token is sent in the HTTP header named 'Authorization' with the prefix 'Bearer'.

2. Step 2: Match the correct header syntax

   The correct syntax is 'Authorization: Bearer <token>'. Other options use wrong header names or order.

3. Final Answer:

   Authorization: Bearer <token> -> Option D

4. Quick Check:

   JWT header uses Bearer prefix [OK]

Hint: JWT always uses 'Authorization: Bearer <token>' header [OK]

Common Mistakes:

• Using 'Token' instead of 'Bearer'
• Wrong header name like 'Auth'
• Mixing order of 'Token' and 'Authorization'

3. Given this GraphQL resolver snippet using JWT:

const user = verifyToken(context.headers.authorization);
if (!user) return null;
return db.getUserData(user.id);

What happens if the token is invalid or missing?

medium

A. The resolver returns null and no data is fetched

B. The resolver throws a syntax error

C. The resolver returns all user data without restriction

D. The resolver crashes the server

Solution

1. Step 1: Analyze token verification

   The function verifyToken returns null or false if the token is invalid or missing.

2. Step 2: Check resolver behavior on invalid token

   If user is falsy, the resolver returns null, meaning no data is sent back.

3. Final Answer:

   The resolver returns null and no data is fetched -> Option A

4. Quick Check:

   Invalid token leads to null return [OK]

Hint: Invalid token means no user, so resolver returns null [OK]

Common Mistakes:

• Expecting a syntax error on invalid token
• Assuming data is returned without user
• Thinking server crashes on bad token

4. Identify the error in this JWT integration snippet:

const token = context.headers.Authorization;
const user = verifyToken(token);
if (!user) throw new Error('Unauthorized');
return db.getUserData(user.id);

medium

A. verifyToken should be called with context.token, not token

B. Header name should be lowercase 'authorization', not 'Authorization'

C. The error message should be 'Forbidden' instead of 'Unauthorized'

D. db.getUserData should be called before verifying the token

Solution

1. Step 1: Check header name case sensitivity

   HTTP headers in Node.js are usually lowercase, so 'authorization' is correct, not 'Authorization'.

2. Step 2: Confirm token extraction correctness

   Using 'Authorization' may cause token to be undefined, leading to verification failure.

3. Final Answer:

   Header name should be lowercase 'authorization', not 'Authorization' -> Option B

4. Quick Check:

   Header keys are lowercase [OK]

Hint: Use lowercase 'authorization' header key in code [OK]

Common Mistakes:

• Using uppercase header keys in Node.js
• Calling db before verifying user
• Confusing error message types

5. You want to restrict a GraphQL query so only users with role 'admin' can access sensitive data. Which JWT integration approach is best?

hard

A. Verify token, then check if user.role === 'admin' before returning data

B. Return data first, then verify token asynchronously

C. Skip token verification and rely on frontend checks

D. Verify token but ignore user roles for simplicity

Solution

1. Step 1: Understand role-based access control

   To restrict access, verify the token and check the user's role before sending data.

2. Step 2: Evaluate options for security

   Returning data before verification or skipping roles risks exposing sensitive info.

3. Final Answer:

   Verify token, then check if user.role === 'admin' before returning data -> Option A

4. Quick Check:

   Check role after token verification [OK]

Hint: Check user role after verifying JWT token [OK]

Common Mistakes:

• Sending data before verifying user
• Ignoring roles in backend checks
• Trusting frontend for security