@plutocms/supabase 0.10.0 → 0.11.0

package/app/pages/admin/(auth)/signup.vue

@@ -70,130 +70,127 @@ async function submitForm() {
 </script>
 
 <template>
-  <div class="grid min-h-dvh place-items-center p-4">
-    <UCard class="w-full max-w-120">
-      <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
-        <div class="text-center space-y-4">
-          <hgroup class="flex flex-col gap-y-1">
-            <span class="text-5xl">
-              <UIcon name="lucide:mail-warning" class="inline-block" />
-            </span>
-
-            <h1 class="text-3xl font-bold">{{ t('supabase.auth.signup.almostThere') }}</h1>
-          </hgroup>
-
-          <p>
-            {{ t('supabase.auth.signup.verificationSent') }}
-          </p>
-
-          <UAlert icon="lucide:check" color="success" variant="outline">
-            <template #description>
-              {{ t('supabase.auth.signup.closePage') }}
-            </template>
-          </UAlert>
-
-          <UAlert
-            icon="lucide:alert-triangle"
-            color="warning"
-            variant="outline"
-          >
-            <template #description>
-              {{ t('supabase.auth.signup.checkSpam') }}
-            </template>
-          </UAlert>
-        </div>
+  <PlutoAdminAuthCard
+    :title="isEmailVerificationMessageVisible ? t('supabase.auth.signup.almostThere') : t('supabase.auth.signup.title')"
+  >
+    <div v-if="isEmailVerificationMessageVisible" class="space-y-6 py-10">
+      <div class="text-center space-y-4">
+        <hgroup class="flex flex-col gap-y-1">
+          <span class="text-5xl">
+            <UIcon name="lucide:mail-warning" class="inline-block" />
+          </span>
+        </hgroup>
+
+        <p>
+          {{ t('supabase.auth.signup.verificationSent') }}
+        </p>
+
+        <UAlert icon="lucide:check" color="success" variant="outline">
+          <template #description>
+            {{ t('supabase.auth.signup.closePage') }}
+          </template>
+        </UAlert>
+
+        <UAlert
+          icon="lucide:alert-triangle"
+          color="warning"
+          variant="outline"
+        >
+          <template #description>
+            {{ t('supabase.auth.signup.checkSpam') }}
+          </template>
+        </UAlert>
       </div>
+    </div>
+
+    <form v-else @submit.prevent="submitForm">
+      <div class="flex flex-col gap-y-6">
 
-      <form v-else @submit.prevent="submitForm">
-        <div class="flex flex-col gap-y-6">
-          <h1 class="text-3xl font-bold">{{ t('supabase.auth.signup.title') }}</h1>
+        <UFormField :label="t('supabase.auth.fields.email')" required>
+          <UInput
+            v-model="form.email"
+            type="email"
+            placeholder="victor@example.com"
+            class="w-full"
+            required
+          />
+        </UFormField>
 
-          <UFormField :label="t('supabase.auth.fields.email')" required>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <UFormField :label="t('supabase.auth.fields.username')" required>
             <UInput
-              v-model="form.email"
-              type="email"
-              placeholder="victor@example.com"
+              v-model="form.username"
+              :placeholder="t('supabase.auth.signup.usernamePlaceholder')"
               class="w-full"
+              minlength="3"
               required
             />
           </UFormField>
 
-          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-            <UFormField :label="t('supabase.auth.fields.username')" required>
-              <UInput
-                v-model="form.username"
-                :placeholder="t('supabase.auth.signup.usernamePlaceholder')"
-                class="w-full"
-                minlength="3"
-                required
-              />
-            </UFormField>
-
-            <UFormField :label="t('supabase.auth.fields.displayName')" required>
-              <UInput
-                v-model="form.display_name"
-                :placeholder="t('supabase.auth.signup.displayNamePlaceholder')"
-                class="w-full"
-                required
-              />
-            </UFormField>
-          </div>
-
-          <UFormField
-            :error="!passwordMatch"
-            :label="t('supabase.auth.fields.password')"
-            required
-          >
+          <UFormField :label="t('supabase.auth.fields.displayName')" required>
             <UInput
-              v-model="form.password"
-              placeholder="••••"
+              v-model="form.display_name"
+              :placeholder="t('supabase.auth.signup.displayNamePlaceholder')"
               class="w-full"
-              type="password"
               required
             />
           </UFormField>
+        </div>
 
-          <UFormField
-            :error="!passwordMatch"
-            :label="t('supabase.auth.fields.confirmPassword')"
+        <UFormField
+          :error="!passwordMatch"
+          :label="t('supabase.auth.fields.password')"
+          required
+        >
+          <UInput
+            v-model="form.password"
+            placeholder="••••"
+            class="w-full"
+            type="password"
             required
-          >
-            <UInput
-              v-model="form.confirm_password"
-              placeholder="••••"
-              class="w-full"
-              type="password"
-              required
-            />
+          />
+        </UFormField>
+
+        <UFormField
+          :error="!passwordMatch"
+          :label="t('supabase.auth.fields.confirmPassword')"
+          required
+        >
+          <UInput
+            v-model="form.confirm_password"
+            placeholder="••••"
+            class="w-full"
+            type="password"
+            required
+          />
+        </UFormField>
+
+        <div
+          class="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+        >
+          <UFormField>
+            <UButton
+              to="/admin/login"
+              icon="lucide:arrow-left"
+              variant="link"
+              class="px-0"
+            >
+              {{ t('supabase.auth.backToLogin') }}
+            </UButton>
           </UFormField>
 
-          <div
-            class="flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
-          >
-            <UFormField>
-              <UButton
-                to="/admin/login"
-                icon="lucide:arrow-left"
-                variant="link"
-                class="px-0"
-              >
-                {{ t('supabase.auth.backToLogin') }}
-              </UButton>
-            </UFormField>
-
-            <UFormField>
-              <UButton
-                :disabled="isSubmitting || !passwordMatch"
-                :loading="isSubmitting"
-                type="submit"
-                class="w-full justify-center sm:w-auto"
-              >
-                {{ t('supabase.auth.signup.submit') }}
-              </UButton>
-            </UFormField>
-          </div>
+          <UFormField>
+            <UButton
+              :disabled="isSubmitting || !passwordMatch"
+              :loading="isSubmitting"
+              type="submit"
+              class="w-full justify-center sm:w-auto"
+            >
+              {{ t('supabase.auth.signup.submit') }}
+            </UButton>
+          </UFormField>
         </div>
-      </form>
-    </UCard>
-  </div>
+      </div>
+    </form>
+  </PlutoAdminAuthCard>
 </template>

package/app/pages/admin/(auth)/update-password.vue

@@ -21,7 +21,7 @@ onMounted(async () => {
   }
 })
 
