DEV Community: Ethan Bennett

Auth + user data with zero database: building login on Vercel Blob (private store) in Next.js

Ethan Bennett — Mon, 26 Oct 2026 16:21:52 +0000

For my side project — Deskling, a tiny desktop pet that only grows when you focus — I needed accounts so people could sync their pet across devices and appear on a leaderboard. I didn't want to provision Postgres for a hobby game, so I tried something simpler: Vercel Blob with a private store as a tiny key-value database.

It works surprisingly well for small apps. Here's the whole setup.

The data model

One JSON file per thing:

users/<username>.json   -> { username, hash, salt, createdAt }
pets/<username>.json    -> the pet state
leaderboard.json        -> top 100 entries

Create the store as private (vercel blob create-store my-data --access private), so files can only be read with your server token — never by URL.

A tiny read/write layer

import { put, get } from "@vercel/blob";

export async function readJSON<T>(pathname: string): Promise<T | null> {
  const res = await get(pathname, { access: "private", useCache: false });
  if (!res || res.statusCode !== 200 || !res.stream) return null;
  return JSON.parse(await new Response(res.stream).text()) as T;
}

export async function writeJSON(pathname: string, data: unknown) {
  await put(pathname, JSON.stringify(data), {
    access: "private",
    addRandomSuffix: false,   // stable path = key
    allowOverwrite: true,     // upsert
    contentType: "application/json",
  });
}

useCache: false matters: right after a write you want the fresh value, not a CDN copy.

Passwords: scrypt from Node's standard library

No bcrypt dependency needed:

import { scryptSync, randomBytes, timingSafeEqual } from "crypto";

export function hashPassword(pw: string, salt = randomBytes(16).toString("hex")) {
  return { salt, hash: scryptSync(pw, salt, 64).toString("hex") };
}

export function verifyPassword(pw: string, user: { salt: string; hash: string }) {
  const a = scryptSync(pw, user.salt, 64);
  const b = Buffer.from(user.hash, "hex");
  return a.length === b.length && timingSafeEqual(a, b);
}

Sessions: an HMAC-signed cookie

Instead of a sessions table, the cookie is the session: a base64 payload plus an HMAC signature.

import { createHmac } from "crypto";
const SECRET = process.env.SESSION_SECRET!;
const sign = (v: string) => createHmac("sha256", SECRET).update(v).digest("base64url");

export function makeToken(username: string) {
  const payload = Buffer.from(JSON.stringify({ u: username, e: Date.now() + 60 * 864e5 })).toString("base64url");
  return `${payload}.${sign(payload)}`;
}

export function readToken(t?: string) {
  const [p, s] = (t ?? "").split(".");
  if (!p || sign(p) !== s) return null;
  const { u, e } = JSON.parse(Buffer.from(p, "base64url").toString());
  return Date.now() < e ? (u as string) : null;
}

Set it with cookies().set(..., { httpOnly: true, secure: true, sameSite: "lax" }) from a Route Handler and you're done.

Register route

export async function POST(req: Request) {
  const { username, password } = await req.json();
  const u = String(username).trim().toLowerCase();
  if (!/^[a-z0-9_]{3,20}$/.test(u)) return Response.json({ error: "Bad username" }, { status: 400 });
  if (await readJSON(`users/${u}.json`)) return Response.json({ error: "Taken" }, { status: 409 });
  await writeJSON(`users/${u}.json`, { username: u, ...hashPassword(password), createdAt: Date.now() });
  await setSession(u);
  return Response.json({ ok: true });
}

Validating the username with a strict regex is important — it becomes part of a storage path.

Trade-offs (be honest)

No transactions. Two simultaneous registrations of the same name could race. For a hobby app that's acceptable; for money, use a real DB.
Leaderboard is read-modify-write. I only rewrite it when the entry actually changes, which keeps writes low.
Listing is slow-ish, so don't design around list() on hot paths — keep an index file instead.
Cost: for small JSON files it's essentially free on the hobby tier.

