JWT authentication flow in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens after a user logs in successfully in a JWT flow?

In a typical JWT authentication flow using Astro, what is the immediate next step after the server verifies the user's credentials?

A The server immediately logs the user out.

B The server generates a JWT token and sends it back to the client to store.

C The server deletes all cookies related to the session.

D The server redirects the user to the login page again.

💡 Hint

Think about what the server needs to provide so the client can prove its identity in future requests.

After verifying credentials, the server creates a JWT token that the client stores. This token is used to authenticate future requests without needing to log in again.

❓ state_output

intermediate

What is the output of this Astro server code snippet handling JWT?

Given this Astro server code snippet that verifies a JWT token, what will be the value of user if the token is invalid?

Astro

import jwt from 'jsonwebtoken';

const token = request.headers.get('Authorization')?.split(' ')[1];
let user;
try {
  user = jwt.verify(token, 'secretKey');
} catch {
  user = null;
}
return user;

A Throws a ReferenceError

B An object with user data

C Undefined

D null

💡 Hint

What happens when jwt.verify fails inside a try-catch?

If the token is invalid, jwt.verify throws an error caught by the catch block, setting user to null.

📝 Syntax

advanced

Which option correctly sets a JWT token in an HTTP-only cookie in Astro?

Choose the correct code snippet that sets a JWT token as an HTTP-only cookie in an Astro server response.

A return new Response(null, { headers: { 'Set-Cookie': `token=${jwt}; Secure; HttpOnly; Path=/; Max-Age=3600` } });

B return new Response(null, { headers: { 'Set-Cookie': `token=${jwt}; HttpOnly; Path=/; Max-Age=3600` } });

C return new Response(null, { headers: { 'Cookie': `token=${jwt}; HttpOnly; Path=/; Max-Age=3600` } });

D return new Response(null, { headers: { 'Set-Cookie': `token=${jwt}; HttpOnly; Path=/` } });

💡 Hint

Remember to include security flags for cookies that hold sensitive tokens.

Option A correctly sets the cookie with Secure and HttpOnly flags, path, and expiration time, which is best practice for JWT cookies.

🔧 Debug

advanced

Why does this Astro JWT verification code always throw an error?

Review this Astro server code snippet that tries to verify a JWT token but always throws an error. What is the cause?

Astro

import jwt from 'jsonwebtoken';

const token = request.headers.get('Authorization');
const user = jwt.verify(token, 'secretKey');
return user;

A The secret key is incorrect.

B The jwt.verify method is asynchronous and needs await.

C The token includes the 'Bearer ' prefix and is not stripped before verification.

D The request.headers.get method returns undefined.

💡 Hint

Check the format of the token string passed to jwt.verify.

The token string includes the 'Bearer ' prefix, so jwt.verify receives an invalid token format causing an error. The prefix must be removed before verification.

🧠 Conceptual

expert

What is the main security risk if JWT tokens are stored in localStorage in Astro apps?

Consider an Astro app that stores JWT tokens in localStorage. What is the biggest security risk of this approach?

A Tokens in localStorage can be accessed by any JavaScript code, making them vulnerable to cross-site scripting (XSS) attacks.

B Tokens in localStorage expire too quickly causing frequent logouts.

C Tokens in localStorage are automatically sent with every HTTP request, exposing them to man-in-the-middle attacks.

D Tokens in localStorage cannot be refreshed without reloading the page.

💡 Hint

Think about what malicious scripts can do if they run on your page.

Storing JWT tokens in localStorage exposes them to theft by malicious scripts injected via XSS attacks, since localStorage is accessible by JavaScript.

Practice

1. What is the main purpose of a JWT (JSON Web Token) in authentication?

easy

A. To securely transmit user identity and permissions between client and server

B. To store user passwords on the client side

C. To encrypt all user data in the database

D. To replace cookies for storing session data only

Solution

1. Step 1: Understand JWT role in authentication

   JWTs carry encoded user identity and permissions safely between client and server.

2. Step 2: Compare options with JWT purpose

   Only To securely transmit user identity and permissions between client and server correctly describes JWT's role; others confuse JWT with password storage or encryption.

3. Final Answer:

   To securely transmit user identity and permissions between client and server -> Option A

4. Quick Check:

   JWT purpose = secure token for identity [OK]

Hint: JWTs carry user info safely between client and server [OK]

Common Mistakes:

• Thinking JWT stores passwords
• Confusing JWT with database encryption
• Assuming JWT replaces cookies entirely

