feat(login): dev-only prefill from VITE_ADMIN_EMAIL/PASSWORD

When import.meta.env.DEV is true, the login form's email and password
fields are populated from the corresponding env vars. Shaves the manual
re-typing during dev iteration.

Production builds get empty strings regardless of build-time env values:
the prefill is gated on import.meta.env.DEV (which Vite replaces with
literal `false` at build time, so the surrounding ternary tree-shakes
and the env values can't bleed into the prod bundle even if accidentally
set in the build env).

Files:
- src/vite-env.d.ts (new): ImportMetaEnv augmentation with the four
  VITE_* vars we use (admin email/password, dev directus/processor URLs).
  Gives proper typing under strict mode.
- src/ui/pages/login.tsx: devDefaults computed once at module scope from
  import.meta.env. Form's defaultValues uses it.
- .env.example: documents VITE_ADMIN_EMAIL and VITE_ADMIN_PASSWORD with
  examples; notes the prod-ignore guarantee.
- .gitignore: adds *.env (defensive — complements the existing *.local
  pattern). .env.example stays committable (doesn't end in .env).
This commit is contained in:
2026-05-02 18:27:59 +02:00
parent 152578f767
commit 8d0bc2bb1e
5 changed files with 38 additions and 2 deletions
+7
View File
@@ -11,3 +11,10 @@ VITE_DEV_DIRECTUS_URL=http://localhost:8055
# Processor live-position WebSocket. Defaults to ws://localhost:8081 # Processor live-position WebSocket. Defaults to ws://localhost:8081
# (the LIVE_WS_PORT default in the processor's Phase 1.5 task spec). # (the LIVE_WS_PORT default in the processor's Phase 1.5 task spec).
VITE_DEV_PROCESSOR_WS_URL=ws://localhost:8081 VITE_DEV_PROCESSOR_WS_URL=ws://localhost:8081
# Local-dev login form prefill. The login page populates these into the
# email/password fields on render when import.meta.env.DEV is true. Skip
# the manual typing during dev iteration. Production builds ignore them
# (the prefill is gated on import.meta.env.DEV).
# VITE_ADMIN_EMAIL=admin@example.com
# VITE_ADMIN_PASSWORD=your-local-admin-password
+1
View File
@@ -25,3 +25,4 @@ src/routeTree.gen.ts
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
*.env
@@ -140,9 +140,10 @@ This is the right trade-off: logout that fails should _not_ leave the user appea
**Bonus from this task** — caught a missing `"strict": true` in `tsconfig.app.json`. TanStack Router emits a `"strictNullChecks must be enabled"` conditional-type error in editors when strict mode is off; CI's `tsc -b` was lenient. Added `strict: true` (along with the existing strict-adjacent flags); typecheck still green. **Bonus from this task** — caught a missing `"strict": true` in `tsconfig.app.json`. TanStack Router emits a `"strictNullChecks must be enabled"` conditional-type error in editors when strict mode is off; CI's `tsc -b` was lenient. Added `strict: true` (along with the existing strict-adjacent flags); typecheck still green.
**Smoke check:** `pnpm typecheck`, `pnpm lint`, `pnpm format:check`, `pnpm build` all green. Bundle: 353KB main + same per-route chunks as 1.7 (login 37KB, _authed 1.4KB grew slightly with the LogoutButton). No measurable bundle impact from the logout orchestration. **Smoke check:** `pnpm typecheck`, `pnpm lint`, `pnpm format:check`, `pnpm build` all green. Bundle: 353KB main + same per-route chunks as 1.7 (login 37KB, \_authed 1.4KB grew slightly with the LogoutButton). No measurable bundle impact from the logout orchestration.
**Browser smoke pending:** **Browser smoke pending:**
1. Sign in. Click "Sign out". Watch button show "Signing out…", then redirect to `/login`. Hard refresh on `/login` stays on `/login`. 1. Sign in. Click "Sign out". Watch button show "Signing out…", then redirect to `/login`. Hard refresh on `/login` stays on `/login`.
2. Sign in in tab A. Open tab B (same SPA). Sign out in tab A. Tab B's home page should redirect to `/login` on next interaction (or immediately, depending on whether the storage event triggers re-render). 2. Sign in in tab A. Open tab B (same SPA). Sign out in tab A. Tab B's home page should redirect to `/login` on next interaction (or immediately, depending on whether the storage event triggers re-render).
3. With DevTools "Network: offline", click sign out. Should still navigate to `/login` (server call fails, local state forced to anonymous). 3. With DevTools "Network: offline", click sign out. Should still navigate to `/login` (server call fails, local state forced to anonymous).
+12 -1
View File
@@ -23,6 +23,17 @@ const LoginFormSchema = z.object({
type LoginForm = z.infer<typeof LoginFormSchema>; type LoginForm = z.infer<typeof LoginFormSchema>;
/**
* Dev-only prefill from `VITE_ADMIN_EMAIL` / `VITE_ADMIN_PASSWORD`.
* Production builds get empty strings regardless of build-time env values.
*/
const devDefaults = import.meta.env.DEV
? {
email: import.meta.env.VITE_ADMIN_EMAIL ?? '',
password: import.meta.env.VITE_ADMIN_PASSWORD ?? '',
}
: { email: '', password: '' };
export type LoginPageProps = { export type LoginPageProps = {
/** Called once the auth store transitions to `'authenticated'`. */ /** Called once the auth store transitions to `'authenticated'`. */
onAuthenticated?: () => void; onAuthenticated?: () => void;
@@ -35,7 +46,7 @@ export function LoginPage({ onAuthenticated }: LoginPageProps) {
const form = useForm<LoginForm>({ const form = useForm<LoginForm>({
resolver: zodResolver(LoginFormSchema), resolver: zodResolver(LoginFormSchema),
defaultValues: { email: '', password: '' }, defaultValues: devDefaults,
}); });
// If the auth store flips to authenticated (e.g. login succeeds, or another // If the auth store flips to authenticated (e.g. login succeeds, or another
+16
View File
@@ -0,0 +1,16 @@
/// <reference types="vite/client" />
interface ImportMetaEnv {
/** Local-dev convenience: prefill the login form's email field. Only consumed when import.meta.env.DEV. */
readonly VITE_ADMIN_EMAIL?: string;
/** Local-dev convenience: prefill the login form's password field. Only consumed when import.meta.env.DEV. */
readonly VITE_ADMIN_PASSWORD?: string;
/** Override the dev proxy's Directus target. See vite.config.ts. */
readonly VITE_DEV_DIRECTUS_URL?: string;
/** Override the dev proxy's Processor WS target. See vite.config.ts. */
readonly VITE_DEV_PROCESSOR_WS_URL?: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}