@plutocms/supabase 0.10.0 → 0.11.1

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,157 @@
-import NavbarAdminProvider from '../components/navbar/NavbarAdminProvider.vue'
-import SettingsGeneralPanel from '../components/settings/SettingsGeneralPanel.vue'
+import { defineAsyncComponent } from 'vue'
+
+// The three components load on demand. They stay out of the entry chunk. Core
+// shows a skeleton while each chunk loads.
+const AuthSignIn = defineAsyncComponent(
+  () => import('../components/auth/AuthSignIn.vue')
+)
+const MigrationsBanner = defineAsyncComponent(
+  () => import('../components/migrations/MigrationsBanner.vue')
+)
+const SettingsGeneralPanel = defineAsyncComponent(
+  () => import('../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 fetchSetupState(): Promise<SetupState> {
+    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
+  }
+
+  // On a cold load of an admin path, the request starts here, at plugin setup.
+  // The guard then awaits a request that is already in flight. The guard takes
+  // this promise once, so a later navigation reads the state again.
+  let earlyState: Promise<SetupState> | null =
+    import.meta.client &&
+    !setupDone.value &&
+    /^\/admin(?:\/|$)/.test(window.location.pathname)
+      ? fetchSetupState()
+      : null
+
+  async function readSetupState(): Promise<SetupState> {
+    if (setupDone.value) {
+      return 'done'
+    }
+
+    const early = earlyState
+    earlyState = null
+
+    return early ?? fetchSetupState()
+  }
+
+  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 +175,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()
       },
     },