supabase-as-a-service: Skill for Claude Code

SupaNet public table write-forms

How to build a form that an anonymous visitor fills out and it saves one row into a SupaNet user table (the "Tables" feature), embedded inside a shared HTML artifact.

The #1 gotcha: the artifact sandbox blocks native <form> submits

SupaNet artifacts render inside ArtifactFrame with sandbox="allow-scripts" and no allow-same-origin and no allow-forms (opaque origin — deliberate, so user HTML never gets credentials). Consequence:

• A type="submit" button inside a real <form> is blocked by Chromium and Firefox before your submit handler runs. Console shows: Blocked form submission because the form's frame is sandboxed and the 'allow-forms' permission is not set. Safari is lenient and lets it through.
• This is the usual cause of "works in Safari, not Chrome/Firefox." It is NOT a CORS problem — the form-submit endpoint already returns correct CORS.

Rule: never rely on native form submission

Use a plain <button type="button"> and bind a click handler. Do not use a submit event, type="submit", or form.requestSubmit(). (Inputs can still live inside a <form> for layout/validation; just don't submit it natively.)

The #2 gotcha: use real CORS and READ the response

The endpoint supports normal CORS (Access-Control-Allow-Origin: *, handles the OPTIONS preflight, returns JSON on success and error). So:

• Use mode: 'cors' (the default) and Content-Type: application/json.
• Read the response (r.ok, r.json()) to show real success/failure.
• Never use mode: 'no-cors', text/plain, keepalive, or navigator.sendBeacon. Those make an opaque, unreadable response, so the page reports "sent" even when the row was never saved — hiding the real failure above.

The endpoint contract

POST https://<project-ref>.supabase.co/functions/v1/form-submit

Body:     { "token": "<form token>", "values": { "<column_key>": <value>, ... } }
Success:  200 { "ok": true, "id": "<row id>" }
Error:    400 { "error": "..." }   (validation)   404 { "error": "This form is not available." }   429 (rate limited)