2. Which of the following is the correct way to send a JWT token in an HTTP request header?

easy

A. Authorization: Bearer <token>

B. Token: JWT <token>

C. Auth-Token: <token>

D. JWT-Authorization: Bearer <token>

Solution

1. Step 1: Recall standard JWT header format

   The standard way to send JWT is in the Authorization header with 'Bearer' prefix.

2. Step 2: Match options to standard

   Only Authorization: Bearer <token> matches the correct syntax: 'Authorization: Bearer <token>'. Others use incorrect header names or formats.

3. Final Answer:

   Authorization: Bearer <token> -> Option A

4. Quick Check:

   JWT header = Authorization: Bearer token [OK]

Hint: JWTs go in 'Authorization: Bearer <token>' header [OK]

Common Mistakes:

• Using wrong header names like 'Token' or 'Auth-Token'
• Omitting 'Bearer' prefix
• Adding extra words like 'JWT' before token

3. Given this Astro server code snippet handling JWT verification, what will be the output if the token is invalid?

import jwt from 'jsonwebtoken';

export async function get({ request }) {
  const authHeader = request.headers.get('Authorization');
  if (!authHeader) return new Response('No token', { status: 401 });

  const token = authHeader.split(' ')[1];
  try {
    const user = jwt.verify(token, 'secretkey');
    return new Response(`User: ${user.name}`, { status: 200 });
  } catch {
    return new Response('Invalid token', { status: 403 });
  }
}

medium

A. Response with status 200 and user name

B. Response with status 401 and message 'No token'

C. Response with status 403 and message 'Invalid token'

D. Response with status 500 and server error message

Solution

1. Step 1: Analyze token verification flow

   If token is invalid, jwt.verify throws an error caught by catch block.

2. Step 2: Check catch block response

   The catch block returns status 403 with message 'Invalid token'.

3. Final Answer:

   Response with status 403 and message 'Invalid token' -> Option C

4. Quick Check:

   Invalid token triggers 403 response [OK]

Hint: Invalid JWT triggers catch block with 403 response [OK]

Common Mistakes:

• Assuming invalid token returns 401
• Confusing catch block with success path
• Expecting server error instead of 403

4. Identify the bug in this Astro JWT authentication snippet:

export async function get({ request }) {
  const authHeader = request.headers.get('Authorization');
  if (!authHeader) return new Response('No token', { status: 401 });

  const token = authHeader.split(' ')[0];
  try {
    const user = jwt.verify(token, 'secretkey');
    return new Response(`User: ${user.name}`, { status: 200 });
  } catch {
    return new Response('Invalid token', { status: 403 });
  }
}

medium

A. Missing secret key in jwt.verify call

B. Token extraction uses wrong index from split

C. No check for missing Authorization header

D. Response status codes are reversed

Solution

1. Step 1: Check how token is extracted

   Token is extracted using authHeader.split(' ')[0], which gets 'Bearer' instead of the token.

2. Step 2: Identify correct token index

   The token is at index 1 after splitting by space, so index 0 is wrong.

3. Final Answer:

   Token extraction uses wrong index from split -> Option B

4. Quick Check:

   Token index must be 1, not 0 [OK]

Hint: Token is after 'Bearer', so use split index 1 [OK]

Common Mistakes:

• Using split index 0 instead of 1
• Forgetting to check Authorization header
• Mixing up status codes 401 and 403

5. You want to implement a refresh token flow in Astro using JWT. Which approach correctly handles token expiration and refresh securely?

hard

A. Send access token only once at login and never refresh it; rely on long expiration time

B. Store both access and refresh tokens in localStorage and refresh access token automatically on every request

C. Store refresh token in localStorage and access token in URL query parameters for easy access

D. Store access token in memory and refresh token in HttpOnly cookie; use refresh token to get new access token when expired

Solution

1. Step 1: Understand secure token storage

   Access tokens should be stored in memory to reduce exposure; refresh tokens in HttpOnly cookies to prevent JavaScript access.

2. Step 2: Use refresh token to get new access token

   When access token expires, client uses refresh token securely to request a new access token.

3. Final Answer:

   Store access token in memory and refresh token in HttpOnly cookie; use refresh token to get new access token when expired -> Option D

4. Quick Check:

   Secure refresh flow = memory + HttpOnly cookie [OK]

Hint: Keep refresh token HttpOnly, access token in memory [OK]

Common Mistakes:

• Storing tokens in localStorage (XSS risk)
• Never refreshing tokens (causes logout)
• Putting tokens in URL (exposes tokens)