How to Implement Authentication in Remix: Simple Guide

To implement authentication in Remix, use createCookieSessionStorage to manage user sessions securely and handle login by verifying credentials and setting session data. Protect routes by checking session state in loaders and redirecting unauthenticated users.

Syntax

Authentication in Remix mainly uses createCookieSessionStorage to create and manage sessions. You define a session storage with cookie options, then use getSession, commitSession, and destroySession to read, save, and clear session data.

In loaders or actions, you check or set session data to control access and login/logout behavior.

typescript

import { createCookieSessionStorage, redirect } from "@remix-run/node";

const sessionSecret = "your-secret-key";

const storage = createCookieSessionStorage({
  cookie: {
    name: "session",
    secure: true,
    secrets: [sessionSecret],
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24 * 7, // 7 days
    httpOnly: true
  }
});

// Get session from request
async function getUserSession(request) {
  const cookie = request.headers.get("Cookie");
  return storage.getSession(cookie);
}

// Require user to be logged in
async function requireUserId(request) {
  const session = await getUserSession(request);
  const userId = session.get("userId");
  if (!userId) {
    throw redirect("/login");
  }
  return userId;
}

Example

This example shows a simple login action that checks a hardcoded user, sets the session, and redirects to a protected page. The loader on the protected page checks the session and redirects if not logged in.

typescript

import { createCookieSessionStorage, redirect } from "@remix-run/node";
import { json } from "@remix-run/node";

const sessionSecret = "super-secret-key";

const storage = createCookieSessionStorage({
  cookie: {
    name: "session",
    secure: true,
    secrets: [sessionSecret],
    sameSite: "lax",
    path: "/",
    maxAge: 60 * 60 * 24 * 7,
    httpOnly: true
  }
});

export async function action({ request }) {
  const form = await request.formData();
  const username = form.get("username");
  const password = form.get("password");

  // Simple user check (replace with real DB check)
  if (username === "user" && password === "pass") {
    const session = await storage.getSession(request.headers.get("Cookie"));
    session.set("userId", "123");
    return redirect("/dashboard", {
      headers: {
        "Set-Cookie": await storage.commitSession(session)
      }
    });
  }

  return json({ error: "Invalid credentials" }, { status: 401 });
}

export async function loader({ request }) {
  const cookie = request.headers.get("Cookie");
  const session = await storage.getSession(cookie);
  const userId = session.get("userId");
  if (!userId) {
    return redirect("/login");
  }
  return json({ userId });
}

Output

When submitting username 'user' and password 'pass', user is redirected to /dashboard with session cookie set. Accessing /dashboard without login redirects to /login.

Common Pitfalls

• Not setting httpOnly and secure flags on cookies can expose sessions to attacks.
• Forgetting to commit the session after setting data means changes won't persist.
• Hardcoding secrets or user data is insecure; always use environment variables and a database.
• Not checking session in loaders allows unauthorized access.

typescript

/* Wrong: Not committing session after setting userId */
const session = await storage.getSession(request.headers.get("Cookie"));
session.set("userId", "123");
// Missing commitSession call here

/* Right: Commit session to save cookie */
return redirect("/dashboard", {
  headers: {
    "Set-Cookie": await storage.commitSession(session)
  }
});

Quick Reference

Tips for Remix Authentication:

• Use createCookieSessionStorage for secure session cookies.
• Always protect routes by checking session in loaders.
• Use environment variables for secrets.
• Clear sessions on logout with destroySession.
• Use HTTPS in production to secure cookies.

Key Takeaways

Use createCookieSessionStorage to manage user sessions securely in Remix.

Always check session data in loaders to protect private routes.

Commit session changes with commitSession to persist login state.

Never hardcode secrets or user credentials; use environment variables and databases.

Set secure cookie flags like httpOnly and secure for safety.