Role Based Access Control in Remix: Simple Implementation Guide

In Remix, implement role based access by checking user roles inside loader functions and conditionally redirecting or rendering content. Use session data to store roles and verify them before allowing access to protected routes.

Syntax

Role based access in Remix typically involves these parts:

• loader: Runs on the server to check user roles before rendering.
• redirect: Sends unauthorized users away from protected pages.
• getSession: Retrieves user session data including roles.
• requireRole: A helper function to verify if the user has the needed role.

typescript

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

export async function loader({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  const userRole = session.get('role');

  if (!userRole || !requireRole(userRole, 'admin')) {
    return redirect('/login');
  }

  return null; // allow access
}

function requireRole(userRole, requiredRole) {
  return userRole === requiredRole;
}

Example

This example shows a Remix route that only allows users with the admin role to access the page. Others are redirected to the login page.

typescript

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

export async function loader({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  const userRole = session.get('role');

  if (userRole !== 'admin') {
    return redirect('/login');
  }

  return null;
}

export default function AdminPage() {
  return <h1>Welcome, Admin!</h1>;
}

Output

<h1>Welcome, Admin!</h1>

Common Pitfalls

Not checking roles in the loader: If you check roles only in the UI, unauthorized users can still access data or pages by URL.

Storing roles insecurely: Always store roles in server-side sessions, not in client-side cookies or local storage.

Not handling missing sessions: Always handle cases where the session or role is missing to avoid errors.

typescript

/* Wrong: Checking role only in component (client-side) */
export default function AdminPage() {
  const userRole = useUserRole(); // hypothetical hook
  if (userRole !== 'admin') {
    return <p>Access denied</p>;
  }
  return <h1>Welcome, Admin!</h1>;
}

/* Right: Check role in loader (server-side) */
import { redirect } from '@remix-run/node';
import { getSession } from '~/sessions';

export async function loader({ request }) {
  const session = await getSession(request.headers.get('Cookie'));
  if (session.get('role') !== 'admin') {
    return redirect('/login');
  }
  return null;
}

Quick Reference

• Use loader to check roles before rendering.
• Store roles securely in server sessions.
• Redirect unauthorized users with redirect.
• Always handle missing or invalid sessions gracefully.

Key Takeaways

Always check user roles in Remix loader functions to protect routes securely.

Store user roles in server-side sessions, never in client-side storage.

Use Remix's redirect to send unauthorized users away from protected pages.

Handle missing or invalid sessions to avoid runtime errors.

Client-side role checks alone are not secure; always enforce on the server.