Refresh token concept in Express - Performance & Optimization

Performance: Refresh token concept

MEDIUM IMPACT

This concept affects the responsiveness and load on the server and client by managing authentication token renewal without frequent full logins.

Managing user authentication token renewal

Express

app.post('/refresh-token', (req, res) => {
  const refreshToken = req.body.refreshToken;
  if (!refreshToken || !isValidRefreshToken(refreshToken)) {
    return res.status(403).send('Forbidden');
  }
  const newAccessToken = generateAccessToken(refreshToken.user);
  res.json({ accessToken: newAccessToken });
});

Refresh tokens allow silent renewal of access tokens, reducing full login requests and improving interaction speed.

📈 Performance GainReduces server authentication load and improves INP by avoiding frequent full login delays.

Managing user authentication token renewal

Express

app.get('/data', (req, res) => {
  const token = req.headers.authorization;
  if (!token || !isValid(token)) {
    return res.status(401).send('Unauthorized');
  }
  // No refresh token, user must login again frequently
  fetchData().then(data => res.json(data));
});

No refresh token means users must re-login often, causing more full authentication requests and slower user interactions.

📉 Performance CostIncreases server load and delays user interaction responsiveness (higher INP).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No refresh token, frequent full login	Minimal	0	0	[X] Bad
Using refresh token for silent renewal	Minimal	0	0	[OK] Good

Rendering Pipeline

Refresh token usage mainly affects network requests and server response times, indirectly improving client interaction rendering by reducing authentication delays.

→Network

→JavaScript Execution

→Interaction Responsiveness

⚠️ BottleneckNetwork latency and server processing during token validation and renewal

Core Web Vital Affected

INP

This concept affects the responsiveness and load on the server and client by managing authentication token renewal without frequent full logins.

Optimization Tips

1Use refresh tokens to reduce full login frequency and improve interaction speed.

2Keep refresh token validation efficient to minimize server response time.

3Monitor network requests to authentication endpoints to ensure token renewal is optimized.

Performance Quiz - 3 Questions

How does using a refresh token improve web app performance?

A It causes more reflows in the browser rendering pipeline.

B It increases the size of each network request, slowing down the app.

C It reduces the number of full login requests, improving interaction responsiveness.

D It blocks the main thread during token validation.

DevTools: Network

How to check: Open DevTools, go to Network tab, filter requests by authentication endpoints, observe frequency and timing of full login vs refresh token requests.

What to look for: Look for fewer full login requests and faster token renewal responses indicating better performance.

Practice

1. What is the main purpose of a refresh token in an Express app using authentication?

easy

A. To encrypt the access token

B. To store user passwords securely

C. To log out the user automatically after a timeout

D. To get a new access token without asking the user to log in again

Solution

1. Step 1: Understand the role of refresh tokens

   Refresh tokens allow the app to request new access tokens without user interaction.

2. Step 2: Compare options with refresh token purpose

   Only To get a new access token without asking the user to log in again correctly describes this purpose; others describe unrelated functions.

3. Final Answer:

   To get a new access token without asking the user to log in again -> Option D

4. Quick Check:

   Refresh token purpose = get new access token without login [OK]

Hint: Refresh tokens renew access tokens silently [OK]

Common Mistakes:

• Confusing refresh token with access token
• Thinking refresh token stores passwords
• Assuming refresh token logs out users

2. Which of the following is the correct way to send a refresh token in an Express response header?

easy

A. res.setHeader('refresh-token', token);

B. res.sendRefreshToken(token);

C. res.refreshToken = token;

D. res.header('Authorization', token);

Solution

1. Step 1: Recall Express method to set headers

   Express uses res.setHeader(name, value) to set response headers.

2. Step 2: Match correct syntax for refresh token header

   res.setHeader('refresh-token', token); uses correct method and header name; others are invalid or use wrong header.

3. Final Answer:

   res.setHeader('refresh-token', token); -> Option A

4. Quick Check:

   Set header with res.setHeader(name, value) [OK]

Hint: Use res.setHeader to send custom headers [OK]

Common Mistakes:

• Using non-existent res.sendRefreshToken method
• Assigning token directly to res property
• Using wrong header like 'Authorization' for refresh token

3. Given this Express route snippet, what will be the output if the refresh token is valid?

app.post('/token', (req, res) => {
  const refreshToken = req.body.token;
  if (!refreshToken) return res.status(401).send('No token');
  if (refreshToken !== 'validtoken') return res.status(403).send('Invalid token');
  res.json({ accessToken: 'newAccessToken123' });
});

medium

A. Status 401 with message 'No token'

B. Status 403 with message 'Invalid token'

C. JSON response with new access token

D. Empty response with status 200

Solution

1. Step 1: Check token presence and validity

   If refreshToken is missing, returns 401; if invalid, returns 403.

2. Step 2: For valid token, send new access token JSON

   When token equals 'validtoken', response sends JSON with new access token.

3. Final Answer:

   JSON response with new access token -> Option C

4. Quick Check:

   Valid token returns new access token JSON [OK]

Hint: Valid token returns JSON with new access token [OK]

Common Mistakes:

• Confusing status codes for missing vs invalid token
• Expecting empty response instead of JSON
• Ignoring token validation logic

4. Identify the bug in this Express refresh token handler:

app.post('/refresh', (req, res) => {
  const token = req.body.refreshToken;
  if (!token) res.status(401).send('Missing token');
  if (token !== 'secret') res.status(403).send('Forbidden');
  res.json({ accessToken: 'newToken' });
});

medium

A. Missing return statements after res.status calls causing multiple responses

B. Incorrect property name for token in request body

C. Using res.json instead of res.send

D. No bug, code works fine

Solution

1. Step 1: Check response flow after status calls

   Without return, code continues after sending response, causing errors.

2. Step 2: Confirm need for return to stop execution

   Adding return after res.status(...).send(...) prevents multiple responses.

3. Final Answer:

   Missing return statements after res.status calls causing multiple responses -> Option A

4. Quick Check:

   Return after res.status to stop code [OK]

Hint: Always return after sending response to avoid errors [OK]

Common Mistakes:

• Not returning after res.status sends response
• Assuming res.json is wrong here
• Thinking property name is incorrect

5. You want to implement refresh token rotation in Express to improve security. Which approach correctly applies this concept?

hard

A. Keep the same refresh token forever to avoid user re-login

B. Issue a new refresh token on each use and invalidate the old one

C. Send refresh token only once during login and never again

D. Store refresh tokens in localStorage on the client side

Solution

1. Step 1: Understand refresh token rotation

   Rotation means issuing a new refresh token each time the old one is used and invalidating the old token.

2. Step 2: Evaluate options for security best practice

   Issue a new refresh token on each use and invalidate the old one matches rotation concept; others either reduce security or misuse storage.

3. Final Answer:

   Issue a new refresh token on each use and invalidate the old one -> Option B

4. Quick Check:

   Refresh token rotation = new token each use [OK]

Hint: Rotate refresh tokens by replacing old with new each use [OK]

Common Mistakes:

• Reusing same refresh token indefinitely
• Not invalidating old refresh tokens
• Storing tokens insecurely on client side