Protecting pages and API routes

Two kinds of protection

In the Notes app, /notes must only show to logged-in users. There are two places to check: the frontend (the pages) and the backend (the API). They do different jobs.

The frontend check is for user experience. If you are not logged in, the app sends you to /login instead of showing an empty, broken page. But anyone can call your API directly with a tool like curl, so this check stops nobody.

The backend check: middleware

Middleware is a function that runs before your route handler. An auth middleware reads the session cookie, finds the session, and puts the user id on the request. If there is no valid session, it stops and answers 401 Unauthorized.

async function requireUser(req, res, next) {
  const sid = req.cookies.sid;
  const session = sid ? await db.findSession(sid) : null;
  if (!session || session.expiresAt < Date.now()) {
    return res.status(401).json({ error: 'Login required' });
  }
  req.userId = session.userId;
  next();
}

app.get('/api/notes', requireUser, async (req, res) => {
  const notes = await db.all('SELECT * FROM notes WHERE user_id = ?', [req.userId]);
  res.json(notes);
});

Logged in is not enough: check the owner

Asha is logged in. She changes the URL to /api/notes/42, and note 42 belongs to Ravi. The session check passes, so you also need an ownership check: always filter by the user id from the session, never by an id the browser sends in the body.

SELECT id, title, body, pinned FROM notes
WHERE id = ? AND user_id = ?;

Frontend guards, for a smooth experience

// React (runs in the browser)
function RequireUser({ children }) {
  const { user, loading } = useCurrentUser(); // calls GET /api/me
  if (loading) return <p>Loading...</p>;
  if (!user) return <Navigate to={'/login?next=' + encodeURIComponent(location.pathname)} />;
  return children;
}

// Next.js server component (runs on the server)
export default async function NotesPage() {
  const user = await getCurrentUser(); // reads the session cookie
  if (!user) redirect('/login?next=/notes');
  const notes = await getNotesFor(user.id);
  return <NotesList notes={notes} />;
}

Sending the user back after login

When the guard sends Asha to /login?next=/notes/5, after login the app should return her to /notes/5. But if you redirect to any value of next, an attacker can send a link like /login?next=https://evil.example, and after a real login your site sends the victim to a fake site. This is called an open redirect.