@plutocms/supabase 0.9.1 → 0.11.0

package/.prettierignore

@@ -0,0 +1,2 @@
+# Agent skill files keep their own formatting. Prettier must not rewrite them.
+.agents/**/*.md

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* **i18n:** store each user's admin language ([#79](https://github.com/plutocms/supabase/issues/79)) ([2ca171a](https://github.com/plutocms/supabase/commit/2ca171a97acbc2de4537b82b6718acbcc2c1fbd5))
+* **i18n:** translate the supabase admin pages ([#82](https://github.com/plutocms/supabase/issues/82)) ([bae1372](https://github.com/plutocms/supabase/commit/bae1372fdb89414fcb20ec74c428812f25077f6b))
+
 ## [0.9.1](https://github.com/plutocms/supabase/compare/v0.9.0...v0.9.1) (2026-10-18)
 
 

package/FEATURES.md

@@ -13,3 +13,12 @@ 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
+- Admin translation: every admin page, component, toast, and server message of this layer is
+  translated (`en`, `pt-BR`) in the `supabase.*` namespace of pluto's i18n system.
+  @.claude/skills/admin-translation/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/EnvPersistWarning.vue

@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 
 const toast = useToast()
+const { t } = usePlutoI18n()
 
 const envLine = computed(() => `DATABASE_URL="${props.connectionString}"`)
 
@@ -22,15 +23,15 @@ async function copyEnvLine() {
     await navigator.clipboard.writeText(envLine.value)
 
     toast.add({
-      title: 'Copied',
-      description: 'The DATABASE_URL line is on your clipboard.',
+      title: t('supabase.envWarning.copied'),
+      description: t('supabase.envWarning.copiedDescription'),
       icon: 'lucide:check-circle',
       color: 'success',
     })
   } catch {
     toast.add({
-      title: 'Could not copy',
-      description: 'Select and copy the line by hand instead.',
+      title: t('supabase.envWarning.copyFailed'),
+      description: t('supabase.envWarning.copyFailedDescription'),
       icon: 'lucide:circle-x',
       color: 'error',
     })
@@ -40,24 +41,40 @@ async function copyEnvLine() {
 
 <template>
   <UAlert
+    :title="t('supabase.envWarning.title')"
     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:
+          <SupabaseMessageParts :message="t('supabase.envWarning.intro')">
+            <template #variable>
+              <code>DATABASE_URL</code>
+            </template>
+            <template #file>
+              <code>.env</code>
+            </template>
+          </SupabaseMessageParts>
         </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>
+          <li>
+            <SupabaseMessageParts :message="t('supabase.envWarning.step1')">
+              <template #file>
+                <code>.env</code>
+              </template>
+            </SupabaseMessageParts>
+          </li>
+          <li>
+            <SupabaseMessageParts :message="t('supabase.envWarning.step2')">
+              <template #variable>
+                <code>DATABASE_URL</code>
+              </template>
+            </SupabaseMessageParts>
+          </li>
+          <li>{{ t('supabase.envWarning.step3') }}</li>
         </ol>
 
         <div class="flex items-center gap-x-2">
@@ -68,11 +85,11 @@ async function copyEnvLine() {
           </code>
 
           <UButton
+            :aria-label="t('supabase.envWarning.copyLine')"
             icon="lucide:copy"
             variant="soft"
             color="neutral"
             size="sm"
-            aria-label="Copy the DATABASE_URL line"
             @click="copyEnvLine"
           />
         </div>

package/app/components/SupabaseMessageParts.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+// Renders one translated message that holds links or markup in the middle of
+// a sentence. Each `{name}` in the message becomes the slot with that name.
+// The word order stays in the translation, so each language can move the
+// parts. Example: <SupabaseMessageParts :message="t('…')"><template #link>…
+const props = defineProps<{
+  /** The translated message. Write each slot as `{name}`. */
+  message: string
+}>()
+
+const parts = computed(() =>
+  props.message
+    .split(/(\{\w+\})/)
+    .filter((part) => part !== '')
+    .map((part) => {
+      const slot = /^\{(\w+)\}$/.exec(part)?.[1]
+
+      return slot ? { slot } : { text: part }
+    })
+)
+</script>
+
+<template>
+  <template v-for="(part, index) in parts" :key="index">
+    <slot v-if="part.slot" :name="part.slot" />
+
+    <template v-else>{{ part.text }}</template>
+  </template>
+</template>

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,26 +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(() =>
-  pendingCount.value === 1
-    ? '1 layer needs a database migration'
-    : `${pendingCount.value} layers need a database migration`
+  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"> Go to Migrations </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/components/settings/SettingsGeneralPanel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const { field } = usePlutoSettings()
+const { t } = usePlutoI18n()
 
 const websiteTitle = field('website_title')
 const websiteDescription = field('website_description')
@@ -8,22 +9,36 @@ const websiteUrl = field('website_url')
 
 <template>
   <div class="flex flex-col gap-y-6">
-    <UFormField label="Website Title" class="w-full lg:w-1/2">
-      <UInput v-model="websiteTitle" placeholder="e.g. My Website" />
+    <UFormField
+      :label="t('supabase.settings.general.websiteTitle')"
+      class="w-full lg:w-1/2"
+    >
+      <UInput
+        v-model="websiteTitle"
+        :placeholder="t('supabase.settings.general.websiteTitlePlaceholder')"
+      />
     </UFormField>
 
-    <UFormField label="Website Description" class="w-full lg:w-1/2">
+    <UFormField
+      :label="t('supabase.settings.general.websiteDescription')"
+      class="w-full lg:w-1/2"
+    >
       <UInput
         v-model="websiteDescription"
-        placeholder="e.g. My Website Description"
+        :placeholder="
+          t('supabase.settings.general.websiteDescriptionPlaceholder')
+        "
       />
     </UFormField>
 
-    <UFormField label="Website URL" class="w-full lg:w-1/2">
+    <UFormField
+      :label="t('supabase.settings.general.websiteUrl')"
+      class="w-full lg:w-1/2"
+    >
       <UInput
         v-model="websiteUrl"
+        :placeholder="t('supabase.settings.general.websiteUrlPlaceholder')"
         type="url"
-        placeholder="e.g. https://example.com"
       />
     </UFormField>
   </div>

package/app/composables/auth.ts

@@ -1,64 +1,26 @@
-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.
+  const { t, te } = usePlutoI18n()
+  const authErrorText = (error: unknown) =>
+    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 {
@@ -79,8 +41,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
         console.error(`Error signing in user: ${error?.message}`)
 
         toast.add({
-          title: 'Could not log in',
-          description: error?.message,
+          title: t('supabase.auth.toasts.loginFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -98,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,
@@ -107,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) {
@@ -120,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: 'Logged out successfully',
-        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
 
@@ -160,8 +103,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
       if (error) {
         toast.add({
-          title: 'Could not send reset email',
-          description: error.message,
+          title: t('supabase.auth.toasts.resetFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -172,9 +115,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       return { success: true }
     } catch (error) {
       toast.add({
-        title: 'Could not send reset email',
-        description:
-          error instanceof Error ? error.message : 'An unknown error occurred.',
+        title: t('supabase.auth.toasts.resetFailed'),
+        description: authErrorText(error),
         icon: 'lucide:circle-x',
         color: 'error',
       })
@@ -193,8 +135,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
 
       if (error) {
         toast.add({
-          title: 'Could not update password',
-          description: error.message,
+          title: t('supabase.auth.toasts.updateFailed'),
+          description: authErrorText(error),
           icon: 'lucide:circle-x',
           color: 'error',
         })
@@ -203,7 +145,7 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       }
 
       toast.add({
-        title: 'Password updated successfully',
+        title: t('supabase.auth.toasts.passwordUpdated'),
         icon: 'lucide:check',
         color: 'success',
       })
@@ -211,9 +153,8 @@ export async function useAuth(authOptions?: PlutoSupabaseAuthOptions) {
       return { success: true }
     } catch (error) {
       toast.add({
-        title: 'Could not update password',
-        description:
-          error instanceof Error ? error.message : 'An unknown error occurred.',
+        title: t('supabase.auth.toasts.updateFailed'),
+        description: authErrorText(error),
         icon: 'lucide:circle-x',
         color: 'error',
       })
@@ -225,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

@@ -3,36 +3,33 @@ definePageMeta({
   layout: 'auth',
 })
 
+const { t } = usePlutoI18n()
+
 useHead({
-  title: 'Account Verification',
+  title: () => t('supabase.auth.confirm.pageTitle'),
 })
 </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>
-
-            <h1 class="text-3xl font-bold">Account verified!</h1>
-          </hgroup>
+  <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>
 
-          <p>
-            Your account has been successfully verified. You can now start using
-            the Dashboard.
-          </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">
-              Go to Dashboard
-            </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>