Why authentication matters in Express - Performance Evidence

Performance: Why authentication matters

MEDIUM IMPACT

Authentication affects initial page load speed and interaction responsiveness by adding server-side checks and potential redirects.

Protecting routes with authentication in an Express app

Express

app.use(async (req, res, next) => {
  try {
    const user = await asyncAuthCheck(req.headers.authorization);
    if (!user) {
      return res.status(401).send('Unauthorized');
    }
    next();
  } catch (err) {
    next(err);
  }
});

Using asynchronous authentication avoids blocking the event loop, allowing other requests to proceed.

📈 Performance GainNon-blocking authentication reduces INP delays and improves server responsiveness.

Protecting routes with authentication in an Express app

Express

app.use((req, res, next) => {
  // Synchronous heavy authentication check
  const user = heavyAuthCheck(req.headers.authorization);
  if (!user) {
    return res.status(401).send('Unauthorized');
  } else {
    next();
  }
});

Synchronous heavy authentication blocks the event loop, delaying all requests and responses.

📉 Performance CostBlocks rendering for 100+ ms per request, increasing INP and slowing user interactions.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous blocking auth	N/A (server-side)	N/A	Delays initial paint	[X] Bad
Asynchronous non-blocking auth	N/A (server-side)	N/A	Faster initial paint	[OK] Good

Rendering Pipeline

Authentication runs on the server before sending content, affecting when the browser receives the page and can start rendering.

→Server Processing

→Network Transfer

→First Contentful Paint

⚠️ BottleneckServer Processing due to blocking or slow authentication checks

Core Web Vital Affected

INP

Authentication affects initial page load speed and interaction responsiveness by adding server-side checks and potential redirects.

Optimization Tips

1Avoid synchronous blocking authentication in Express middleware.

2Use asynchronous authentication to keep the server responsive.

3Cache authentication tokens to reduce repeated checks and speed up responses.

Performance Quiz - 3 Questions

How does synchronous authentication affect Express server performance?

A It reduces network latency.

B It blocks the event loop, delaying all requests.

C It speeds up response by running immediately.

D It improves browser rendering speed.

DevTools: Network

How to check: Open DevTools > Network tab, reload the page, and check the time to first byte (TTFB) and response times for authenticated routes.

What to look for: Long TTFB or delayed responses indicate slow authentication impacting page load and interaction.

Practice

1. Why is authentication important in an Express app?

easy

A. It speeds up the app's performance.

B. It confirms the user's identity to protect data and features.

C. It changes the app's color scheme.

D. It automatically fixes bugs in the code.

Solution

1. Step 1: Understand the purpose of authentication

   Authentication is used to confirm who a user is before allowing access.

2. Step 2: Connect authentication to app protection

   By confirming identity, the app protects sensitive data and features from unauthorized users.

3. Final Answer:

   It confirms the user's identity to protect data and features. -> Option B

4. Quick Check:

   Authentication = Confirm identity [OK]

Hint: Authentication means checking who the user is [OK]

Common Mistakes:

• Thinking authentication improves speed
• Confusing authentication with UI changes
• Believing it fixes code bugs automatically

2. Which Express code snippet correctly checks if a user is authenticated before accessing a route?

easy

A. app.get('/dashboard', (req, res) => { if(req.user) { res.redirect('/login'); } else { res.send('Welcome'); } });

B. app.get('/dashboard', (req, res) => { res.send('Welcome'); });

C. app.get('/dashboard', (req, res) => { if(req.isAuthenticated()) { res.send('Welcome'); } else { res.redirect('/login'); } });

D. app.get('/dashboard', (req, res) => { res.redirect('/logout'); });

Solution

1. Step 1: Identify authentication check method

   The method req.isAuthenticated() is commonly used to check if a user is logged in.

2. Step 2: Verify correct route behavior

   If authenticated, the user sees 'Welcome'; otherwise, they are redirected to login.

3. Final Answer:

   app.get('/dashboard', (req, res) => { if(req.isAuthenticated()) { res.send('Welcome'); } else { res.redirect('/login'); } }); -> Option C

4. Quick Check:

   Use req.isAuthenticated() to protect routes [OK]

Hint: Look for req.isAuthenticated() to check login [OK]

Common Mistakes:

• Not checking authentication before sending response
• Redirecting authenticated users to login
• Redirecting users to logout instead of login

3. What will be the output when an unauthenticated user tries to access this Express route?

app.get('/profile', (req, res) => {
  if (!req.isAuthenticated()) {
    res.status(401).send('Access denied');
  } else {
    res.send('User profile');
  }
});

medium

A. Access denied

B. Redirect to /login

C. 404 Not Found

D. User profile

Solution

1. Step 1: Check authentication condition

   The code sends 'Access denied' with status 401 if req.isAuthenticated() is false.

2. Step 2: Determine output for unauthenticated user

   Since the user is unauthenticated, the condition is true and 'Access denied' is sent.

3. Final Answer:

   Access denied -> Option A

4. Quick Check:

   Unauthenticated user gets 'Access denied' [OK]

Hint: Check if condition sends 'Access denied' for unauthenticated [OK]

Common Mistakes:

• Assuming unauthenticated users see profile
• Expecting a redirect instead of 401 status
• Confusing 404 with access denial

4. Identify the error in this Express authentication middleware:

function auth(req, res, next) {
  if (req.isAuthenticated) {
    next();
  } else {
    res.redirect('/login');
  }
}

medium

A. res.redirect should be res.sendRedirect

B. next() should be res.next()

C. Middleware should return a value

D. Missing parentheses in req.isAuthenticated call

Solution

1. Step 1: Check how req.isAuthenticated is used

   The code uses req.isAuthenticated without parentheses, treating it as a property.

2. Step 2: Correct usage of req.isAuthenticated()

   It is a function and must be called with parentheses: req.isAuthenticated().

3. Final Answer:

   Missing parentheses in req.isAuthenticated call -> Option D

4. Quick Check:

   Call req.isAuthenticated() as a function [OK]

Hint: Remember req.isAuthenticated() needs () to call [OK]

Common Mistakes:

• Using req.isAuthenticated without ()
• Confusing next() with res.next()
• Using wrong redirect method name

5. You want to protect multiple routes in your Express app so only authenticated users can access them. Which approach best applies authentication efficiently?

hard

A. Create an authentication middleware and apply it to all protected routes.

B. Add the authentication check inside each route handler separately.

C. Check authentication only on the homepage route.

D. Use client-side JavaScript to hide protected routes.

Solution

1. Step 1: Understand route protection needs

   Multiple routes require the same authentication check to avoid repeating code.

2. Step 2: Use middleware for efficient authentication

   Middleware can be applied to many routes at once, centralizing the check and improving maintainability.

3. Final Answer:

   Create an authentication middleware and apply it to all protected routes. -> Option A

4. Quick Check:

   Middleware centralizes authentication checks [OK]

Hint: Use middleware to protect many routes at once [OK]

Common Mistakes:

• Repeating authentication code in every route
• Checking only homepage leaves others unprotected
• Relying on client-side hiding for security