@plutocms/supabase 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.11.1](https://github.com/plutocms/supabase/compare/v0.11.0...v0.11.1) (2026-10-21)
+
+
+### Bug Fixes
+
+* **deps:** use @plutocms/pluto 0.17 ([#91](https://github.com/plutocms/supabase/issues/91)) ([7deeac5](https://github.com/plutocms/supabase/commit/7deeac5379ddaac0317fa457897190c0850e8ffc))
+* **typegen:** keep the PostgREST version block and the app's format ([#90](https://github.com/plutocms/supabase/issues/90)) ([2518c33](https://github.com/plutocms/supabase/commit/2518c33f69fe188e69d93695819d7d3ca19932d7))
+
+
+### Performance Improvements
+
+* **admin:** load the admin components on demand and start the setup check early ([#89](https://github.com/plutocms/supabase/issues/89)) ([f0d36bc](https://github.com/plutocms/supabase/commit/f0d36bc7d46f911522990653cd93ebb523c5a774))
+
+## [0.11.0](https://github.com/plutocms/supabase/compare/v0.10.0...v0.11.0) (2026-10-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **admin:** move the admin shell to the pluto auth driver ([#83](https://github.com/plutocms/supabase/issues/83))
+
+### Features
+
+* **admin:** move the admin shell to the pluto auth driver ([#83](https://github.com/plutocms/supabase/issues/83)) ([52ba78f](https://github.com/plutocms/supabase/commit/52ba78f934255e70a7b5188982bdb83f9fa5f86a))
+
 ## [0.10.0](https://github.com/plutocms/supabase/compare/v0.9.1...v0.10.0) (2026-10-18)
 
 

package/FEATURES.md

@@ -13,6 +13,9 @@ policies shared by every project here.
 - Content adapter: a Supabase/PostgREST-backed `PlutoContentAdapter`, plugging any layer's
   declared content type into `@plutocms/pluto`'s generic content routes.
   @.claude/skills/content-adapter/SKILL.md
+- Auth driver: plugs Supabase sign-in into the admin shell that pluto core owns (navbar, sign-in
+  page, route guard), and keeps the setup guard in the driver.
+  @.claude/skills/auth-driver/SKILL.md
 - Profile language: stores each user's admin language in `profiles.locale`, written through a
   security-definer function, and plugs it into pluto's i18n as a locale driver.
   @.claude/skills/profile-language/SKILL.md

package/README.md

@@ -45,7 +45,16 @@ export default defineNuxtConfig({
 
 This layer provides the following composables:
 
-- `useAuth`: Manage user authentication with Supabase.
+- `useAuth`: Sign in, request a password reset, and update the password, with Supabase.
+
+### Admin shell
+
+Pluto core owns the admin shell: the `/admin` route, the sign-in page, the route guard and the
+top navbar. This layer registers an auth driver, and core renders the shell from it. See
+`.claude/skills/auth-driver/SKILL.md`.
+
+An app that overrode `NavbarAdmin` or `pages/admin.vue` of an older version must move to registry
+entries. See "Migrating an app" in that skill.
 
 ### API Routes
 

package/app/components/auth/AuthSignIn.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// The email and password form of the supabase layer. It is the `signIn`
+// component of the auth driver. Core renders it inside the login frame
+// (PlutoAdminAuthCard), so this file has no frame. The file lives under
+// `app/` so Tailwind scans it.
+const props = defineProps<{
+  /** A safe local path to open after sign-in. Core checks it. */
+  redirect: string
+}>()
+
+const { t } = usePlutoI18n()
+
+const { isSubmitting, login } = useAuth({ redirect: () => props.redirect })
+
+const form = ref({
+  email: '',
+  password: '',
+})
+
+function submitForm() {
+  login(form.value)
+}
+</script>
+
+<template>
+  <form @submit.prevent="submitForm">
+    <div class="flex flex-col gap-y-6">
+      <UFormField :label="t('supabase.auth.fields.email')">
+        <UInput
+          v-model="form.email"
+          placeholder="victor@example.com"
+          class="w-full"
+          autocomplete="email"
+        />
+      </UFormField>
+
+      <UFormField :label="t('supabase.auth.fields.password')">
+        <UInput
+          v-model="form.password"
+          placeholder="••••"
+          class="w-full"
+          type="password"
+        />
+      </UFormField>
+
+      <UButton
+        :loading="isSubmitting"
+        type="submit"
+        icon="lucide:log-in"
+        class="w-full justify-center"
+      >
+        {{ t('supabase.auth.login.submit') }}
+      </UButton>
+    </div>
+  </form>
+</template>

package/app/components/migrations/MigrationsBanner.vue

@@ -1,25 +1,39 @@
 <script setup lang="ts">
+// The pending-migrations notice. It is an `adminBanners` entry of this layer,
+// so the core admin layout renders it at the top of the admin pages.
 // 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.
+// It also hides on the migrations page itself.
+const route = useRoute()
 const { status, pendingCount } = useMigrations()
 const { t } = usePlutoI18n()
 
 const title = computed(() =>
   t('supabase.migrations.banner', pendingCount.value)
 )
+
+const isVisible = computed(
+  () =>
+    Boolean(status.value)
+    && pendingCount.value > 0
+    && !route.path.startsWith('/admin/migrations')
+)
 </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"> {{ t('supabase.migrations.goTo') }} </ULink
-      >.
-    </template>
-  </UAlert>
+  <ClientOnly>
+    <Container v-if="isVisible" class="pt-4">
+      <UAlert
+        :title="title"
+        color="warning"
+        variant="subtle"
+        icon="lucide:triangle-alert"
+      >
+        <template #description>
+          <ULink to="/admin/migrations" class="underline"> {{ t('supabase.migrations.goTo') }} </ULink
+          >.
+        </template>
+      </UAlert>
+    </Container>
+  </ClientOnly>
 </template>

package/app/composables/auth.ts

@@ -1,33 +1,17 @@
-import type {
-  RouteLocationNormalizedGeneric,
-  RouteLocationRaw,
-} from 'vue-router'
+import type { MaybeRefOrGetter } from 'vue'
 
 interface PlutoSupabaseAuthOptions {
-  route?: RouteLocationNormalizedGeneric
+  /**
+   * A safe local path to open after a sign-in. Core checks it with
+   * `safeRedirect`. When it is empty, the sign-in opens the admin home.
+   */
+  redirect?: MaybeRefOrGetter<string | undefined>
 }
 
-interface PlutoUserMetadata {
-  display_name?: string
-  full_name?: string
-  name?: string
-  username?: string
-  is_admin?: boolean
-  [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) {
+// Sign-in, password reset and password update for the supabase auth pages.
+// The session, the user and the sign-out are in the auth driver
+// (app/plugins/pluto-extension.ts), not here.
+export function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   const toast = useToast()
   // Read at setup, while the Nuxt context exists. The functions below run
   // later, after an await, when the context is gone.
@@ -36,34 +20,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
     resolveAuthErrorText(error, { t, te })
 
   const supabase = useSupabaseClient()
-  const supabaseSession = useSupabaseSession()
-
-  const supabaseUser = useSupabaseUser()
-  const userMetadata = useState<PlutoUserMetadata | null>(
-    'pluto-auth-user-metadata',
-    () => null
-  )
-
-  const { data: authenticatedUser } = await supabase.auth.getUser()
 
-  if (authenticatedUser.user?.user_metadata) {
-    userMetadata.value = authenticatedUser.user.user_metadata
-  }
-
-  watch(
-    supabaseUser,
-    (currentUser) => {
-      if (currentUser?.user_metadata) {
-        userMetadata.value = currentUser.user_metadata
-      }
-    },
-    { immediate: true }
-  )
-
-  const user = computed(
-    () => supabaseUser.value?.user_metadata ?? userMetadata.value
-  )
-  const isLoggedIn = computed<boolean>(() => !!supabaseSession.value)
   const isSubmitting = ref<boolean>(false)
 
   interface LoginForm {
@@ -103,6 +60,17 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
           .eq('config_name', 'first_setup')
 
         if (healthcheckError) {
+          console.error(`Error saving first setup: ${healthcheckError.message}`)
+
+          toast.add({
+            title: t('supabase.auth.toasts.loginFailed'),
+            description: authErrorText(healthcheckError),
+            icon: 'lucide:circle-x',
+            color: 'error',
+          })
+
+          isSubmitting.value = false
+
           return {
             success: false,
             message: healthcheckError.message,
@@ -112,7 +80,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       }
 
       return navigateTo(
-        (authOptions?.route?.query.redirect as string) ?? '/admin/home'
+        toValue(authOptions?.redirect) || SUPABASE_SIGN_IN_FALLBACK
       )
     } catch (error) {
       if (import.meta.dev) {
@@ -125,36 +93,6 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
     }
   }
 
-  interface LogoutOptions {
-    redirectTo?: string
-    showToast?: boolean
-  }
-
-  async function logout(options?: LogoutOptions) {
-    await supabase.auth.signOut()
-    userMetadata.value = null
-
-    if (options?.showToast) {
-      console.warn(`User logged out`)
-
-      toast.add({
-        title: t('supabase.auth.toasts.loggedOut'),
-        icon: 'lucide:check',
-        color: 'success',
-      })
-    }
-
-    if (options?.redirectTo) {
-      return navigateTo(`/admin/login?redirect=${options.redirectTo}`)
-    }
-
-    if (authOptions?.route && authOptions.route.path.startsWith('/admin')) {
-      return navigateTo('/admin/login')
-    }
-
-    return navigateTo('/admin/login')
-  }
-
   async function requestPasswordReset(email: string) {
     isSubmitting.value = true
 
@@ -228,13 +166,9 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
   }
 
   return {
-    isLoggedIn,
     isSubmitting,
-    user,
     login,
-    logout,
     requestPasswordReset,
     updatePassword,
-    allowedUnauthenticatedPaths,
   }
 }

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

@@ -11,29 +11,25 @@ useHead({
 </script>
 
 <template>
-  <div class="grid min-h-dvh place-items-center p-4">
-    <UCard class="w-full max-w-100">
-      <div 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-check" class="inline-block" />
-            </span>
+  <PlutoAdminAuthCard :title="t('supabase.auth.confirm.title')">
+    <div 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-check" class="inline-block" />
+          </span>
+        </hgroup>
 
-            <h1 class="text-3xl font-bold">{{ t('supabase.auth.confirm.title') }}</h1>
-          </hgroup>
+        <p>
+          {{ t('supabase.auth.confirm.description') }}
+        </p>
 
-          <p>
-            {{ t('supabase.auth.confirm.description') }}
-          </p>
-
-          <div class="flex items-center justify-center gap-x-4">
-            <UButton to="/admin" color="primary" icon="lucide:layout-dashboard">
-              {{ t('supabase.auth.confirm.goToDashboard') }}
-            </UButton>
-          </div>
+        <div class="flex items-center justify-center gap-x-4">
+          <UButton to="/admin" color="primary" icon="lucide:layout-dashboard">
+            {{ t('supabase.auth.confirm.goToDashboard') }}
+          </UButton>
         </div>
       </div>
-    </UCard>
-  </div>
+    </div>
+  </PlutoAdminAuthCard>
 </template>

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

@@ -9,7 +9,7 @@ useHead({
   title: () => t('supabase.auth.forgot.pageTitle'),
 })
 
-const { isSubmitting, requestPasswordReset } = await useAuth()
+const { isSubmitting, requestPasswordReset } = useAuth()
 
 const email = ref('')
 const isEmailSent = ref(false)
@@ -24,76 +24,69 @@ 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="isEmailSent" 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" class="inline-block" />
-            </span>
+  <PlutoAdminAuthCard
+    :title="isEmailSent ? t('supabase.auth.forgot.sentTitle') : t('supabase.auth.forgot.title')"
+    :description="isEmailSent ? undefined : t('supabase.auth.forgot.description')"
+  >
+    <div v-if="isEmailSent" 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" class="inline-block" />
+          </span>
+        </hgroup>
 
-            <h1 class="text-3xl font-bold">{{ t('supabase.auth.forgot.sentTitle') }}</h1>
-          </hgroup>
+        <p>
+          <SupabaseMessageParts :message="t('supabase.auth.forgot.sentDescription')">
+            <template #email>
+              <strong>{{ email }}</strong>
+            </template>
+          </SupabaseMessageParts>
+        </p>
 
-          <p>
-            <SupabaseMessageParts :message="t('supabase.auth.forgot.sentDescription')">
-              <template #email>
-                <strong>{{ email }}</strong>
-              </template>
-            </SupabaseMessageParts>
-          </p>
-
-          <div class="flex items-center justify-center">
-            <UButton variant="link" to="/admin/login" class="px-0">
-              {{ t('supabase.auth.backToLogin') }}
-            </UButton>
-          </div>
+        <div class="flex items-center justify-center">
+          <UButton variant="link" to="/admin/login" class="px-0">
+            {{ t('supabase.auth.backToLogin') }}
+          </UButton>
         </div>
       </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.forgot.title') }}</h1>
-            <p class="text-sm text-muted">
-              {{ t('supabase.auth.forgot.description') }}
-            </p>
-          </hgroup>
+    <form v-else @submit.prevent="submitForm">
+      <div class="flex flex-col gap-y-6">
 
-          <UFormField :label="t('supabase.auth.fields.email')">
-            <UInput
-              v-model="email"
-              placeholder="victor@example.com"
-              type="email"
-              class="w-full"
-              autocomplete="email"
-              required
-            />
-          </UFormField>
+        <UFormField :label="t('supabase.auth.fields.email')">
+          <UInput
+            v-model="email"
+            placeholder="victor@example.com"
+            type="email"
+            class="w-full"
+            autocomplete="email"
+            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"
-                type="submit"
-                icon="lucide:send"
-                class="w-full justify-center sm:w-auto"
-              >
-                {{ t('supabase.auth.forgot.submit') }}
-              </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"
+              type="submit"
+              icon="lucide:send"
+              class="w-full justify-center sm:w-auto"
+            >
+              {{ t('supabase.auth.forgot.submit') }}
+            </UButton>
+          </UFormField>
 
-            <UFormField>
-              <UButton variant="link" to="/admin/login" class="px-0">
-                {{ t('supabase.auth.backToLogin') }}
-              </UButton>
-            </UFormField>
-          </div>
+          <UFormField>
+            <UButton variant="link" to="/admin/login" class="px-0">
+              {{ t('supabase.auth.backToLogin') }}
+            </UButton>
+          </UFormField>
         </div>
-      </form>
-    </UCard>
-  </div>
+      </div>
+    </form>
+  </PlutoAdminAuthCard>
 </template>