@plutocms/supabase 0.9.1 → 0.11.0

package/app/plugins/pluto-extension.ts

@@ -1,15 +1,135 @@
-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',
         order: 0,
-        title: 'General',
+        title: 'supabase.settings.general.title',
         icon: 'lucide:globe',
         component: SettingsGeneralPanel,
       },
@@ -28,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()
       },
     },
@@ -40,9 +156,26 @@ export default defineNuxtPlugin(() => {
     // gated by requireAdmin (public.is_admin() directly), never a named
     // capability — see server/utils/admin-guard.ts for why.
     capabilities: [
-      { id: 'settings-manage', key: 'settings:manage', label: 'Manage site settings' },
-      { id: 'users-read', key: 'users:read', label: 'View all user accounts' },
+      { id: 'settings-manage', key: 'settings:manage', label: 'supabase.capabilities.settingsManage' },
+      { id: 'users-read', key: 'users:read', label: 'supabase.capabilities.usersRead' },
     ],
+    // The admin language of the signed-in user, stored in profiles.locale
+    // (005_profile_locale.sql). A save error carries the translated server
+    // text, so the Settings language card can show it in a toast.
+    localeDriver: {
+      id: 'supabase',
+      load: async () => {
+        const response = await $fetch<{ locale: string | null }>('/api/profile/locale')
+        return response.locale
+      },
+      save: async (locale) => {
+        try {
+          await $fetch('/api/profile/locale', { method: 'POST', body: { locale } })
+        } catch (error) {
+          throw new Error(errorText(error))
+        }
+      },
+    },
     permissionsDriver: {
       id: 'supabase',
       load: async () => {

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'
+}

package/app/utils/auth-error.ts

@@ -0,0 +1,53 @@
+// Turns a Supabase auth error into text for the admin. This file does not use
+// Nuxt auto-imports, so plain Vitest can import it.
+
+/** The translation key of each Supabase auth error code that the admin knows. */
+export const AUTH_ERROR_KEYS: Record<string, string> = {
+  invalid_credentials: 'supabase.auth.errors.invalid_credentials',
+  email_not_confirmed: 'supabase.auth.errors.email_not_confirmed',
+  over_request_rate_limit: 'supabase.auth.errors.over_request_rate_limit',
+  over_email_send_rate_limit: 'supabase.auth.errors.over_email_send_rate_limit',
+  weak_password: 'supabase.auth.errors.weak_password',
+  same_password: 'supabase.auth.errors.same_password',
+  user_not_found: 'supabase.auth.errors.user_not_found',
+  email_exists: 'supabase.auth.errors.email_exists',
+  user_already_exists: 'supabase.auth.errors.user_already_exists',
+  signup_disabled: 'supabase.auth.errors.signup_disabled',
+  email_address_invalid: 'supabase.auth.errors.email_address_invalid',
+}
+
+/** The key for errors with no code, no message, or an unknown shape. */
+export const AUTH_UNKNOWN_ERROR_KEY = 'supabase.auth.errors.unknown'
+
+/** Returns the translation key of an auth error code, or `undefined`. */
+export function authErrorKey(error: unknown): string | undefined {
+  const code = (error as { code?: unknown } | null | undefined)?.code
+
+  return typeof code === 'string' && Object.hasOwn(AUTH_ERROR_KEYS, code)
+    ? AUTH_ERROR_KEYS[code]
+    : undefined
+}
+
+/**
+ * Returns the text of an auth error. The order is:
+ *
+ * 1. The translated text of a known `error.code`.
+ * 2. The raw `error.message`.
+ * 3. The translated unknown-error text.
+ */
+export function resolveAuthErrorText(
+  error: unknown,
+  i18n: { t: (key: string) => string, te: (key: string) => boolean }
+): string {
+  const key = authErrorKey(error)
+
+  if (key && i18n.te(key)) {
+    return i18n.t(key)
+  }
+
+  const message = (error as { message?: unknown } | null | undefined)?.message
+
+  return typeof message === 'string' && message.trim() !== ''
+    ? message
+    : i18n.t(AUTH_UNKNOWN_ERROR_KEY)
+}

package/db/migrations/005_profile_locale.sql

@@ -0,0 +1,44 @@
+-- Profile language
+--
+-- Stores each user's admin language on their own profile row. NULL means
+-- "Automatic": the user has not chosen one, so the admin uses the browser
+-- language. The format check accepts any BCP 47 style code ('en', 'pt-BR'),
+-- never a fixed list, so a new language needs no migration. The app decides
+-- which codes it offers.
+--
+-- There is no UPDATE policy on public.profiles, on purpose: a user must never
+-- write their own is_admin column. A SECURITY DEFINER function is the only
+-- writer of this column. It touches the row of auth.uid() and no other row,
+-- and it touches only the locale. This migration adds no RLS policy. The
+-- existing select policy already lets a user read their own row.
+
+alter table public.profiles add column if not exists locale text;
+
+do $$
+begin
+  if not exists (
+    select 1 from pg_constraint
+     where conname = 'profiles_locale_format'
+       and conrelid = 'public.profiles'::regclass
+  ) then
+    alter table public.profiles
+      add constraint profiles_locale_format
+      check (locale is null or locale ~ '^[a-z]{2,3}(-[A-Za-z0-9]{2,8})*$') not valid;
+  end if;
+end
+$$;
+
+alter table public.profiles validate constraint profiles_locale_format;
+
+-- Sets the language of the calling user. Pass NULL to choose Automatic.
+create or replace function public.set_my_locale(new_locale text)
+returns void
+language sql security definer set search_path = ''
+as $$
+  update public.profiles
+     set locale = new_locale, updated_at = now()
+   where id = auth.uid();
+$$;
+
+revoke execute on function public.set_my_locale(text) from public, anon;
+grant execute on function public.set_my_locale(text) to authenticated;

package/i18n/locales/en.json

@@ -0,0 +1,193 @@
+{
+  "supabase": {
+    "profile": {
+      "migrationPending": "Apply the pending database migrations to save your language."
+    },
+    "errors": {
+      "notLoggedIn": "You must be logged in.",
+      "notAdmin": "Your account is not an admin.",
+      "missingPermission": "Your account is missing the \"{capability}\" permission.",
+      "setupCompleted": "Setup has already been completed.",
+      "coreSchemaMissing": "Core schema not found. Reinstall @plutocms/supabase and restart the dev server.",
+      "fetchUsers": "Error fetching users: {message}",
+      "fetchUser": "Error fetching user: {message}",
+      "localeUnsupported": "This language is not supported.",
+      "duplicateRecord": "A record with this value already exists.",
+      "missingReference": "This references a record that does not exist.",
+      "migrationStatus": "Error reading migration status: {message}"
+    },
+    "auth": {
+      "backToLogin": "Back to Login",
+      "passwordMismatch": "Passwords do not match.",
+      "fields": {
+        "email": "Email",
+        "password": "Password",
+        "username": "Username",
+        "displayName": "Display Name",
+        "confirmPassword": "Confirm Password"
+      },
+      "toasts": {
+        "loginFailed": "Could not log in",
+        "resetFailed": "Could not send reset email",
+        "updateFailed": "Could not update password",
+        "passwordUpdated": "Password updated successfully"
+      },
+      "errors": {
+        "unknown": "An unknown error occurred.",
+        "invalid_credentials": "Invalid email or password.",
+        "email_not_confirmed": "Your email is not confirmed yet. Check your inbox for the verification link.",
+        "over_request_rate_limit": "Too many attempts. Wait a moment and try again.",
+        "over_email_send_rate_limit": "Too many emails sent. Wait a moment and try again.",
+        "weak_password": "This password is too weak. Choose a stronger one.",
+        "same_password": "The new password must be different from the current one.",
+        "user_not_found": "No account was found for this email.",
+        "email_exists": "An account with this email already exists.",
+        "user_already_exists": "An account with this email already exists.",
+        "signup_disabled": "Sign up is turned off for this site.",
+        "email_address_invalid": "This email address is not valid."
+      },
+      "confirm": {
+        "pageTitle": "Account Verification",
+        "title": "Account verified!",
+        "description": "Your account has been successfully verified. You can now start using the Dashboard.",
+        "goToDashboard": "Go to Dashboard"
+      },
+      "forgot": {
+        "pageTitle": "Forgot Password",
+        "title": "Forgot Password",
+        "description": "Enter your email and we'll send you a reset link.",
+        "submit": "Send Reset Link",
+        "sentTitle": "Check your inbox",
+        "sentDescription": "If an account exists for {email}, a password reset link has been sent. Check your email and follow the link."
+      },
+      "login": {
+        "title": "Login",
+        "submit": "Login"
+      },
+      "update": {
+        "title": "Update Password",
+        "description": "Enter your new password below.",
+        "newPassword": "New Password",
+        "confirmNewPassword": "Confirm New Password",
+        "submit": "Update Password",
+        "doneTitle": "Password Updated!",
+        "doneDescription": "Your password has been changed. You can now log in with your new password.",
+        "goToLogin": "Go to Login"
+      },
+      "signup": {
+        "pageTitle": "Sign Up",
+        "title": "Create Account",
+        "submit": "Create account",
+        "usernamePlaceholder": "e.g: johndoe",
+        "displayNamePlaceholder": "e.g: John Doe",
+        "created": "Account created successfully",
+        "createdDescription": "You still need to verify your email before you can log in.",
+        "failed": "Could not create account",
+        "almostThere": "Almost there!",
+        "verificationSent": "A verification link has been sent to your email. Please check your inbox and follow the instructions to verify your account.",
+        "closePage": "You can close this page. You will be logged in automatically once you verify your email.",
+        "checkSpam": "If you don't see the email, please check your spam folder."
+      }
+    },
+    "settings": {
+      "general": {
+        "title": "General",
+        "websiteTitle": "Website Title",
+        "websiteTitlePlaceholder": "e.g. My Website",
+        "websiteDescription": "Website Description",
+        "websiteDescriptionPlaceholder": "e.g. My Website Description",
+        "websiteUrl": "Website URL",
+        "websiteUrlPlaceholder": "e.g. https://example.com"
+      }
+    },
+    "capabilities": {
+      "settingsManage": "Manage site settings",
+      "usersRead": "View all user accounts"
+    },
+    "envWarning": {
+      "title": "Connection string not saved automatically",
+      "intro": "The database change already succeeded. Pluto could not write {variable} to your project's {file} file, so it will ask again next time unless you add it by hand:",
+      "step1": "Open (or create) {file} in your project's root folder.",
+      "step2": "Add this line. Replace any existing {variable} line with it.",
+      "step3": "Restart the server.",
+      "copyLine": "Copy the DATABASE_URL line",
+      "copied": "Copied",
+      "copiedDescription": "The DATABASE_URL line is on your clipboard.",
+      "copyFailed": "Could not copy",
+      "copyFailedDescription": "Select and copy the line by hand instead."
+    },
+    "connection": {
+      "connectionString": "Supabase connection string",
+      "connectionStringHelp": "You can find your connection string {link}.",
+      "connectionStringHelpLink": "clicking here",
+      "password": "Database password",
+      "passwordInfo": "Your password is created when you create your Supabase project. You can change it in the {link}.",
+      "passwordInfoLink": "Supabase Database Settings",
+      "whyTitle": "Why do I need to provide a database password?",
+      "restartTitle": "This restarts the dev server",
+      "restarting": "Dev server restarting",
+      "reconnected": "Reconnected",
+      "stillReconnecting": "Still reconnecting",
+      "stillReconnectingDescription": "The dev server is taking longer than expected. Reload this page in a moment.",
+      "checkConsole": "Please check the console for more details."
+    },
+    "setup": {
+      "title": "Setup Wizard",
+      "steps": {
+        "database": "Database Setup",
+        "complete": "Complete Setup"
+      },
+      "submit": "Set up database",
+      "next": "Submit",
+      "why": "It will be used to create your database structure. It won't be stored anywhere. That's a {promise}! 😉",
+      "promise": "promise",
+      "promiseTooltip": "Click on the 'Technical details' button for more info",
+      "technicalDetails": "Technical details",
+      "technicalDetailsRequest": "When you click \"Next\", a request to {route} will be made with the database password you provided. This API will then use this password to make a direct PostgreSQL connection to your Supabase database and run the SQL queries from this {files}.",
+      "technicalDetailsRoute": "a server route",
+      "technicalDetailsFiles": "SQL files",
+      "technicalDetailsStored": "After the setup is complete, the password will NOT be stored or used for any other purpose.",
+      "restartDescription": "Saving your 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.",
+      "restartingDescription": "Setup is finishing. Reconnecting…",
+      "reconnectedDescription": "The server is back. Your database has been set up.",
+      "failed": "Database setup failed",
+      "failedDescription": "Please check your password and try again.",
+      "complete": "Database setup complete",
+      "completeDescription": "Your database has been set up successfully.",
+      "error": "Error setting up the database",
+      "doneTitle": "Setup Complete",
+      "doneDescription": "Your database is ready. Create your admin account by signing up.",
+      "goToSignup": "Go to sign up"
+    },
+    "migrations": {
+      "title": "Migrations",
+      "banner": "{count} layer needs a database migration | {count} layers need a database migration",
+      "goTo": "Go to Migrations",
+      "loading": "Loading migration status…",
+      "upToDate": "Everything is up to date",
+      "upToDateDescription": "No layer needs a database migration.",
+      "pendingLayers": "Pending layers ({count})",
+      "appliedLayers": "Applied layers ({count})",
+      "why": "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.",
+      "restartDescription": "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.",
+      "restartingDescription": "Saving a new connection string restarts the dev server. Reconnecting…",
+      "reconnectingBanner": "Saving a new connection string restarts the dev server. Reconnecting — this page will update on its own once it's back.",
+      "reconnectedAllApplied": "The server is back. All migrations were applied.",
+      "reconnectedPending": "The server is back. {count} layer(s) still pending — check above.",
+      "apply": "Apply pending migrations",
+      "applied": "Migrations applied",
+      "applyFailed": "Could not apply migrations",
+      "connectionRequired": "A database connection string is required.",
+      "error": "Error applying migrations",
+      "lastRun": "Last run",
+      "status": {
+        "applied": "applied",
+        "skipped": "skipped",
+        "failed": "failed"
+      },
+      "loadFailed": "Could not load migration status",
+      "loadFailedDescription": "This isn't the dev-server-restart case above — something else went wrong reading migration status. Check the server console, then try again.",
+      "retry": "Retry"
+    }
+  }
+}