@plutocms/supabase 0.2.2 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [0.4.0](https://github.com/plutocms/supabase/compare/v0.3.0...v0.4.0) (2026-09-11)
+
+
+### Features
+
+* **migrations:** harden SQL splitter and add a versioned ledger shape ([#45](https://github.com/plutocms/supabase/issues/45)) ([f6e54a6](https://github.com/plutocms/supabase/commit/f6e54a6d87ae12c197e467c6d271793ce0ae4b7f))
+* **migrations:** versioned per-file migration engine ([#46](https://github.com/plutocms/supabase/issues/46)) ([2e39d12](https://github.com/plutocms/supabase/commit/2e39d1255ada616ae55894bc2d363eb710d1a8dd))
+
+
+### Bug Fixes
+
+* close setup-wizard RCE, signup privilege escalation, and unguarded admin routes ([#43](https://github.com/plutocms/supabase/issues/43)) ([81c3c7e](https://github.com/plutocms/supabase/commit/81c3c7eb7c2dfa80b426d91d0330176298316be4))
+* **deps:** move @nuxt/eslint to dependencies ([#42](https://github.com/plutocms/supabase/issues/42)) ([11e5b1e](https://github.com/plutocms/supabase/commit/11e5b1eac80436af85a70252d25e22bda8bc3be2))
+* **navbar:** hide admin navbar on public auth pages ([f9b2a9e](https://github.com/plutocms/supabase/commit/f9b2a9e8db7c83f89c842565e359f794fb700143))
+* **types:** drop media.product_id from the committed type snapshot ([#44](https://github.com/plutocms/supabase/issues/44)) ([6b21506](https://github.com/plutocms/supabase/commit/6b215064c4f8538af097b71b4b5f1567de1d585e))
+
+## [0.3.0](https://github.com/plutocms/supabase/compare/v0.2.2...v0.3.0) (2026-09-10)
+
+
+### Features
+
+* **migrations:** detect and apply pending layer schemas ([b7f0785](https://github.com/plutocms/supabase/commit/b7f0785838f65dcbf9cb22fb3d21307c0819f70b))
+
+
+### Bug Fixes
+
+* **setup:** apply layer schemas when the wizard completes ([f29b2aa](https://github.com/plutocms/supabase/commit/f29b2aae4f8b6c5211f157ad349e0566df57c5cc))
+
 ## [0.2.2](https://github.com/plutocms/supabase/compare/v0.2.1...v0.2.2) (2026-09-10)
 
 

package/FEATURES.md

@@ -5,3 +5,6 @@ with full detail, so this file stays short.
 
 See the workspace-level `CLAUDE.md` (one directory up) for the delegation, writing, and git
 policies shared by every project here.
+
+- Layer migrations: apply pending, versioned, per-file database migrations from the admin UI,
+  after initial setup. @.claude/skills/layer-migrations/SKILL.md

package/app/components/EnvPersistWarning.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+// Shown when a migration (or the setup wizard) applied successfully but
+// could not write DATABASE_URL to .env — see server/utils/env-file.ts for
+// why this can happen (process.cwd() may not be the project root in a
+// production build).
+//
+// `connectionString` is never sent here from the server — it is the value
+// the admin already typed into this page's own form. Showing it back to
+// the same browser that just typed it does not violate the "never send it
+// back" rule that applies to the server's response; it is only saying it
+// out loud so the admin can finish the one manual step themselves.
+const props = defineProps<{
+  connectionString: string
+}>()
+
+const toast = useToast()
+
+const envLine = computed(() => `DATABASE_URL="${props.connectionString}"`)
+
+async function copyEnvLine() {
+  try {
+    await navigator.clipboard.writeText(envLine.value)
+
+    toast.add({
+      title: 'Copied',
+      description: 'The DATABASE_URL line is on your clipboard.',
+      icon: 'lucide:check-circle',
+      color: 'success',
+    })
+  } catch {
+    toast.add({
+      title: 'Could not copy',
+      description: 'Select and copy the line by hand instead.',
+      icon: 'lucide:circle-x',
+      color: 'error',
+    })
+  }
+}
+</script>
+
+<template>
+  <UAlert
+    color="warning"
+    variant="outline"
+    icon="lucide:triangle-alert"
+    title="Connection string not saved automatically"
+  >
+    <template #description>
+      <div class="flex flex-col gap-y-3">
+        <p>
+          The database change already succeeded. Pluto could not write
+          <code>DATABASE_URL</code> to your project's
+          <code>.env</code> file, so it will ask again next time unless you
+          add it by hand:
+        </p>
+
+        <ol class="list-inside list-decimal">
+          <li>Open (or create) <code>.env</code> in your project's root folder.</li>
+          <li>Add this line. Replace any existing <code>DATABASE_URL</code> line with it.</li>
+          <li>Restart the server.</li>
+        </ol>
+
+        <div class="flex items-center gap-x-2">
+          <code
+            class="bg-muted grow overflow-x-auto rounded-md px-2 py-1.5 text-xs whitespace-nowrap"
+          >
+            {{ envLine }}
+          </code>
+
+          <UButton
+            icon="lucide:copy"
+            variant="soft"
+            color="neutral"
+            size="sm"
+            aria-label="Copy the DATABASE_URL line"
+            @click="copyEnvLine"
+          />
+        </div>
+      </div>
+    </template>
+  </UAlert>
+</template>

package/app/components/migrations/MigrationsBanner.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Renders nothing when there is no logged-in admin (status reads as null)
+// or when no layer is pending. See `useMigrations` for the 401/403 handling.
+const { status, pendingCount } = useMigrations()
+
+const title = computed(() =>
+  pendingCount.value === 1
+    ? '1 layer needs a database migration'
+    : `${pendingCount.value} layers need a database migration`
+)
+</script>
+
+<template>
+  <UAlert
+    v-if="status && pendingCount > 0"
+    :title="title"
+    color="warning"
+    variant="subtle"
+    icon="lucide:triangle-alert"
+  >
+    <template #description>
+      <ULink to="/admin/migrations" class="underline"> Go to Migrations </ULink
+      >.
+    </template>
+  </UAlert>
+</template>

package/app/components/navbar/NavbarAdminProvider.vue

@@ -3,6 +3,10 @@ const route = useRoute()
 const session = useSupabaseSession()
 
 const shouldShowNavbar = computed(() => {
+  if (allowedUnauthenticatedPaths.includes(route.path)) {
+    return false
+  }
+
   return route.path === '/admin'
     || route.path.startsWith('/admin/')
     || Boolean(session.value)

package/app/composables/auth.ts

@@ -16,6 +16,17 @@ interface PlutoUserMetadata {
   [key: string]: unknown
 }
 
+// Admin paths that a signed-out visitor may load. Keep this list in sync
+// with every public `/admin/*` page.
+export const allowedUnauthenticatedPaths: RouteLocationRaw[] = [
+  '/admin/login',
+  '/admin/signup',
+  '/admin/confirm',
+  '/admin/setup',
+  '/admin/forgot-password',
+  '/admin/update-password',
+]
+
 export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   const toast = useToast()
 
@@ -50,15 +61,6 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   const isLoggedIn = computed<boolean>(() => !!supabaseSession.value)
   const isSubmitting = ref<boolean>(false)
 
-  const allowedUnauthenticatedPaths: RouteLocationRaw[] = [
-    '/admin/login',
-    '/admin/signup',
-    '/admin/confirm',
-    '/admin/setup',
-    '/admin/forgot-password',
-    '/admin/update-password',
-  ]
-
   interface LoginForm {
     email: string
     password: string

package/app/composables/migrations.ts

@@ -0,0 +1,87 @@
+export interface MigrationFileResult {
+  layerName: string
+  migrationName: string
+  status: 'applied' | 'skipped' | 'failed'
+  error?: string
+}
+
+export interface LayerStatus {
+  layerName: string
+  applied: string[]
+  pending: string[]
+}
+
+interface MigrationsStatusResponse {
+  success: boolean
+  layers: LayerStatus[]
+  pending: string[]
+  applied: string[]
+  discovered: string[]
+  pendingFileCount: number
+  hasConnection: boolean
+  needsConnectionString: boolean
+}
+
+interface RunMigrationsResponse {
+  success: boolean
+  needsConnectionString?: boolean
+  results?: MigrationFileResult[]
+  persisted?: boolean
+  message?: string
+  error?: string
+}
+
+/**
+ * Reads and applies pending migrations, for admin-only pages and the
+ * admin-shell banner.
+ *
+ * `useFetch` keys the request as `pluto-migrations-status`, so every
+ * caller in the app shares the same request and state instead of each
+ * firing its own.
+ *
+ * A 401 or 403 from the status endpoint means the visitor is not a
+ * logged-in admin. `status` reads as `null` in that case, so a caller
+ * should show nothing — an unauthenticated visitor must see no trace of
+ * this feature. Only call this composable from admin pages/components.
+ */
+export function useMigrations() {
+  const {
+    data,
+    error,
+    status: fetchStatus,
+    refresh,
+  } = useFetch<MigrationsStatusResponse>('/api/migrations/status', {
+    key: 'pluto-migrations-status',
+  })
+
+  const status = computed(() => {
+    if (error.value) {
+      return null
+    }
+
+    return data.value ?? null
+  })
+
+  // Layer-level count — a layer with any pending file counts once here.
+  // See `status.pendingFileCount` for the per-file count.
+  const pendingCount = computed(() => status.value?.pending.length ?? 0)
+
+  async function runMigrations(connectionString?: string) {
+    const result = await $fetch<RunMigrationsResponse>('/api/migrations/run', {
+      method: 'POST',
+      body: connectionString ? { connectionString } : undefined,
+    })
+
+    await refresh()
+
+    return result
+  }
+
+  return {
+    status,
+    fetchStatus,
+    pendingCount,
+    refresh,
+    runMigrations,
+  }
+}

package/app/middleware/setup-check.ts

@@ -20,7 +20,14 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
         return navigateTo('/admin/setup')
       }
     } else {
-      // Setup already done — block access to setup page
+      // Setup already done — block access to setup page.
+      //
+      // Keep this redirect even after layer migrations move to
+      // /admin/migrations. The setup page prompts an unauthenticated
+      // visitor for a raw database connection string, and it is safe only
+      // because it is unreachable once setup is done. Reopening it for a
+      // routine layer addition would let an anonymous visitor submit a
+      // connection string to the server.
       if (to.path === '/admin/setup') {
         return navigateTo('/admin/login')
       }

package/app/pages/admin/migrations.vue

@@ -0,0 +1,344 @@
+<script setup lang="ts">
+useHead({
+  title: 'Migrations',
+})
+
+const config = useRuntimeConfig()
+const projectId = config.public.supabase.url
+  ?.split('https://')[1]
+  ?.split('.')[0]
+
+const toast = useToast()
+
+const { status, fetchStatus, pendingCount, refresh, runMigrations } =
+  useMigrations()
+
+const isDev = import.meta.dev
+
+// Only the layers that actually have a pending, or applied, file — used to
+// render per-file detail under each layer below.
+const pendingLayers = computed(
+  () => status.value?.layers.filter((layer) => layer.pending.length > 0) ?? []
+)
+const appliedLayers = computed(
+  () => status.value?.layers.filter((layer) => layer.applied.length > 0) ?? []
+)
+
+const connectionForm = ref({
+  connectionString: '',
+  password: '',
+})
+
+const isRunning = ref(false)
+const lastRun = ref<Awaited<ReturnType<typeof runMigrations>> | null>(null)
+// Kept only in this page's own memory, only to show the manual .env step if
+// persisting fails — see EnvPersistWarning.vue. Never sent anywhere new.
+const lastConnectionString = ref('')
+
+/**
+ * Polls the status endpoint until it responds again, or gives up.
+ *
+ * Used only to wait out a dev-server restart (see the comment in the
+ * `catch` block of `applyMigrations`) — the server is expected to come
+ * back within a few seconds, not to be actually down.
+ */
+async function waitForServerAndRefresh(): Promise<boolean> {
+  const maxAttempts = 15
+  const delayMs = 2000
+
+  for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+    await new Promise((resolve) => setTimeout(resolve, delayMs))
+    await refresh()
+
+    if (status.value) {
+      return true
+    }
+  }
+
+  return false
+}
+
+async function applyMigrations(useForm: boolean) {
+  isRunning.value = true
+  lastRun.value = null
+
+  try {
+    const connectionString = useForm
+      ? connectionForm.value.connectionString.replace(
+          '[YOUR-PASSWORD]',
+          encodeURIComponent(connectionForm.value.password)
+        )
+      : undefined
+
+    if (connectionString) {
+      lastConnectionString.value = connectionString
+    }
+
+    const result = await runMigrations(connectionString)
+    lastRun.value = result
+
+    if (result.success === false) {
+      toast.add({
+        title: 'Could not apply migrations',
+        description: result.needsConnectionString
+          ? 'A database connection string is required.'
+          : undefined,
+        icon: 'lucide:circle-x',
+        color: 'error',
+      })
+
+      return
+    }
+
+    toast.add({
+      title: 'Migrations applied',
+      icon: 'lucide:check-circle',
+      color: 'success',
+    })
+  } catch (error) {
+    // Saving a first-time connection string writes DATABASE_URL to .env
+    // (server/utils/env-file.ts). In dev, Nuxt restarts the whole dev
+    // server whenever .env changes, so this request's connection can drop
+    // before its response arrives, even though the migration itself
+    // already succeeded server-side. A dropped connection has no HTTP
+    // status code — a real error response would — so use that to tell the
+    // two apart, and only in dev, where the restart is expected at all.
+    const hasStatusCode =
+      typeof error === 'object' &&
+      error !== null &&
+      'statusCode' in error &&
+      (error as { statusCode?: unknown }).statusCode !== undefined
+
+    if (isDev && useForm && !hasStatusCode) {
+      toast.add({
+        title: 'Dev server restarting',
+        description:
+          'Saving a new connection string restarts the dev server. Reconnecting…',
+        icon: 'lucide:refresh-cw',
+        color: 'info',
+      })
+
+      const recovered = await waitForServerAndRefresh()
+
+      toast.add(
+        recovered
+          ? {
+              title: 'Reconnected',
+              description:
+                pendingCount.value === 0
+                  ? 'The server is back. All migrations were applied.'
+                  : `The server is back. ${pendingCount.value} layer(s) still pending — check above.`,
+              icon: 'lucide:check-circle',
+              color: 'success',
+            }
+          : {
+              title: 'Still reconnecting',
+              description:
+                'The dev server is taking longer than expected. Reload this page in a moment.',
+              icon: 'lucide:triangle-alert',
+              color: 'warning',
+            }
+      )
+
+      return
+    }
+
+    if (import.meta.dev) {
+      console.error('Error applying migrations:', error)
+    }
+
+    toast.add({
+      title: 'Error applying migrations',
+      description: 'Please check the console for more details.',
+      icon: 'lucide:circle-x',
+      color: 'error',
+    })
+  } finally {
+    isRunning.value = false
+  }
+}
+</script>
+
+<template>
+  <AdminView>
+    <h1 class="text-3xl font-bold lg:text-4xl">Migrations</h1>
+
+    <div v-if="fetchStatus === 'pending'" class="flex items-center gap-x-2">
+      <Icon name="svg-spinners:ring-resize" />
+      <span>Loading migration status…</span>
+    </div>
+
+    <template v-else-if="status">
+      <UCard>
+        <div class="flex flex-col gap-y-6">
+          <UAlert
+            v-if="pendingCount === 0"
+            color="success"
+            variant="outline"
+            icon="lucide:check-circle"
+            title="Everything is up to date"
+            description="No layer needs a database migration."
+          />
+
+          <div v-else class="flex flex-col gap-y-2">
+            <h2 class="font-semibold">
+              Pending layers ({{ status.pending.length }})
+            </h2>
+            <ul class="flex flex-col gap-y-2 text-sm">
+              <li v-for="layer in pendingLayers" :key="layer.layerName">
+                <span class="font-mono">{{ layer.layerName }}</span>
+                <ul class="list-inside list-disc pl-4">
+                  <li v-for="fileName in layer.pending" :key="fileName">
+                    {{ fileName }}
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+
+          <div v-if="status.applied.length" class="flex flex-col gap-y-2">
+            <h2 class="font-semibold">
+              Applied layers ({{ status.applied.length }})
+            </h2>
+            <ul class="flex flex-col gap-y-2 text-sm">
+              <li v-for="layer in appliedLayers" :key="layer.layerName">
+                <span class="font-mono">{{ layer.layerName }}</span>
+                <ul class="list-inside list-disc pl-4">
+                  <li v-for="fileName in layer.applied" :key="fileName">
+                    {{ fileName }}
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+
+          <template v-if="pendingCount > 0">
+            <UForm
+              v-if="status.needsConnectionString"
+              class="flex flex-col gap-y-4"
+              @submit="applyMigrations(true)"
+            >
+              <UFormField label="Supabase connection string" required>
+                <UInput
+                  v-model="connectionForm.connectionString"
+                  :disabled="isRunning"
+                  placeholder="postgresql://"
+                  required
+                />
+
+                <template #help>
+                  You can find your connection string
+                  <ULink
+                    :to="`https://supabase.com/dashboard/project/${projectId}/database/settings?showConnect=true&connectTab=direct&method=transaction`"
+                    target="_blank"
+                    class="underline"
+                    external
+                  >
+                    clicking here </ULink
+                  >.
+                </template>
+              </UFormField>
+
+              <UFormField label="Database password" required>
+                <UInput
+                  v-model="connectionForm.password"
+                  :disabled="isRunning"
+                  type="password"
+                  placeholder="• • • • •"
+                  required
+                />
+              </UFormField>
+
+              <UAlert
+                color="secondary"
+                icon="lucide:badge-info"
+                variant="outline"
+              >
+                <template #description>
+                  Your password is created when you create your Supabase
+                  project. You can change it in the
+                  <ULink
+                    to="https://supabase.com/dashboard/project/_/database/settings"
+                    target="_blank"
+                  >
+                    Supabase Database Settings </ULink
+                  >.
+                </template>
+              </UAlert>
+
+              <UAlert
+                color="warning"
+                variant="outline"
+                title="Why do I need to provide a database password?"
+                icon="lucide:info"
+                description="It is used once to open a direct PostgreSQL connection and run the pending layer schemas. It is then written to .env on the server, so future migrations need no prompt. It is never stored anywhere else, and never sent back to your browser."
+              />
+
+              <UAlert
+                v-if="isDev"
+                color="info"
+                variant="outline"
+                title="This restarts the dev server"
+                icon="lucide:refresh-cw"
+                description="Saving a new connection string writes it to .env. In development, that restarts the server automatically. The page will briefly show a reconnecting message — this is expected, not an error."
+              />
+
+              <div class="flex">
+                <UButton
+                  :loading="isRunning"
+                  :disabled="isRunning"
+                  type="submit"
+                  icon="lucide:database"
+                  class="w-full justify-center sm:w-auto"
+                >
+                  Apply pending migrations
+                </UButton>
+              </div>
+            </UForm>
+
+            <div v-else class="flex">
+              <UButton
+                :loading="isRunning"
+                :disabled="isRunning"
+                icon="lucide:database"
+                class="w-full justify-center sm:w-auto"
+                @click="applyMigrations(false)"
+              >
+                Apply pending migrations
+              </UButton>
+            </div>
+          </template>
+        </div>
+      </UCard>
+
+      <UCard v-if="lastRun">
+        <div class="flex flex-col gap-y-4">
+          <h2 class="font-semibold">Last run</h2>
+
+          <EnvPersistWarning
+            v-if="lastRun.success && lastRun.persisted === false"
+            :connection-string="lastConnectionString"
+          />
+
+          <ul
+            v-if="lastRun.results?.length"
+            class="flex flex-col gap-y-1 text-sm"
+          >
+            <li
+              v-for="result in lastRun.results"
+              :key="`${result.layerName}/${result.migrationName}`"
+            >
+              <span class="font-mono"
+              >{{ result.layerName }}/{{ result.migrationName }}</span
+              >
+              — {{ result.status }}
+              <span v-if="result.error" class="text-error">
+                : {{ result.error }}</span
+              >
+            </li>
+          </ul>
+        </div>
+      </UCard>
+    </template>
+  </AdminView>
+</template>