Protected routes with loaders in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a user is not authenticated in this loader?

Consider this Remix loader code protecting a route. What will the user see if they are not logged in?

Remix

import { redirect } from '@remix-run/node';

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    return redirect('/login');
  }
  return { user };
}

A The user is redirected to the /login page.

B The loader returns null and the page shows no content.

C The user sees an error message on the same page.

D The loader throws an exception and the app crashes.

💡 Hint

Think about what the redirect function does in Remix loaders.

The redirect function sends the user to the specified URL immediately. If the user is not authenticated, they are sent to /login.

❓ state_output

intermediate

What data does the component receive from this loader?

Given this loader, what will the component receive as props?

Remix

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    return redirect('/login');
  }
  return { user: { id: user.id, name: user.name } };
}

A An error is thrown

B { user: null }

C undefined

D { user: { id: '123', name: 'Alice' } }

💡 Hint

Look at what the loader returns when the user exists.

The loader returns an object with a user property containing the user's id and name. This data is passed to the component as props.

📝 Syntax

advanced

Which loader code correctly protects a route and fetches user data asynchronously?

Choose the correct loader code that redirects unauthenticated users and returns user data.

A

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    redirect('/login');
  }
  return { user };
}

B

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    return '/login';
  }
  return { user };
}

C

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    return redirect('/login');
  }
  return { user };
}

D

export function loader({ request }) {
  const user = getUserFromSession(request);
  if (!user) {
    return redirect('/login');
  }
  return { user };
}

💡 Hint

Remember to await async calls and return redirect properly.

Option C correctly awaits the async call and returns redirect to send the user away. Option C misses return before redirect, so it won't stop execution. Option C misses async/await. Option C returns a string instead of redirect.

🔧 Debug

advanced

Why does this loader cause an infinite redirect loop?

Analyze this loader code. Why might it cause the user to be stuck redirecting endlessly?

Remix

export async function loader({ request }) {
  const user = await getUserFromSession(request);
  if (!user) {
    return redirect('/protected');
  }
  return { user };
}

A Because getUserFromSession throws an error causing reloads.

B Because unauthenticated users are redirected back to the protected route itself.

C Because redirect is missing a return statement.

D Because the loader returns user data even when user is null.

💡 Hint

Check where unauthenticated users are sent.

The loader redirects unauthenticated users to the same protected route, causing the loader to run again and redirect again, creating a loop.

🧠 Conceptual

expert

How can you securely protect nested routes with loaders in Remix?

You have a parent route with nested child routes. How should you structure loaders to protect all nested routes efficiently?

A Add the authentication check only in the parent route loader, so all children inherit protection.

B Use client-side checks in components instead of loaders for protection.

C Add the authentication check only in the root route loader and skip children.

D Add the authentication check in every child route loader separately.

💡 Hint

Think about how Remix loaders cascade in nested routes.

Loaders in parent routes run before child loaders. Adding authentication in the parent loader protects all nested routes efficiently. Doing it in every child is repetitive. Root loader may be too high-level. Client-side checks alone are insecure.

Practice

1. What is the main purpose of using a loader in a protected route in Remix?

easy

A. To check if the user is authorized before showing the page

B. To style the page with CSS

C. To fetch data after the page is rendered

D. To handle button clicks on the page

Solution

1. Step 1: Understand the role of loaders in Remix

   Loaders run before the page renders and can check user permissions.

2. Step 2: Identify the purpose of protected routes

   Protected routes restrict access to authorized users only, so loaders check authorization.

3. Final Answer:

   To check if the user is authorized before showing the page -> Option A

4. Quick Check:

   Loader checks authorization = To check if the user is authorized before showing the page [OK]

Hint: Loaders run before page render to check access [OK]

Common Mistakes:

• Thinking loaders style pages
• Assuming loaders run after rendering
• Confusing loaders with event handlers

2. Which of the following is the correct way to redirect unauthorized users inside a Remix loader?

easy

A. navigate('/login')

B. return redirect('/login')