Guest first, account optional

The best UX decision: the game works instantly in localStorage. Creating an account just uploads the existing pet. Nobody has to sign up before they've fallen in love with their pet. 🐣

You can see it all running at deskling.vercel.app — hatch a pet, run a focus session, then hit "Save my pet" to try the auth flow. Questions or roasts of the approach welcome!

I built a desktop pet that floats over every window — using the Document Picture-in-Picture API

Ethan Bennett — Mon, 26 Oct 2026 14:24:33 +0000

I wanted a tiny pet that sits in the corner of my screen while I work — like the old Shimeji / Desktop Goose apps — but without installing anything. Turns out modern Chrome/Edge can do this from a plain web page.

The result is Deskling: a cozy virtual pet that only grows when you focus (it has a built-in Pomodoro timer — every focused minute = 1 XP). Here's the most interesting trick behind it.

The trick: Document Picture-in-Picture + React portals

The Document Picture-in-Picture API opens an always-on-top mini window that can hold arbitrary HTML, not just a <video>. And because it's same-origin, React can render straight into it with createPortal — so the pet in the floating window shares state with the main app.

const openPip = async () => {
  const w = await window.documentPictureInPicture!.requestWindow({ width: 260, height: 300 });

  // The new window starts with an empty document: copy our styles over
  [...document.styleSheets].forEach((s) => {
    try {
      const st = w.document.createElement("style");
      st.textContent = [...s.cssRules].map((r) => r.cssText).join("\n");
      w.document.head.appendChild(st);
    } catch {
      // cross-origin stylesheet: link it instead
      if (s.href) {
        const l = w.document.createElement("link");
        l.rel = "stylesheet"; l.href = s.href;
        w.document.head.appendChild(l);
      }
    }
  });

  w.addEventListener("pagehide", () => setPip(null)); // user closed it
  setPip(w);
};

// ...in the JSX:
{pip && createPortal(<MiniPet />, pip.document.body)}

That's really it. Feeding the pet in the floating window updates the same React state as the main tab, timers keep running, and CSS animations work because the styles were copied.

Fallback: Firefox/Safari don't support it yet, so I fall back to window.open("", "deskling", "popup,width=260,height=320") — not always-on-top, but the same portal approach works.

Real-time decay without a server tick

Pet stats (food, joy, energy, clean) decay in real time, even when the tab is closed. Instead of a cron job, the pet stores lastTick and every load/second applies the elapsed time:

export function tick(p: Pet, now = Date.now()): Pet {
  const h = Math.max(0, (now - p.lastTick) / 3600000); // hours elapsed
  return {
    ...p,
    lastTick: now,
    hunger: clamp(p.hunger - 4 * h),
    clean: clamp(p.clean - 2.5 * h),
    happy: clamp(p.happy - (p.hunger < 30 ? 6 : 3) * h),
    energy: p.sleeping ? clamp(p.energy + 25 * h) : clamp(p.energy - 3 * h),
  };
}

Same for the focus timer: I store the session's end timestamp rather than counting seconds, so it survives background-tab throttling.

No image assets

All four pets (a rice-cake cat, a tiny dragon, a ghost and a leaf blob) are inline SVG with CSS keyframes — blinking eyes are just scaleY(.1) at 95% of a 4.5s loop, wings flap with rotate on alternate. Mood changes swap the eye/mouth paths. The whole app ships zero PNGs.

Storage

Guest mode lives in localStorage. Optional accounts use Next.js route handlers + a private Vercel Blob store (one JSON per user/pet, scrypt-hashed passwords, HMAC-signed cookie). Plenty for a hobby game and zero database setup.

Try it

👉 deskling.vercel.app — hatch a pet, start a 25-min focus session, hit Pop out, and go back to work. It's also on itch.io.

I'd love feedback: is "your pet only grows when you focus" motivating, or does it make you feel guilty? 😅