Auth (remote functions)

The remote-functions variant of vela enable auth. It generates the same login, signup, one-time code, password reset, email change and settings flows, but every form posts to a SvelteKit remote function in a form.remote.ts instead of a form action handled with sveltekit-superforms.

Syntax

$ vela enable auth --remote

--remote needs vela 0.15.13 or later; earlier releases ignore it and generate the form-action version. The pattern page shows every file this variant generates.

Like the form-action version, it needs a backend and shadcn-svelte.

What changes

Each auth page keeps its +page.svelte and +page.ts, and its form handler moves into a form.remote.ts next to it:

src/routes/(public)/(auth)/login/form.remote.ts
src/routes/(public)/(auth)/signup/form.remote.ts
src/routes/(public)/(auth)/reset/form.remote.ts
src/routes/(public)/(auth)/otp/[token]/form.remote.ts
src/routes/(public)/(auth)/welcome/form.remote.ts
src/routes/(public)/(auth)/confirm-reset/[token]/form.remote.ts
src/routes/(public)/(auth)/confirm-email-change/[token]/form.remote.ts
src/routes/(app)/settings/form.remote.ts

Each one exports a form(). A form with fields takes the page’s Zod schema from src/lib/schemas/ as its first argument, so the handler only runs with valid, typed data. Handlers read locals, cookies and url from getRequestEvent(), and a PocketBase error such as a wrong password comes back as a { message } result that the page shows. A +page.server.ts that stays keeps only its load; the login page’s still asks PocketBase for the enabled sign-in methods. The settings page exports four functions from one file: updateProfileForm, changeEmailForm, changePasswordForm and resendVerificationForm.

The generated pages don’t use sveltekit-superforms or formsnap, and the command doesn’t add them. It adds sveltekit-flash-message and Zod if the project doesn’t have them.

Config

Remote functions are experimental in SvelteKit, so the command turns them on in the sveltekit() options in vite.config.ts, alongside Svelte’s async mode:

sveltekit({
  experimental: { remoteFunctions: true },
  compilerOptions: { experimental: { async: true } }
})

If your config isn’t in a shape the command can edit, these are the lines to add by hand.

What stays the same

The protected (app) group, the dashboard layout and sidebar, the pb_auth cookie, OAuth, one-time codes, the email templates, the locked-down users rules and the oauth_accounts collection are identical to vela enable auth. Form actions and remote functions can coexist, so the rest of the app can use either.