Next.js Server Actions — request lifecycle playground

<div class="pg">
    <h1 class="pg-title">🎮 Who can actually call your Server Action?</h1>
    <p class="pg-sub">
      This is a <b>model</b> of the request lifecycle a Next.js Server Action goes through — not a
      running Next.js server. Pick who's calling <code>deleteComment(id)</code> and whether the
      action has its own auth check, then send the request and watch where it gets stopped, if
      it gets stopped at all.
    </p>

<div class="banner info show">
      Simulated model — walks the documented request path in plain JS. No real network request, no real server, no real database.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px;">
        <div class="field">
          <span class="ctl-label">Who's calling</span>
          <div class="seg" id="callerSeg">
            <button type="button" aria-pressed="true" data-val="same">Your button (same origin)</button>
            <button type="button" aria-pressed="false" data-val="cross">Attacker's site (cross-origin)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="flex-wrap:wrap; gap:14px; margin-top:12px;">
        <div class="field">
          <span class="ctl-label">Auth check inside the action</span>
          <div class="seg" id="authSeg">
            <button type="button" aria-pressed="true" data-val="present">Present (checks session + ownership)</button>
            <button type="button" aria-pressed="false" data-val="missing">Missing (trusts the caller)</button>
          </div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶️ Send the request</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <p class="hint" style="margin-top:8px" id="setupHint">
        A same-origin call from your own signed-in browser is exactly what your Network tab shows after clicking a real button — it isn't an attack, but it still isn't automatically authorized.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Request path: <code>deleteComment(commentId)</code></div>
      <div class="pipeline" id="pipeline">
        <div class="step" data-step="call"><span class="ico">🖱️</span><div class="body"><div class="name">Client calls the action</div><div class="desc">Looks like a function call in your code.</div></div><div class="tag" data-tag="call">idle</div></div>
        <div class="arrow">↓ compiles to</div>
        <div class="step" data-step="post"><span class="ico">📡</span><div class="body"><div class="name">Real POST, encrypted action ID</div><div class="desc">Same shape as any other HTTP request.</div></div><div class="tag" data-tag="post">idle</div></div>
        <div class="arrow">↓</div>
        <div class="step" data-step="csrf"><span class="ico">🛡️</span><div class="body"><div class="name">Next.js: Origin vs Host check</div><div class="desc">Automatic. Runs before your code, every time.</div></div><div class="tag" data-tag="csrf">idle</div></div>
        <div class="arrow">↓ if it passes</div>
        <div class="step" data-step="body"><span class="ico">🧩</span><div class="body"><div class="name">Your action's function body runs</div><div class="desc">Next.js has no opinion on what happens next.</div></div><div class="tag" data-tag="body">idle</div></div>
        <div class="arrow">↓</div>
        <div class="step" data-step="auth"><span class="ico">🔑</span><div class="body"><div class="name">Your auth / ownership check</div><div class="desc">Only runs if you wrote one.</div></div><div class="tag" data-tag="auth">idle</div></div>
        <div class="arrow">↓ if it passes</div>
        <div class="step" data-step="db"><span class="ico">🗄️</span><div class="body"><div class="name">Database mutation executes</div><div class="desc">The comment actually gets deleted.</div></div><div class="tag" data-tag="db">idle</div></div>
      </div>

<div class="status" id="statusLine">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a caller and an auth setting, then send the request.</span>
      </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.