Next.js のログイン実装。最小構成サンプル

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "ログインの最小構成",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <main>{children}</main>;
}

ログインは3つの部品でできている

パスワードもメールも外して残るのは、この3つです。

部品	置き場所	役目
セッション	サーバー	誰なのかを覚えておく
Cookie	ブラウザ	そのセッションの鍵を持ち歩く
守り	ページごと	鍵が無ければ入れないようにする

このサンプルはこの3つだけで組んであります。足りないものは意図的に外してあります（下の「入れていないもの」）。

ブラウザへ渡すのは鍵だけ

サーバーに残るもの

名前

有効期限

セッションの一覧

ブラウザが持つもの

推測できない鍵（セッションID）

✓越えられる: 鍵だけ

✕越えられない: 名前・権限・有効期限

Cookie に入れているのは crypto.randomUUID() で作った鍵だけです。名前は app/session.ts の中に残ります。

Cookie の設定は3つとも意味があります。

守るのはページ自身の仕事

app/mypage/page.tsx は、自分でセッションを見て、無ければ追い返します。

const session = readSession(jar.get(COOKIE)?.value)
if (!session) redirect('/demo/login')

ログアウトで消すものは2つ

Cookie を消すだけでは足りません。サーバー側の記録も消します。

destroySession(jar.get(COOKIE)?.value)
jar.delete(COOKIE)

片方だけだと、鍵を控えておいた人が後から入れてしまいます。この2行は必ず組で書きます。

誰でも呼べる入口だという前提

app/actions.ts の関数は、画面を経由せずに呼べます。だからその中で、値を絞ることと、回数を絞ることの両方をやっています。

1. 1
   Browser

   名前を送る

   普通の form の送信。

2. 2
   Server

   回数と値を確かめる

   誰でも呼べる入口なので、まずここで絞る。

3. 3
   Server

   セッションを作って鍵を渡す

   名前はサーバーに残し、Cookie には鍵だけを入れる。

4. 4
   Server

   守られたページへ送る

   そのページが自分で鍵を確かめる。

ここから足していくとき

• パスワードかメールを足す。このサイト本体は、パスワードを持たずにメールのリンクで確認する形にしています。理由はこのサイトについてにあります
• セッションをデータベースへ移す。いまはプロセスの中なので、入れ替えると全員ログアウトになります
• 権限を足す。readSession の戻り値に役割を持たせて、ページ側で見ます

どれを足しても、鍵と中身の分け方は変わりません。そこが崩れると、あとから足した守りは全部効かなくなります。