use-convex 0.0.2

package/LICENSE

@@ -0,0 +1,2 @@
+MIT License
+

package/README.md

@@ -0,0 +1,321 @@
+# use-convex
+
+First-class [Convex](https://convex.dev) integration for [Nuxt 4](https://nuxt.com).
+
+SSR snapshots hydrate through the Nuxt payload, then the browser overlays a live WebSocket subscription.
+
+## Install
+
+```bash
+pnpm add use-convex convex
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['use-convex'],
+  convex: {
+    url: process.env.NUXT_PUBLIC_CONVEX_URL,
+  },
+})
+```
+
+```vue
+<script setup lang="ts">
+import { api } from '~~/convex/_generated/api'
+
+const { data, pending, error } = await useConvexQuery(api.tasks.list, {})
+</script>
+```
+
+With Nuxt 4's `app/` directory, `~~` is the project root (where `convex/` lives).
+
+## How it works
+
+```text
+                 useConvexQuery()
+                       │
+              ┌────────┴────────┐
+              │                 │
+           Nuxt SSR          Browser
+              │                 │
+     ConvexHttpClient      ConvexClient
+              │                 │
+        useAsyncData        onUpdate
+              │                 │
+        Nuxt payload ──► live ?? payload
+```
+
+Server and client share the same `useAsyncData` key so hydration reuses the payload. The browser then overlays `ConvexClient.onUpdate`.
+
+Set `convex.server: false` to skip SSR snapshots globally, or pass `{ server: false }` on a single query.
+
+## Queries
+
+```ts
+const { data, pending, error, refresh } = await useConvexQuery(
+  api.tasks.list,
+  {}, // args, a ref / getter, or 'skip'
+)
+```
+
+| Option | Default | Purpose |
+|---|---|---|
+| `key` | function name + args | Nuxt payload / cache key |
+| `server` | `convex.server` (`true`) | SSR HttpClient snapshot |
+| `lazy` | `false` | Non-blocking on client navigation |
+| `live` | `true` | Subscribe after hydration |
+| `authenticated` | `false` | Wait for Convex auth before live subscribe |
+| `token` | cookie / none | Per-request JWT for SSR |
+
+Args accept the query's `FunctionArgs`, `'skip'`, or a `MaybeRefOrGetter` of either.
+
+- **`'skip'`** — gate on missing ids, feature flags, etc. Keeps the same payload key as empty args so SSR HTML survives.
+- **`authenticated: true`** — skip live subscribe until Convex confirms auth. SSR still snapshots when the JWT cookie is present. Prefer this over wrapping args yourself.
+- **`token`** — authenticated SSR for this call only. Never put JWTs in `runtimeConfig.public`. When `convex.auth.cookie` / HttpOnly auth is set, queries fall back to that cookie.
+
+Warm a subscription before a screen mounts:
+
+```ts
+prewarmQuery(api.tasks.list, {})
+```
+
+### Several queries
+
+```ts
+const results = useConvexQueries(() => ({
+  inbox: { query: api.messages.list, args: { channel: 'inbox' } },
+  later: selectedId.value
+    ? { query: api.messages.get, args: { id: selectedId.value } }
+    : 'skip',
+}))
+```
+
+### Pagination
+
+```ts
+const { results, status, isLoading, loadMore } = await useConvexPaginatedQuery(
+  api.tasks.listPaginated,
+  {},
+  { initialNumItems: 20 },
+)
+```
+
+The first page is SSR'd. On the browser, every loaded page stays live. `loadMore` fetches the next page.
+
+## Mutations and actions
+
+```ts
+const { mutate, pending, error } = useConvexMutation(api.tasks.create, {
+  optimisticUpdate: (localStore, args) => {
+    const existing = localStore.getQuery(api.tasks.list, {}) ?? []
+    localStore.setQuery(api.tasks.list, {}, [
+      { _id: 'tmp', text: args.text, completed: false },
+      ...existing,
+    ])
+  },
+})
+await mutate({ text: 'Ship it' })
+
+const { run } = useConvexAction(api.ai.summarize)
+await run({ text: '…' })
+```
+
+For paginated lists:
+
+```ts
+insertAtTop({
+  paginatedQuery: api.tasks.listPaginated,
+  localQueryStore: localStore,
+  item: { _id: 'tmp', text: args.text, completed: false },
+})
+```
+
+Also available: `insertAtBottomIfLoaded`, `insertAtPosition`, `optimisticallyUpdateValueInPaginatedQuery`.
+
+`useConvex()` returns the browser `ConvexClient` when you need an escape hatch. `useConvexConnectionState()` is a reactive WebSocket `ConnectionState`.
+
+## Auth
+
+### Convex Auth
+
+Opt in with `provider: 'convex-auth'`. The module hydrates tokens, finishes OAuth `?code=` callbacks, and wires `setAuth`. Forms only call `signIn` / `signOut`.
+
+```ts
+convex: {
+  url: process.env.NUXT_PUBLIC_CONVEX_URL,
+  auth: {
+    provider: 'convex-auth',
+    // cookie defaults to 'convex_jwt'
+  },
+}
+```
+
+```vue
+<script setup lang="ts">
+const { signIn, signOut } = useAuth()
+</script>
+
+<template>
+  <AuthLoading>Resolving…</AuthLoading>
+  <Authenticated>
+    <!-- signed-in shell -->
+  </Authenticated>
+  <Unauthenticated>
+    <!-- sign-in form -->
+  </Unauthenticated>
+</template>
+```
+
+Prefer `<Authenticated>` (or `showAuthedUi`) so SSR HTML does not flash the sign-in form. Gate private queries with `{ authenticated: true }`.
+
+```ts
+await signIn('password', { email, password, flow: 'signIn' })
+await signIn('github') // OAuth redirect; the plugin finishes on ?code=
+await signOut()
+```
+
+You still own the Convex backend:
+
+- `convex/auth.ts` — `convexAuth({ providers })` exporting `auth`, `signIn`, `signOut`
+- `convex/schema.ts` — spread `authTables`
+- `convex/http.ts` — `auth.addHttpRoutes(http)` (required for OAuth / magic links)
+- `convex/auth.config.ts` — JWT issuer (`CONVEX_SITE_URL`)
+- Env: `JWT_PRIVATE_KEY` + `JWKS` (`npx @convex-dev/auth`), plus `SITE_URL` for OAuth
+
+By default the JWT is a readable cookie (`convex_jwt`) and the refresh token lives in `localStorage`. For production Convex Auth apps, prefer HttpOnly dual cookies:
+
+```ts
+auth: {
+  provider: 'convex-auth',
+  httpOnly: true, // JWT + refresh via Nitro `/api/convex/auth/session`
+}
+```
+
+A readable `convex_auth_present` marker drives `hasSsrSession` / `showAuthedUi` (UI shell only — **not** authorization). Always gate private live queries with `{ authenticated: true }` (or equivalent). Tokens are HttpOnly cookies; the session API returns the JWT only via same-origin `POST { getToken: true }` for `ConvexClient.setAuth`. That mitigates cookie theft, **not** XSS (any XSS that can call your origin can still obtain a token once the client needs it in memory).
+
+### SSR query budget
+
+Defaults are `convex.server: true` and per-query `live: true` (HttpClient snapshot **and** WebSocket). On list-heavy pages, skip SSR or live selectively:
+
+```ts
+await useConvexQuery(api.tasks.list, {}, { server: false }) // client-only
+await useConvexQuery(api.stats.get, {}, { live: false }) // SSR / one-shot only
+```
+
+Or set `convex: { server: false }` globally.
+
+Protect a route:
+
+```ts
+// middleware/auth.ts
+export default defineNuxtRouteMiddleware(() => {
+  return requireConvexAuthMiddleware({ redirectTo: '/login' })
+})
+```
+
+`useAuthToken()` returns the current JWT for authenticated HTTP calls. `useConvexGate()` exposes `{ showAuthedUi, showLoading, showSignedOut, showRefreshing }` if you prefer flags over layout components.
+
+### Bring your own (Clerk, Auth0, custom)
+
+Omit `provider` and wire `useConvexAuth` yourself:
+
+```ts
+// plugins/my-auth.client.ts
+useConvexAuth({
+  fetchToken: ({ forceRefreshToken }) => auth.getToken({ forceRefreshToken }),
+  isLoading: auth.isLoading,
+  isAuthenticated: auth.hasSession,
+})
+```
+
+```ts
+const { data } = await useConvexQuery(api.tasks.list, {}, { authenticated: true })
+```
+
+Optional SSR cookie (you must write the JWT after sign-in):
+
+```ts
+auth: { cookie: 'convex_jwt' }
+```
+
+## Server routes
+
+Nitro helpers are auto-imported in `server/`. Pass the H3 `event` so they resolve the deployment URL and, when a cookie is configured, the JWT:
+
+```ts
+// server/api/tasks.get.ts
+export default defineEventHandler(async (event) => {
+  requireConvexAuth(event)
+  return await fetchQuery(api.tasks.list, {}, { event })
+})
+```
+
+```ts
+// server/api/tasks.post.ts
+export default defineEventHandler(async (event) => {
+  requireConvexAuth(event)
+  const { text } = await readBody(event)
+  return await fetchMutation(api.tasks.create, { text }, { event })
+})
+```
+
+`fetchAction` uses the same options. Each helper builds a fresh `ConvexHttpClient`. Override with `{ token }` when you already have a JWT. `getConvexToken(event)` reads the cookie without throwing.
+
+## Config
+
+```ts
+convex: {
+  url: process.env.NUXT_PUBLIC_CONVEX_URL,
+  server: true, // SSR snapshots; override per query with { server }
+  client: { unsavedChangesWarning: false }, // forwarded to new ConvexClient()
+  auth: {
+    provider: 'convex-auth',
+    cookie: 'convex_jwt',
+    httpOnly: false,
+    presentCookie: 'convex_auth_present',
+  },
+}
+```
+
+`url` also reads `NUXT_PUBLIC_CONVEX_URL` via `runtimeConfig.public.convex.url`, so you can change the deployment without rebuilding.
+
+## Playground
+
+`playground/` is a normal Nuxt app that consumes this module (workspace-linked).
+
+```bash
+pnpm install
+
+# Terminal 1 — Convex backend (writes NUXT_PUBLIC_CONVEX_URL to .env.local)
+pnpm run dev:backend
+# first time: npx @convex-dev/auth   # JWT_PRIVATE_KEY + JWKS
+
+# Terminal 2 — Nuxt
+pnpm run dev
+```
+
+| Route | What it shows |
+|---|---|
+| `/` | SSR snapshot + live overlay (sign up, CRUD todos) |
+| `/server` | Nitro `fetchQuery` / `fetchMutation` / `fetchAction` |
+| `/extras` | `live: false`, pagination, action, connection state |
+
+On `/server`: `GET /api/health` is public; `GET`/`POST /api/tasks` use the cookie JWT; `POST /api/shout` is a public `fetchAction` demo.
+
+## Releasing
+
+Releases run from `.github/workflows/release.yml` when commits land on `main`. Version bumps follow [conventional commits](https://www.conventionalcommits.org/):
+
+| Commit | Release |
+|---|---|
+| `fix:` | patch |
+| `feat:` | minor |
+| `feat!:` or `BREAKING CHANGE:` | major |
+| `chore:`, `docs:`, `ci:`, … | none |
+
+semantic-release publishes `use-convex` to npm, tags `vX.Y.Z`, and opens a GitHub Release. The repo `package.json` version is not committed back.
+
+## License
+
+MIT

package/dist/module.d.mts

@@ -0,0 +1,97 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import * as convex_browser from 'convex/browser';
+export { AuthTokens, SignInResult, UseAuthReturn } from '../dist/runtime/composables/useAuth.js';
+export { ConvexQueryArgs, UseConvexQueryOptions, UseConvexQueryReturn } from '../dist/runtime/composables/useConvexQuery.js';
+export { AuthTokenFetcher, UseConvexAuthReturn, UseConvexAuthSetupOptions } from '../dist/runtime/composables/useConvexAuth.js';
+export { UseConvexMutationOptions } from '../dist/runtime/composables/useConvexMutation.js';
+export { PaginatedQueryReference, PaginationStatus, UseConvexPaginatedQueryOptions, UseConvexPaginatedQueryReturn } from '../dist/runtime/composables/useConvexPaginatedQuery.js';
+export { ConvexQueriesRequest, ConvexQueriesResult } from '../dist/runtime/composables/useConvexQueries.js';
+export { ConvexFetchOptions } from '../dist/runtime/server/fetch.js';
+export { ConvexAuthContext, ConvexNuxtContext } from '../dist/runtime/utils/context.js';
+export { ConnectionState } from '../dist/runtime/composables/useConvexConnectionState.js';
+export { ConvexGate } from '../dist/runtime/composables/useConvexGate.js';
+
+interface ModuleAuthOptions {
+    /**
+     * Opt-in first-party Convex Auth (`@convex-dev/auth`) client.
+     *
+     * When set to `'convex-auth'`, the module registers a client plugin that
+     * hydrates tokens, handles OAuth `?code=` callbacks, and wires
+     * `useConvexAuth({ fetchToken })`. It also auto-imports `useAuth`,
+     * `signIn`, and `signOut` so apps only need forms.
+     *
+     * Omit for bring-your-own providers (Clerk, Auth0, custom) — wire
+     * `useConvexAuth({ fetchToken })` yourself.
+     */
+    provider?: 'convex-auth';
+    /**
+     * Cookie name whose value is a JWT used for authenticated SSR queries.
+     * When set, the server plugin reads this cookie into `ctx.ssrToken` and
+     * `useConvexQuery` falls back to it when `options.token` is omitted.
+     * `useAuth` / `useConvexAuth` expose the presence of this cookie as
+     * `hasSsrSession`.
+     * Nitro `fetch*` helpers also read this cookie when `{ event }` is passed.
+     *
+     * Defaults to `'convex_jwt'` when `provider === 'convex-auth'` and
+     * `httpOnly` is off. With `httpOnly: true`, defaults to `__convexAuthJWT`.
+     * Otherwise off — BYO apps must opt in and write the JWT after sign-in.
+     */
+    cookie?: string;
+    /**
+     * Store JWT + refresh tokens in HttpOnly cookies via Nitro
+     * (`/api/convex/auth/session`). Cookies are not readable via
+     * `document.cookie`. Prefer `true` in production.
+     *
+     * Note: ConvexClient still needs the JWT in memory for the WebSocket;
+     * the session route returns it only via same-origin POST `{ getToken: true }`.
+     * HttpOnly mitigates cookie theft, not XSS session theft. The readable
+     * presence cookie drives `hasSsrSession` / `showAuthedUi` (UI only — gate
+     * private queries with `{ authenticated: true }`).
+     *
+     * @default false
+     */
+    httpOnly?: boolean;
+    /**
+     * Readable presence cookie when `httpOnly` is enabled.
+     * @default 'convex_auth_present'
+     */
+    presentCookie?: string;
+}
+interface ModuleOptions {
+    /**
+     * Convex deployment URL.
+     *
+     * Defaults to runtimeConfig.public.convex.url, allowing
+     * NUXT_PUBLIC_CONVEX_URL to be changed without rebuilding.
+     */
+    url?: string;
+    /**
+     * Run Convex queries during SSR (`useAsyncData` on the server).
+     * Per-call `useConvexQuery(..., { server })` overrides this default.
+     * @default true
+     */
+    server?: boolean;
+    /**
+     * Options forwarded to `new ConvexClient(url, client)`.
+     * Useful for `unsavedChangesWarning`, `verbose`, custom WebSocket, etc.
+     */
+    client?: convex_browser.ConvexClientOptions;
+    /**
+     * Optional auth: SSR cookie and/or first-party Convex Auth provider.
+     */
+    auth?: ModuleAuthOptions;
+}
+
+interface ModulePublicRuntimeConfig {
+    convex: {
+        url?: string;
+        server?: boolean;
+        client?: convex_browser.ConvexClientOptions;
+        auth?: ModuleAuthOptions;
+    };
+}
+
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleAuthOptions, ModuleOptions, ModulePublicRuntimeConfig };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "use-convex",
+  "configKey": "convex",
+  "compatibility": {
+    "nuxt": "^4.0.0"
+  },
+  "version": "0.0.2",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,232 @@
+import { defineNuxtModule, createResolver, addPlugin, addComponent, addServerScanDir, addServerHandler, addImports, addServerImports, addTypeTemplate } from '@nuxt/kit';
+import { defu } from 'defu';
+import { resolveAuthCookieName } from '../dist/runtime/utils/authStorage.js';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "use-convex",
+    configKey: "convex",
+    compatibility: {
+      nuxt: "^4.0.0"
+    }
+  },
+  defaults: {
+    url: void 0,
+    server: true
+  },
+  setup(options, nuxt) {
+    const existing = nuxt.options.runtimeConfig.public.convex;
+    const auth = options.auth ? {
+      ...options.auth,
+      cookie: resolveAuthCookieName(options.auth) ?? options.auth.cookie
+    } : options.auth;
+    nuxt.options.runtimeConfig.public.convex = defu(existing ?? {}, {
+      url: options.url,
+      server: options.server,
+      client: options.client,
+      auth
+    });
+    const resolver = createResolver(import.meta.url);
+    const runtimeDir = resolver.resolve("./runtime");
+    const useConvexAuthProvider = auth?.provider === "convex-auth";
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.hooks.hook("nitro:config", (nitroConfig) => {
+      nitroConfig.externals ||= {};
+      nitroConfig.externals.inline ||= [];
+      if (Array.isArray(nitroConfig.externals.inline)) {
+        nitroConfig.externals.inline.push(runtimeDir);
+      }
+    });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugin.server"),
+      mode: "server"
+    });
+    addPlugin({
+      src: resolver.resolve("./runtime/plugin.client"),
+      mode: "client"
+    });
+    if (useConvexAuthProvider) {
+      addPlugin({
+        src: resolver.resolve("./runtime/plugin.auth.client"),
+        mode: "client"
+      });
+    }
+    if (nuxt.options.dev) {
+      addPlugin({
+        src: resolver.resolve("./runtime/plugin.devtools.client"),
+        mode: "client"
+      });
+    }
+    for (const name of ["Authenticated", "Unauthenticated", "AuthLoading"]) {
+      addComponent({
+        name,
+        filePath: resolver.resolve(`./runtime/components/${name}.vue`)
+      });
+    }
+    addServerScanDir(resolver.resolve("./runtime/server"));
+    addServerHandler({
+      route: "/api/convex/auth/session",
+      handler: resolver.resolve("./runtime/server/api/convex/auth/session")
+    });
+    if (nuxt.options.dev) {
+      addServerHandler({
+        route: "/__convex_devtools",
+        handler: resolver.resolve("./runtime/server/routes/__convex_devtools.get")
+      });
+    }
+    addImports([
+      {
+        name: "useConvex",
+        from: resolver.resolve("./runtime/composables/useConvex")
+      },
+      {
+        name: "useConvexAuth",
+        from: resolver.resolve("./runtime/composables/useConvexAuth")
+      },
+      {
+        name: "useConvexGate",
+        from: resolver.resolve("./runtime/composables/useConvexGate")
+      },
+      {
+        name: "useConvexQuery",
+        from: resolver.resolve("./runtime/composables/useConvexQuery")
+      },
+      {
+        name: "useConvexQueries",
+        from: resolver.resolve("./runtime/composables/useConvexQueries")
+      },
+      {
+        name: "useConvexPaginatedQuery",
+        from: resolver.resolve("./runtime/composables/useConvexPaginatedQuery")
+      },
+      {
+        name: "useConvexMutation",
+        from: resolver.resolve("./runtime/composables/useConvexMutation")
+      },
+      {
+        name: "useConvexAction",
+        from: resolver.resolve("./runtime/composables/useConvexAction")
+      },
+      {
+        name: "useConvexConnectionState",
+        from: resolver.resolve("./runtime/composables/useConvexConnectionState")
+      },
+      {
+        name: "useAuthToken",
+        from: resolver.resolve("./runtime/composables/useAuthToken")
+      },
+      {
+        name: "requireConvexAuthMiddleware",
+        from: resolver.resolve("./runtime/composables/useAuthToken")
+      },
+      {
+        name: "prewarmQuery",
+        from: resolver.resolve("./runtime/composables/prewarmQuery")
+      },
+      {
+        name: "optimisticallyUpdateValueInPaginatedQuery",
+        from: resolver.resolve("./runtime/utils/paginatedOptimistic")
+      },
+      {
+        name: "insertAtTop",
+        from: resolver.resolve("./runtime/utils/paginatedOptimistic")
+      },
+      {
+        name: "insertAtBottomIfLoaded",
+        from: resolver.resolve("./runtime/utils/paginatedOptimistic")
+      },
+      {
+        name: "insertAtPosition",
+        from: resolver.resolve("./runtime/utils/paginatedOptimistic")
+      },
+      ...useConvexAuthProvider ? [
+        {
+          name: "useAuth",
+          from: resolver.resolve("./runtime/composables/useAuth")
+        },
+        {
+          name: "signIn",
+          from: resolver.resolve("./runtime/composables/useAuth")
+        },
+        {
+          name: "signOut",
+          from: resolver.resolve("./runtime/composables/useAuth")
+        }
+      ] : []
+    ]);
+    addServerImports([
+      {
+        name: "fetchQuery",
+        from: resolver.resolve("./runtime/server/fetch")
+      },
+      {
+        name: "fetchMutation",
+        from: resolver.resolve("./runtime/server/fetch")
+      },
+      {
+        name: "fetchAction",
+        from: resolver.resolve("./runtime/server/fetch")
+      },
+      {
+        name: "getConvexToken",
+        from: resolver.resolve("./runtime/server/auth")
+      },
+      {
+        name: "requireConvexAuth",
+        from: resolver.resolve("./runtime/server/auth")
+      }
+    ]);
+    if (nuxt.options.dev) {
+      nuxt.hooks.hook("devtools:customTabs", (tabs) => {
+        tabs.push({
+          name: "convex-nuxt",
+          title: "Convex",
+          icon: "carbon:data-base",
+          view: {
+            type: "iframe",
+            src: "/__convex_devtools"
+          }
+        });
+      });
+    }
+    const contextTypes = resolver.resolve("./runtime/utils/context");
+    addTypeTemplate({
+      filename: "types/convex-nuxt.d.ts",
+      getContents: () => `// Generated by use-convex
+import type { ConvexNuxtContext } from '${contextTypes}'
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig {
+    convex: {
+      url?: string
+      server?: boolean
+      client?: import('convex/browser').ConvexClientOptions
+      auth?: {
+        provider?: 'convex-auth'
+        cookie?: string
+        httpOnly?: boolean
+        presentCookie?: string
+      }
+    }
+  }
+}
+
+declare module 'nuxt/app' {
+  interface NuxtApp {
+    $convex: ConvexNuxtContext
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $convex: ConvexNuxtContext
+  }
+}
+
+export {}
+`
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/AuthLoading.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/AuthLoading.vue

@@ -0,0 +1,8 @@
+<script setup>
+import { useConvexAuth } from "../composables/useConvexAuth";
+const { isLoading, showAuthedUi } = useConvexAuth();
+</script>
+
+<template>
+  <slot v-if="isLoading && !showAuthedUi" />
+</template>