Middleware for authentication in Astro - Step-by-Step Execution

Concept Flow - Middleware for authentication

Incoming Request

↓

Middleware Triggered

↓

Check Authentication Token

↓

Allow Access

↓

Next Handler

The middleware intercepts each request, checks if the user is authenticated, and either allows access or redirects to login.

Execution Sample

Astro

export default async function middleware(context, next) {
  const token = context.cookies.get('authToken');
  if (!token) return Response.redirect('/login');
  return next();
}

This middleware checks for an auth token cookie; if missing, it redirects to login, else continues.

Execution Table

Step	Action	Token Present?	Branch Taken	Result
1	Request received	N/A	N/A	Middleware triggered
2	Check authToken cookie	Yes	Allow Access	Call next() to continue
3	Request proceeds to next handler	Yes	N/A	Request handled normally
4	Request received	N/A	N/A	Middleware triggered
5	Check authToken cookie	No	Redirect to Login	Return Response.redirect('/login')
6	Request ends	No	N/A	User redirected to login page

💡 Execution stops when request is either allowed to continue or redirected due to missing token.

Variable Tracker

Variable	Start	After Step 2 (Token Present)	After Step 5 (Token Missing)
token	undefined	'abc123token'	undefined

Key Moments - 2 Insights

Why does the middleware redirect instead of continuing when the token is missing?

Because in the execution_table at step 5, when token is missing, the middleware returns Response.redirect, which stops further request processing and sends user to login.

What happens if the token is present?

At step 2 in the execution_table, if token is present, middleware calls next(), allowing the request to continue to the next handler.

Visual Quiz - 3 Questions

Look at the execution_table, what is the result at step 2 when the token is present?

A Call next() to continue

B Call Response.redirect('/login')

C End request immediately

D Throw an error

💡 Hint

Check the 'Result' column in execution_table row for step 2.

At which step does the middleware decide to redirect the user to login?

A Step 3

B Step 5

C Step 1

D Step 6

💡 Hint

Look at the 'Branch Taken' column for the redirect action in execution_table.

If the token variable was always undefined, what would happen to the request flow?

A Request always continues normally

B Request throws an error

C Request always redirects to login

D Request skips middleware

💡 Hint

Refer to variable_tracker and execution_table steps where token is missing.

Concept Snapshot

Middleware runs on each request.
It checks for an auth token cookie.
If token missing, redirects to login page.
If token present, allows request to continue.
Stops request flow on redirect.
Simple way to protect routes.

Full Transcript

Middleware for authentication in Astro runs on every incoming request. It looks for a cookie named 'authToken'. If the cookie is found, the middleware calls next() to let the request continue to the next handler or page. If the cookie is missing, the middleware returns Response.redirect('/login'), which stops the request and sends the user to the login page. This way, only authenticated users can access protected pages. The execution table shows each step: receiving the request, checking the token, and either continuing or redirecting. The variable tracker shows the token value changing from undefined to a string or staying undefined. This simple middleware pattern helps keep your site secure by checking authentication before loading pages.

Practice

1. What is the main purpose of middleware for authentication in Astro?

easy

A. To fetch data from an external API after the page loads

B. To style the webpage with CSS before rendering

C. To check if a user is allowed to access certain pages before loading them

D. To optimize images automatically during build

Solution

1. Step 1: Understand middleware role

   Middleware runs before page loads to control access.

2. Step 2: Identify authentication purpose

   Authentication middleware checks user identity to allow or block access.

3. Final Answer:

   To check if a user is allowed to access certain pages before loading them -> Option C

4. Quick Check:

   Middleware controls access = A [OK]

Hint: Middleware controls access before page loads [OK]

Common Mistakes:

• Confusing middleware with styling or data fetching
• Thinking middleware runs after page loads
• Assuming middleware optimizes images

2. Which is the correct way to allow access to the next middleware or page in Astro authentication middleware?

easy

A. return context.stop()

B. return context.skip()

C. return context.block()

D. return context.next()

Solution

1. Step 1: Recall middleware flow control

   In Astro, calling context.next() passes control to next middleware or page.

2. Step 2: Identify correct method to continue

   Only context.next() allows access; others are invalid or block.

3. Final Answer:

   return context.next() -> Option D

4. Quick Check:

   Allow access = context.next() [OK]

Hint: Use context.next() to continue middleware chain [OK]

Common Mistakes:

• Using non-existent methods like context.stop()
• Confusing block and skip with next
• Omitting return keyword

3. Given this Astro middleware code snippet, what happens if the user is not authenticated?

export async function middleware(context) {
  if (!context.cookies.get('authToken')) {
    return new Response('Unauthorized', { status: 401 });
  }
  return context.next();
}

medium

A. The user sees a 401 Unauthorized response and page does not load

B. The user is redirected to the homepage

C. The middleware ignores the check and loads the page

D. The user is logged out automatically

Solution

1. Step 1: Analyze authentication check

   The code checks if 'authToken' cookie exists; if not, returns 401 response.

2. Step 2: Understand middleware response effect

   Returning a Response with status 401 stops page loading and shows unauthorized message.

3. Final Answer:

   The user sees a 401 Unauthorized response and page does not load -> Option A

4. Quick Check:

   Missing authToken = 401 response [OK]

Hint: Return Response with 401 to block unauthorized users [OK]

Common Mistakes:

• Assuming middleware redirects automatically
• Thinking page loads despite 401 response
• Confusing logout with blocking access

4. Identify the error in this Astro middleware code for authentication:

export async function middleware(context) {
  if (!context.cookies.get('authToken')) {
    context.next();
  }
  return new Response('Unauthorized', { status: 401 });
}

medium

A. The Response status 401 should be 200 to allow access

B. context.next() is called but its result is not returned, so middleware blocks all requests

C. The cookie name 'authToken' is incorrect and causes a runtime error

D. Middleware functions cannot be async in Astro

Solution

1. Step 1: Check middleware flow control

   context.next() must be returned to continue; here it is called but not returned.

2. Step 2: Understand effect of missing return

   Since return is after if-block, middleware always returns 401 response, blocking all requests.

3. Final Answer:

   context.next() is called but its result is not returned, so middleware blocks all requests -> Option B

4. Quick Check:

   Return context.next() to allow access [OK]

Hint: Always return context.next() to continue middleware chain [OK]

Common Mistakes:

• Calling context.next() without return
• Misunderstanding cookie name importance
• Thinking async is disallowed in middleware

5. You want to protect multiple private routes in Astro using middleware. Which approach correctly applies authentication middleware only to URLs starting with /dashboard or /settings?

hard

A. Check if context.url.pathname starts with '/dashboard' or '/settings' and run auth check only then

B. Apply middleware globally and always block access regardless of URL

C. Use middleware only on the homepage '/' to protect all routes

D. Check if context.url.pathname ends with '/dashboard' or '/settings' to run auth

Solution

1. Step 1: Understand route matching in middleware

   Middleware can check context.url.pathname to target specific routes.

2. Step 2: Identify correct string method for prefix matching

   Using startsWith matches routes beginning with '/dashboard' or '/settings'.

3. Step 3: Evaluate other options

   Blocking all routes or checking endsWith is incorrect for this purpose.

4. Final Answer:

   Check if context.url.pathname starts with '/dashboard' or '/settings' and run auth check only then -> Option A

5. Quick Check:

   Use startsWith for route prefix matching [OK]

Hint: Use startsWith to target route prefixes in middleware [OK]

Common Mistakes:

• Blocking all routes instead of specific ones
• Using endsWith instead of startsWith
• Applying middleware only on homepage