-const { isSubmitting, updatePassword } = await useAuth()
+const { isSubmitting, updatePassword } = useAuth()
 
 const form = ref({
   password: '',
@@ -50,91 +50,84 @@ async function submitForm() {
 </script>
 
 <template>
-  <div class="grid min-h-dvh place-items-center p-4">
-    <UCard class="w-full max-w-100">
-      <div v-if="isPasswordUpdated" class="space-y-6 py-10">
-        <div class="text-center space-y-4">
-          <hgroup class="flex flex-col gap-y-1">
-            <span class="text-5xl">
-              <UIcon name="lucide:lock-keyhole" class="inline-block" />
-            </span>
-
-            <h1 class="text-3xl font-bold">{{ t('supabase.auth.update.doneTitle') }}</h1>
-          </hgroup>
-
-          <p>
-            {{ t('supabase.auth.update.doneDescription') }}
-          </p>
-
-          <div class="flex items-center justify-center">
-            <UButton to="/admin/login" color="primary" icon="lucide:log-in">
-              {{ t('supabase.auth.update.goToLogin') }}
-            </UButton>
-          </div>
+  <PlutoAdminAuthCard
+    :title="isPasswordUpdated ? t('supabase.auth.update.doneTitle') : t('supabase.auth.update.title')"
+    :description="isPasswordUpdated ? undefined : t('supabase.auth.update.description')"
+  >
+    <div v-if="isPasswordUpdated" class="space-y-6 py-10">
+      <div class="text-center space-y-4">
+        <hgroup class="flex flex-col gap-y-1">
+          <span class="text-5xl">
+            <UIcon name="lucide:lock-keyhole" class="inline-block" />
+          </span>
+        </hgroup>
+
+        <p>
+          {{ t('supabase.auth.update.doneDescription') }}
+        </p>
+
+        <div class="flex items-center justify-center">
+          <UButton to="/admin/login" color="primary" icon="lucide:log-in">
+            {{ t('supabase.auth.update.goToLogin') }}
+          </UButton>
         </div>
       </div>
-
-      <form v-else @submit.prevent="submitForm">
-        <div class="flex flex-col gap-y-6">
-          <hgroup class="flex flex-col gap-y-1">
-            <h1 class="text-3xl font-bold">{{ t('supabase.auth.update.title') }}</h1>
-            <p class="text-sm text-muted">
-              {{ t('supabase.auth.update.description') }}
-            </p>
-          </hgroup>
-
-          <UFormField :label="t('supabase.auth.update.newPassword')">
-            <UInput
-              v-model="form.password"
-              placeholder="••••"
-              type="password"
-              class="w-full"
-              autocomplete="new-password"
-              required
-            />
+    </div>
+
+    <form v-else @submit.prevent="submitForm">
+      <div class="flex flex-col gap-y-6">
+
+        <UFormField :label="t('supabase.auth.update.newPassword')">
+          <UInput
+            v-model="form.password"
+            placeholder="••••"
+            type="password"
+            class="w-full"
+            autocomplete="new-password"
+            required
+          />
+        </UFormField>
+
+        <UFormField
+          :error="
+            form.confirm_password && !passwordMatch
+              ? t('supabase.auth.passwordMismatch')
+              : undefined
+          "
+          :label="t('supabase.auth.update.confirmNewPassword')"
+        >
+          <UInput
+            v-model="form.confirm_password"
+            placeholder="••••"
+            type="password"
+            class="w-full"
+            autocomplete="new-password"
+            required
+          />
+        </UFormField>
+
+        <div
+          class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
+        >
+          <UFormField>
+            <UButton
+              :loading="isSubmitting"
+              :disabled="!passwordMatch"
+              type="submit"
+              icon="lucide:lock-keyhole"
+              class="w-full justify-center sm:w-auto"
+            >
+              {{ t('supabase.auth.update.submit') }}
+            </UButton>
           </UFormField>
 
-          <UFormField
-            :error="
-              form.confirm_password && !passwordMatch
-                ? t('supabase.auth.passwordMismatch')
-                : undefined
-            "
-            :label="t('supabase.auth.update.confirmNewPassword')"
-          >
-            <UInput
-              v-model="form.confirm_password"
-              placeholder="••••"
-              type="password"
-              class="w-full"
-              autocomplete="new-password"
-              required
-            />
+          <UFormField>
+            <UButton variant="link" to="/admin/login" class="px-0">
+              {{ t('supabase.auth.backToLogin') }}
+            </UButton>
           </UFormField>
-
-          <div
-            class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-x-4"
-          >
-            <UFormField>
-              <UButton
-                :loading="isSubmitting"
-                :disabled="!passwordMatch"
-                type="submit"
-                icon="lucide:lock-keyhole"
-                class="w-full justify-center sm:w-auto"
-              >
-                {{ t('supabase.auth.update.submit') }}
-              </UButton>
-            </UFormField>
-
-            <UFormField>
-              <UButton variant="link" to="/admin/login" class="px-0">
-                {{ t('supabase.auth.backToLogin') }}
-              </UButton>
-            </UFormField>
-          </div>
         </div>
-      </form>
-    </UCard>
-  </div>
+      </div>
+    </form>
+  </PlutoAdminAuthCard>
 </template>

package/app/pages/admin/setup.vue

@@ -2,7 +2,6 @@
 import type { StepperItem } from '@nuxt/ui'
 
 definePageMeta({
-  middleware: ['setup-check'],
   layout: 'setup',
 })
 

package/app/plugins/pluto-extension.ts

@@ -1,14 +1,130 @@
-import NavbarAdminProvider from '../components/navbar/NavbarAdminProvider.vue'
+import AuthSignIn from '../components/auth/AuthSignIn.vue'
+import MigrationsBanner from '../components/migrations/MigrationsBanner.vue'
 import SettingsGeneralPanel from '../components/settings/SettingsGeneralPanel.vue'
 
 export default defineNuxtPlugin(() => {
   // Read at setup, while the Nuxt context exists. The driver below calls it
   // later, after an await, when the context is gone.
   const errorText = usePlutoErrorText()
+  const supabase = useSupabaseClient()
+  const session = useSupabaseSession()
+  const claims = useSupabaseUser()
+
+  // The site settings that the admin bar shows: the site name and the site
+  // URL. They load in the browser after a sign-in, because the settings read
+  // needs the session cookie. The state starts empty on the server.
+  const siteSettings = useState<Record<string, string>>(
+    'supabase-site-settings',
+    () => ({})
+  )
+  const hasSettingsModified = useState<number>('has_settings_modified')
+
+  async function loadSiteSettings() {
+    try {
+      const response = await $fetch<{ settings: Record<string, string> }>(
+        '/api/settings'
+      )
+      siteSettings.value = response.settings
+    } catch {
+      // The bar then shows the fallback name and the "/" URL.
+    }
+  }
+
+  // The setup guard. A done setup is cached for the session, so the guard
+  // does not fetch on every navigation. A state that is not done is read
+  // again each time.
+  const setupDone = useState<boolean>('supabase-setup-done', () => false)
+
+  async function readSetupState(): Promise<SetupState> {
+    if (setupDone.value) {
+      return 'done'
+    }
+
+    let state: SetupState = 'unknown'
+    try {
+      state = setupStateFromResponse(
+        await $fetch('/api/settings/first_setup')
+      )
+    } catch (error) {
+      if (import.meta.dev) {
+        console.error('Error checking first setup status:', error)
+      }
+    }
+
+    setupDone.value = state === 'done'
+
+    return state
+  }
+
+  if (import.meta.client) {
+    watch(
+      [() => Boolean(session.value), hasSettingsModified],
+      ([signedIn]) => {
+        if (signedIn) {
+          void loadSiteSettings()
+        } else {
+          siteSettings.value = {}
+        }
+      },
+      { immediate: true }
+    )
+  }
 
   definePlutoExtension({
     id: 'supabase',
-    navbar: { id: 'admin-navbar', component: NavbarAdminProvider },
+    // Core renders the navbar, the login page and the route guard from this
+    // driver. See the admin-shell skill in @plutocms/pluto.
+    authDriver: {
+      id: 'supabase-auth',
+      // The JWT claims carry the id (`sub`) and the user metadata.
+      user: () => mapSupabaseUser(claims.value),
+      // The session cookie gives the same answer on the server and in the
+      // first client render, so the bar does not cause a hydration mismatch.
+      loggedIn: () => Boolean(session.value),
+      // The module plugin reads the session before this plugin runs.
+      ready: () => Promise.resolve(),
+      refresh: async () => {
+        try {
+          const { data } = await supabase.auth.getSession()
+          session.value = data.session
+          if (data.session) {
+            const { data: claimsData } = await supabase.auth.getClaims()
+            claims.value = claimsData?.claims ?? null
+          } else {
+            claims.value = null
+          }
+        } catch {
+          // Keep the state as it is when the read fails.
+        }
+      },
+      signOut: async () => {
+        await supabase.auth.signOut()
+        session.value = null
+        claims.value = null
+      },
+      signIn: AuthSignIn,
+      signInTitle: 'supabase.auth.login.title',
+      // The old login page always showed the sign-up link.
+      links: {
+        signUp: '/admin/signup',
+        forgotPassword: '/admin/forgot-password',
+      },
+      publicPaths: SUPABASE_PUBLIC_PATHS,
+      // Core runs this on `/admin/**`, after ready() and before the sign-in
+      // rule, so the first-setup redirect wins over the sign-in redirect.
+      // It never rejects.
+      guard: async (to) => setupRedirect(to.path, await readSetupState()),
+    },
+    // The website title and URL settings. An empty value makes core use its
+    // own fallback (the runtime config name, and "/" for the URL).
+    site: {
+      id: 'supabase-site',
+      name: () => siteSettings.value.website_title,
+      // In development, "View site" opens this dev server, like the old navbar.
+      url: () => (import.meta.dev ? null : siteSettings.value.website_url),
+    },
+    // The pending-migrations notice, shown at the top of the admin pages.
+    adminBanners: [{ id: 'migrations', component: MigrationsBanner }],
     settingsPanels: [
       {
         id: 'general',
@@ -32,11 +148,7 @@ export default defineNuxtPlugin(() => {
           body: patch,
         })
 
-        // NavbarAdmin.vue watches this to refresh its own /api/settings
-        // read (it shows the site's own URL) — the settings page saving
-        // through the new registry must still trigger it, exactly like
-        // the old page did.
-        const hasSettingsModified = useState<number>('has_settings_modified')
+        // The site info above watches this to read the settings again.
         hasSettingsModified.value = Date.now()
       },
     },

package/app/utils/auth-driver.ts

@@ -0,0 +1,110 @@
+// Pure helpers of the supabase auth driver. This file does not use Nuxt
+// auto-imports, so plain Vitest can import it. The `PlutoAuth*` types are
+// global types of the pluto layer.
+/**
+ * The fields of a Supabase user that the driver reads. It fits the JWT claims
+ * (`sub`, `email`, `user_metadata`) and a `User` object (`id`).
+ */
+export interface SupabaseIdentity {
+  sub?: string
+  id?: string
+  email?: string | null
+  user_metadata?: Record<string, unknown> | null
+}
+
+function text(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() !== ''
+    ? value.trim()
+    : undefined
+}
+
+/**
+ * Maps a Supabase user to the user of the admin shell. The name follows the
+ * order of the old navbar: display_name, full_name, name. In the JWT claims,
+ * the user id is `sub`. Returns null when there is no id.
+ */
+export function mapSupabaseUser(
+  source: SupabaseIdentity | null | undefined
+): PlutoAuthUser | null {
+  const id = text(source?.sub) ?? text(source?.id)
+
+  if (!source || !id) {
+    return null
+  }
+
+  const meta = source.user_metadata ?? {}
+
+  return {
+    id,
+    name: text(meta.display_name) ?? text(meta.full_name) ?? text(meta.name),
+    username: text(meta.username),
+    email: text(source.email),
+    avatarUrl: text(meta.avatar_url) ?? text(meta.picture),
+  }
+}
+
+/**
+ * The admin paths that a signed-out visitor may open, with what happens to a
+ * signed-in user. `/admin/login` is always public in core.
+ *
+ * - `signup` and `forgot-password` send a signed-in user to the admin home.
+ * - `confirm` and `update-password` stay open: a recovery or confirm link
+ *   signs the user in, and the page must still show.
+ * - `setup` stays open for the auth guard. The setup guard
+ *   (`guard` in `pluto-extension.ts`) blocks it when the setup is done.
+ */
+export const SUPABASE_PUBLIC_PATHS: PlutoAuthPublicPath[] = [
+  { path: '/admin/signup', signedIn: 'redirect' },
+  { path: '/admin/forgot-password', signedIn: 'redirect' },
+  { path: '/admin/confirm', signedIn: 'allow' },
+  { path: '/admin/update-password', signedIn: 'allow' },
+  { path: '/admin/setup', signedIn: 'allow' },
+]
+
+/** The page that opens after a sign-in with no (safe) redirect. */
+export const SUPABASE_SIGN_IN_FALLBACK = '/admin/home'
+
+/** The setup state that the setup guard reads from `/api/settings/first_setup`. */
+export type SetupState = 'pending' | 'done' | 'unknown'
+
+/**
+ * Reads the answer of `/api/settings/first_setup`. A failed call, or a
+ * response with no `is_first_setup` flag, is `unknown`.
+ */
+export function setupStateFromResponse(data: unknown): SetupState {
+  const response = data as
+    | { success?: boolean, is_first_setup?: boolean }
+    | null
+    | undefined
+
+  if (!response?.success) {
+    return 'unknown'
+  }
+
+  return response.is_first_setup ? 'pending' : 'done'
+}
+
+/**
+ * Decides the setup redirect for an admin path. It gives a path to open, or
+ * undefined to go on.
+ *
+ * - `pending` and `unknown` (the state cannot be read): only the setup page
+ *   is open. Every other admin path goes to `/admin/setup`.
+ * - `done`: the setup page is closed, and goes to the sign-in page.
+ *
+ * Keep the `done` 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.
+ */
+export function setupRedirect(
+  path: string,
+  state: SetupState
+): string | undefined {
+  if (state === 'done') {
+    return path === '/admin/setup' ? '/admin/login' : undefined
+  }
+
+  return path === '/admin/setup' ? undefined : '/admin/setup'
+}