Protected routes and middleware in Astro - Step-by-Step Execution

Concept Flow - Protected routes and middleware

User requests a route

↓

Middleware runs first

↓

Check if user is authenticated

↓

Allow access

↓

Route handler runs

When a user requests a page, middleware checks if they are logged in. If yes, they see the page. If no, they get sent to login.

Execution Sample

Astro

export async function middleware(context) {
  if (!context.locals.user) {
    return context.redirect('/login');
  }
}

Middleware checks if context.locals.user exists; if not, redirects to login; otherwise, continues to the requested page.

Execution Table

Step	Action	User Authenticated?	Middleware Result	Route Handler Runs?
1	User requests /dashboard	Yes	Allow access	Yes
2	User requests /dashboard	No	Redirect to /login	No

💡 Execution stops if user is not authenticated and is redirected to login.

Variable Tracker

Variable	Start	After Step 1	After Step 2
context.locals.user	undefined	object (user info)	undefined
middleware result	none	allow access	redirect to /login

Key Moments - 2 Insights

Why does the route handler not run when the user is not authenticated?

Because middleware returns a redirect response, stopping further processing as shown in execution_table row 2.

What happens if middleware does not return a Response?

The framework continues to the route handler if the user is authenticated, as seen in execution_table row 1.

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2 when the user is not authenticated?

A An error is thrown

B The user is redirected to /login

C The route handler runs normally

D The middleware does nothing

💡 Hint

Check the 'Middleware Result' column at step 2 in the execution_table.

At which step does the route handler run?

A Both steps

B Step 2

C Step 1

D Neither step

💡 Hint

Look at the 'Route Handler Runs?' column in the execution_table.

If middleware always returns the redirect to /login, what would happen?

A All users would be redirected to login

B All users would access the route without checks

C Middleware would throw an error

D Nothing would change

💡 Hint

Refer to how middleware controls flow in the execution_table and variable_tracker.

Concept Snapshot

Protected routes use middleware to check user login.
If user is not logged in, middleware redirects to login page.
If user is logged in, middleware does not return a Response to continue.
Middleware runs before route handler.
This protects pages from unauthorized access.

Full Transcript

In Astro framework, protected routes use middleware to check if a user is logged in before allowing access. When a user requests a page, the middleware runs first. It checks if the user is authenticated by looking at context.locals.user. If the user is not authenticated, middleware returns a redirect response to the login page, stopping the route handler from running. If the user is authenticated, middleware does not return a Response, allowing the framework to continue to the route handler, allowing the page to load. This process ensures only logged-in users can access protected pages. The execution table shows two cases: one where the user is logged in and allowed access, and one where the user is redirected to login. The variable tracker shows how context.locals.user and middleware result change during execution. Key moments include understanding why the route handler does not run when redirected and what happens when no Response is returned. The visual quiz tests understanding of these steps and middleware behavior.

Practice

1. What is the main purpose of middleware in Astro when protecting routes?

easy

A. To check user access before loading a page

B. To style the page content dynamically

C. To fetch data after the page loads

D. To optimize images on the page

Solution

1. Step 1: Understand middleware role

   Middleware runs before a page loads to perform checks or actions.

2. Step 2: Identify middleware use in protected routes

   It checks if a user has permission to access certain pages before showing them.

3. Final Answer:

   To check user access before loading a page -> Option A

4. Quick Check:

   Middleware checks access = D [OK]

Hint: Middleware runs first to check access before page loads [OK]

Common Mistakes:

• Thinking middleware styles pages
• Assuming middleware fetches data after load
• Confusing middleware with image optimization

2. Which syntax correctly defines a middleware matcher for protecting all routes under /dashboard in Astro?

easy

A. export const matcher = '/dashboard/*';

B. export const matcher = ['/dashboard/*'];

C. export const matcher = ['/dashboard'];

D. export const matcher = '/dashboard';

Solution

1. Step 1: Recall matcher syntax

   Matcher must be an array of strings specifying route patterns.

2. Step 2: Match all routes under /dashboard

   Using '/dashboard/*' inside an array matches all subpaths.

3. Final Answer:

   export const matcher = ['/dashboard/*']; -> Option B

4. Quick Check:

   Matcher is array with pattern string = A [OK]

Hint: Matcher must be an array of route strings [OK]

Common Mistakes:

• Using string instead of array for matcher
• Missing wildcard * to match subroutes
• Using exact path without wildcard for nested routes

3. Given this middleware code in Astro, what happens when a user visits /profile without a valid token?

export const matcher = ['/profile'];

export async function middleware({ request, redirect }) {
  const token = request.headers.get('authorization');
  if (!token) {
    return redirect('/login');
  }
  return;
}

medium

A. Middleware throws an error

B. User sees the /profile page

C. User is redirected to /login

D. User is redirected to /home

Solution

1. Step 1: Check token presence

   The middleware checks if the 'authorization' header exists in the request.

2. Step 2: Redirect if no token

   If token is missing, middleware redirects user to '/login'.

3. Final Answer:

   User is redirected to /login -> Option C

4. Quick Check:

   No token means redirect to /login = A [OK]

Hint: No token triggers redirect to login [OK]

Common Mistakes:

• Assuming user sees page without token
• Expecting error instead of redirect
• Redirecting to wrong path

4. Identify the error in this Astro middleware code meant to protect /admin routes:

export const matcher = '/admin/*';

export function middleware({ request, redirect }) {
  const user = request.headers.get('user');
  if (user !== 'admin') {
    redirect('/not-authorized');
  }
}

medium

A. request.headers.get does not exist

B. redirect should be called with await

C. middleware must be async function

D. matcher should be an array, not a string

Solution

1. Step 1: Check matcher syntax

   Matcher must be an array of strings, not a single string.

2. Step 2: Confirm redirect usage

   Redirect can be called synchronously; no await needed here.

3. Final Answer:

   matcher should be an array, not a string -> Option D

4. Quick Check:

   Matcher array required = C [OK]

Hint: Matcher must always be an array even for one route [OK]

Common Mistakes:

• Using string instead of array for matcher
• Thinking redirect needs await
• Confusing request.headers API

5. You want to protect both /dashboard and /settings routes using middleware in Astro. Which matcher setup correctly protects both paths and their subpaths?

hard

A. export const matcher = ['/dashboard/*', '/settings/*'];

B. export const matcher = ['/dashboard', '/settings'];

C. export const matcher = ['/dashboard*', '/settings*'];

D. export const matcher = ['/dashboard/**', '/settings/**'];

Solution

1. Step 1: Understand wildcard usage

   '/*' matches all subpaths under a route, ensuring protection of nested pages.

2. Step 2: Verify matcher array format

   Matcher must be an array of strings with correct wildcard patterns.

3. Final Answer:

   export const matcher = ['/dashboard/*', '/settings/*']; -> Option A

4. Quick Check:

   Array with '/*' wildcard protects subpaths = B [OK]

Hint: Use '/*' wildcard in array to protect all subroutes [OK]

Common Mistakes:

• Omitting wildcard to protect subpaths
• Using incorrect wildcard like '**'
• Using string instead of array for matcher