Protected routes and middleware in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the middleware function correctly.

Astro

import [1] from '../middleware/auth.js';

Drag options to blanks, or click blank then click option'

AcheckAuth

BmiddlewareAuth

Cauth

DauthMiddleware

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong import name that does not match the exported function.

Forgetting to include the file extension in the import path.

The middleware function is named authMiddleware and must be imported with the exact name to work properly.

2fill in blank

medium

Complete the code to apply middleware to a protected route.

Astro

export const get = async ({ request }) => {
  await [1](request);
  return new Response('Protected content');
};

Drag options to blanks, or click blank then click option'

AauthMiddleware

BcheckAuth

CverifyUser

DvalidateSession

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a function that is not imported or does not exist.

Not awaiting the middleware function if it returns a promise.

The middleware function authMiddleware is called to check authentication before returning protected content.

3fill in blank

hard

Fix the error in the middleware function to correctly block unauthorized users.

Astro

export async function authMiddleware(request) {
  const user = await getUserFromRequest(request);
  if (!user) {
    return new Response('Unauthorized', { status: [1] });
  }
}

Drag options to blanks, or click blank then click option'

A401

B403

C404

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 403 which means forbidden but not specifically unauthorized.

Using 404 which means not found and is unrelated here.

The HTTP status code 401 means unauthorized access and is the correct code to return when the user is not authenticated.

4fill in blank

hard

Fill both blanks to create a middleware that redirects unauthorized users to login.

Astro

export async function authMiddleware(request) {
  const user = await getUserFromRequest(request);
  if (!user) {
    return new Response(null, { status: [1], headers: { Location: [2] } });
  }
}

Drag options to blanks, or click blank then click option'

A302

B'/login'

C'/home'

D401

Attempts:

3 left

💡 Hint

Common Mistakes

Using 401 status code with Location header which does not redirect.

Setting Location header to a wrong path like '/home'.

Status code 302 is used for redirecting, and the Location header should point to the login page '/login'.

5fill in blank

hard

Fill all three blanks to create a protected route that uses middleware and returns user data.

Astro

import { authMiddleware } from '../middleware/auth.js';

export const get = async ({ request }) => {
  const user = await [1](request);
  if (!user) {
    return new Response(null, { status: [2], headers: { Location: [3] } });
  }
  return new Response(JSON.stringify({ name: user.name }), { status: 200 });
};

Drag options to blanks, or click blank then click option'

AauthMiddleware

B302

C'/login'

DgetUserFromRequest

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a wrong function to get the user.

Using wrong status code or redirect path.

The route calls authMiddleware to check the user. If no user, it redirects with status 302 to '/login'. Otherwise, it returns user data.

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