C. throw redirect('/login')

D. window.location.href = '/login'

Solution

1. Step 1: Recall Remix loader redirect syntax

   In Remix loaders, you use throw redirect() to redirect users.

2. Step 2: Compare options

   throw redirect('/login') uses throw redirect('/login'), which is the correct Remix pattern.

3. Final Answer:

   throw redirect('/login') -> Option C

4. Quick Check:

   Use throw redirect() in loaders = throw redirect('/login') [OK]

Hint: Use throw redirect() inside loaders for redirects [OK]

Common Mistakes:

• Using return redirect() instead of throw
• Using client-side navigation methods in loaders
• Trying to set window.location in server code

3. Given this loader code in Remix, what happens if the user is not logged in?

import { redirect } from '@remix-run/node';

export async function loader({ request }) {
  const user = await getUser(request);
  if (!user) {
    throw redirect('/login');
  }
  return { user };
}

medium

A. The loader returns null and the page is blank

B. The user sees the protected page with user data

C. The page shows an error message but stays on the same URL

D. The user is redirected to the /login page

Solution

1. Step 1: Analyze the loader logic

   If user is falsy (not logged in), the loader throws redirect('/login').

2. Step 2: Understand Remix redirect behavior

   Throwing redirect sends the browser to the specified URL before rendering the page.

3. Final Answer:

   The user is redirected to the /login page -> Option D

4. Quick Check:

   Throw redirect sends user away = The user is redirected to the /login page [OK]

Hint: Throw redirect sends user to new page before render [OK]

Common Mistakes:

• Thinking user sees protected page anyway
• Assuming error message shows instead of redirect
• Believing loader returns null means blank page

4. Identify the error in this Remix loader for a protected route:

import { redirect } from '@remix-run/node';

export async function loader({ request }) {
  const user = await getUser(request);
  if (!user) {
    return redirect('/login');
  }
  return { user };
}

medium

A. Missing await before getUser(request)

B. Using return redirect() instead of throw redirect() causes a runtime error

C. Loader should not return user data

D. redirect should be imported from '@remix-run/react'

Solution

1. Step 1: Check redirect usage in loader

   In Remix loaders, you must throw redirect(), not return it.

2. Step 2: Understand consequences of return redirect()

   Returning redirect() does not stop loader execution properly and causes errors.

3. Final Answer:

   Using return redirect() instead of throw redirect() causes a runtime error -> Option B

4. Quick Check:

   Throw redirect required in loaders = Using return redirect() instead of throw redirect() causes a runtime error [OK]

Hint: Always throw redirect() in loaders, never return it [OK]

Common Mistakes:

• Returning redirect() instead of throwing
• Importing redirect from wrong package
• Forgetting async/await on getUser

5. You want to protect a route so only logged-in users can access it. You also want to fetch user profile data in the loader. Which is the best way to write the loader?

import { redirect } from '@remix-run/node';

export async function loader({ request }) {
  const user = await getUser(request);
  if (!user) {
    throw redirect('/login');
  }
  const profile = await getUserProfile(user.id);
  return { user, profile };
}

hard

A. This loader correctly protects the route and fetches profile data

B. You should fetch profile data before checking user to avoid errors

C. You must return redirect('/login') instead of throwing it

D. Loaders cannot fetch multiple data items; split into two loaders

Solution

1. Step 1: Check authorization logic

   The loader checks if user exists, and throws redirect if not, protecting the route.

2. Step 2: Confirm data fetching after authorization

   Fetching profile after confirming user is safe and logical.

3. Step 3: Validate return structure

   Returning both user and profile data together is valid and useful for the page.

4. Final Answer:

   This loader correctly protects the route and fetches profile data -> Option A

5. Quick Check:

   Check user, throw redirect, then fetch data = This loader correctly protects the route and fetches profile data [OK]

Hint: Check user first, then fetch data, throw redirect if unauthorized [OK]

Common Mistakes:

• Fetching data before checking user
• Returning redirect instead of throwing
• Splitting data fetching unnecessarily