JWT integration in GraphQL - Step-by-Step Execution

Concept Flow - JWT integration

Client sends login request

↓

Server verifies credentials

↓

Server creates JWT token

↓

Server sends JWT to client

↓

Client stores JWT

↓

Client sends requests with JWT in header

↓

Server verifies JWT on each request

↓

If valid, server processes request

↓

If invalid, server rejects request

The flow shows how a client logs in, receives a JWT token, and uses it to authenticate future requests, with the server verifying the token each time.

Execution Sample

GraphQL

mutation Login($username: String!, $password: String!) {
  login(username: $username, password: $password) {
    token
  }
}

query GetUserData {
  userData {
    id
    name
  }
}

This GraphQL mutation logs in a user and receives a JWT token; the query fetches user data using the token for authentication.

Execution Table

Step	Action	Input/Condition	Result/Output
1	Client sends login mutation	username='alice', password='secret'	Request sent to server
2	Server verifies credentials	Check username and password	Credentials valid
3	Server creates JWT token	User info encoded in token	JWT token generated
4	Server sends JWT token	Token included in response	Client receives token
5	Client stores JWT token	Token saved locally	Token ready for use
6	Client sends query with JWT in header	Authorization: Bearer <token>	Request sent to server
7	Server verifies JWT token	Check token signature and expiry	Token valid
8	Server processes query	User authenticated	User data returned
9	Client receives user data	Data includes id and name	Data displayed to user
10	Client sends query with expired/invalid token	Authorization: Bearer <bad_token>	Request sent to server
11	Server verifies JWT token	Token invalid or expired	Authentication error returned
12	Client receives error	Unauthorized access	User prompted to login again

💡 Execution stops when client receives data or error response from server.

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 7	After Step 11
JWT Token	null	generated_token_string	stored_token_string	verified_token_string	invalid_or_expired_token

Key Moments - 3 Insights

Why does the server create a JWT token after verifying credentials?

After verifying credentials (see Step 2 in execution_table), the server creates a JWT token (Step 3) to securely represent the user's identity for future requests without needing to re-check credentials.

What happens if the client sends a request with an expired or invalid JWT token?

As shown in Steps 10-12, the server checks the token (Step 11), finds it invalid or expired, and returns an authentication error, prompting the client to log in again.

How does the client use the JWT token after receiving it?

The client stores the token locally (Step 5) and includes it in the Authorization header of future requests (Step 6) so the server can verify and authenticate the user.

Visual Quiz - 3 Questions

Look at the execution_table, what is the server's action at Step 3?

A Send user data

B Verify user credentials

C Create JWT token

D Store token on client

💡 Hint

Refer to Step 3 in the execution_table where the server creates the JWT token.

At which step does the client include the JWT token in the request header?

A Step 4

B Step 6

C Step 5

D Step 7

💡 Hint

Check Step 6 in the execution_table where the client sends the query with the JWT token.

If the token is invalid, what is the server's response step number?

A Step 11

B Step 9

C Step 8

D Step 12

💡 Hint

Look at Step 11 where the server verifies the token and finds it invalid.

Concept Snapshot

JWT Integration Quick Reference:
- Client logs in via GraphQL mutation.
- Server verifies credentials and creates JWT token.
- Token sent to client and stored locally.
- Client sends JWT in Authorization header for future queries.
- Server verifies JWT on each request to authenticate user.
- Invalid or expired tokens cause authentication errors.

Full Transcript

This visual execution trace shows how JWT integration works in a GraphQL context. The client sends a login mutation with username and password. The server verifies these credentials and, if valid, creates a JWT token encoding user information. The token is sent back to the client, which stores it locally. For subsequent queries, the client includes the JWT token in the Authorization header. The server verifies the token's validity on each request. If the token is valid, the server processes the query and returns user data. If the token is invalid or expired, the server returns an authentication error, prompting the client to log in again. This flow ensures secure, stateless authentication for GraphQL APIs.

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