菜单
Remix v2 meta/SEO, sessions, auth, and CSRF. Use when working with document head, cookie sessions, auth gates, or CSRF protection. Triggers on meta export (v2 array shape), links export, createCookieSessionStorage, commitSession, destroySession, requireUserId, remix-utils/csrf, remix-auth.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/existential-birds/beagle --skill remix-v2-meta-sessions命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | remix-v2-meta-sessions |
| description | Remix v2 meta/SEO, sessions, auth, and CSRF. Use when working with document head, cookie sessions, auth gates, or CSRF protection. Triggers on meta export (v2 array shape), links export, createCookieSessionStorage, commitSession, destroySession, requireUserId, remix-utils/csrf, remix-auth. |
v2 meta returns an array of descriptor objects — NOT the v1 object shape.
A v1-style object literal still typechecks in stale codebases but renders no
tags at runtime.
// app/routes/posts.$slug.tsx
import type { MetaFunction } from "@remix-run/node";
export const meta: MetaFunction<typeof loader> = ({ data }) => {
if (!data?.post) return [{ title: "Not Found" }];
return [
{ title: `${data.post.title} | My Blog` },
{ name: "description", content: data.post.excerpt },
{ property: "og:title", content: data.post.title },
{ tagName: "link", rel: "canonical", href: data.post.url },
];
};
Cookie session storage with secure defaults and secret rotation:
// app/session.server.ts
import { createCookieSessionStorage } from "@remix-run/node";
type SessionData = { userId: string };
type SessionFlashData = { error: string };
const SESSION_SECRET = process.env.SESSION_SECRET;
if (!SESSION_SECRET) throw new Error("SESSION_SECRET is required");
export const { getSession, commitSession, destroySession } =
createCookieSessionStorage<SessionData, SessionFlashData>({
cookie: {
name: "__session",
httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
path: "/",
maxAge: 60 * 60 * 24 * 30,
secrets: [
SESSION_SECRET,
...(process.env.SESSION_SECRET_OLD ? [process.env.SESSION_SECRET_OLD] : []),
],
},
});
meta and links<Meta /> and <Links /> must live inside <head> in root.tsx;
<ScrollRestoration />, <Scripts />, and <LiveReload /> go at the end of
<body>. Missing either of these aggregators produces "css doesn't load" or
"meta tags missing" with no compile error.
// app/root.tsx
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
);
}
<Meta /> and <Links /> aggregate differently. <Links /> walks the
entire route match chain and renders every matched route's links export
— a stylesheet declared in a leaf route is rendered automatically and
unloaded on navigation away. <Meta /> does NOT aggregate; Remix picks
the last matching route's meta array only. To inherit from parents in
meta, flatMap matches explicitly:
import type { MetaFunction } from "@remix-run/node";
import type { loader as projectLoader } from "./project.$pid";
export const meta: MetaFunction<
typeof loader,
{ "routes/project.$pid": typeof projectLoader }
> = ({ data, matches }) => {
const parentMeta = matches.flatMap((m) => m.meta ?? []);
const project = matches.find((m) => m.id === "routes/project.$pid")?.data;
return [
...parentMeta,
{ title: `${data?.task.name} | ${project?.name}` },
];
};
The second generic on MetaFunction (keyed by route id) types
matches.find(...).data for parent routes. See
references/meta-v2.md.
commitSession must be attached as a Set-Cookie header on every mutating
response. Remix does NOT auto-commit; calling session.set(...) and returning
plain json(data) silently drops the change.
return redirect("/dashboard", {
headers: { "Set-Cookie": await commitSession(session) },
});
session.flash(key, value) is read-once; the consuming loader must still call
commitSession after reading to clear the flash. See
references/sessions.md.
redirect from loadersThe canonical pattern is a requireUserId(request) helper that throws
redirect() for unauthenticated requests. The thrown response short-circuits
the loader; no top-level return is needed.
// app/auth.server.ts
import { redirect } from "@remix-run/node";
import { getSession } from "./session.server";
export async function requireUserId(request: Request): Promise<string> {
const session = await getSession(request.headers.get("Cookie"));
const userId = session.get("userId");
if (!userId) {
const url = new URL(request.url);
const redirectTo = `${url.pathname}${url.search}`;
throw redirect(`/login?redirectTo=${encodeURIComponent(redirectTo)}`);
}
return userId;
}
Never gate routes inside React components — the protected component still SSRs and ships HTML/loader data to unauthenticated users. See references/auth-csrf.md.
Remix has no built-in CSRF protection. Same-origin <Form> posts rely
entirely on whatever SameSite value you set on the session cookie.
SameSite=Lax blocks cookies on cross-site POST navigations in all current
browsers. (Chrome briefly had a 2-minute "Lax+POST" window in 2020 — removed
in 2021.) The real Lax-vs-Strict tradeoff is subdomain takeover: with
Lax, a compromised subdomain can initiate top-level GET nav with
credentials; with Strict, deep-link navigations from external sites lose
session. Apps that use SameSite=None for legitimate cross-site needs
(OAuth popups, iframe embeds) have no cookie-level CSRF protection at all.
Recommend remix-utils/csrf with a dedicated signed cookie — never
reuse the session cookie. Manual fetch("/api/x", { method: "POST" })
bypasses AuthenticityTokenInput, so any action that does not call
csrf.validate(request) is an attacker entry point.
Answer in order. Pass means the condition is true; pick the API on the same line and stop.
meta tag live?<head> in root.tsx. Avoids the v2
no-merge surprise and prevents duplicate tags. Stop.export const meta in the leaf route file; if you need
parent values, matches.flatMap((m) => m.meta ?? []). Stop.loader, action, or helper?await requireUserId(request) at the top of the
loader. Stop.await requireUserId(request) at the top of the
action, AND call await csrf.validate(request). Stop.action only, never loader. A <Link to="/logout">
pointing at a loader is CSRF-able via <img src="/logout">. Use
<Form method="post" action="/logout">. Stop.remix-utils/csrf?
createCookie("csrf", { ... }) cookie, separate
from the session cookie. The CSRF value is a signed string; the
session value is a serialized object — reusing one cookie throws on
validate. Stop.sameSite: "strict" on
the session cookie and verify the Origin header in every action.
Prefer adding remix-utils/csrf instead.matches, JSON-LD, and v1→v2 migration
pitfalls.<Links />.createCookieSessionStorage config, commitSession/destroySession
patterns, flash messages, and database-backed sessions.requireUserId helpers, login/logout actions, remix-auth, and
remix-utils/csrf wiring.| Concern | v1 | v2 |
|---|---|---|
meta return shape | Object { title, description } | Array [{ title }, { name, content }] |
| Parent meta merge | Auto-merged (last-write-wins per key) | No merge; last matching route only |
meta argument for parent data | parentsData | matches (flatMap manually) |
| OG tags | { "og:title": "..." } shorthand | { property: "og:title", content: "..." } |
| Migration flag | v2_meta: true future flag | N/A (v2 default) |