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.