Add auth UI: login/register pages, OIDC button, route guard (#6)

Frontend for pansy auth, rendering whatever /auth/providers reports.

- lib/auth.ts: zod-validated User/Providers, a shared meQueryOptions
  (a 401 resolves to null, not an error) reused by useMe() and the router
  guard, useProviders(), and useLogin/useRegister/useLogout mutations that
  prime/clear the me cache (logout also drops non-auth cached data).
- lib/queryClient.ts: one QueryClient shared by the React tree and the
  router context so guard and components hit the same cache.
- router.tsx: createRootRouteWithContext with the queryClient; requireAuth
  (redirects to /login?redirect=<dest>) on gardens/plants/editor, and
  requireGuest on login/register (bounces authed users away). Login search
  params (redirect, error) validated as optional; redirect targets are
  restricted to same-origin paths.
- pages/LoginPage: OIDC button (label from providers) linking to
  /auth/oidc/login, "or" divider, local email/password form, and friendly
  messages for the OIDC callback ?error= codes. RegisterPage: email +
  display name + password (min 8), registration-closed and SSO-only
  handling; auto-login lands on /gardens.
- AppShell: auth-aware nav — shows the user's display name + Sign out when
  logged in, Sign in otherwise; nav links only when authed.
- ui/: TextField (16px text to avoid iOS zoom, autocomplete + a11y),
  Button (+ shared buttonClasses for the OIDC anchor), Alert; AuthCard.

Verified in a real browser against the embedded binary: register →
auto-login → /gardens; refresh stays in; Sign out → /login; a logged-out
/gardens/1 redirects to /login and returns after login; OIDC button renders
with the Authentik label when configured. tsc --noEmit clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi

web/src/components/auth/AuthCard.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react'
+
+/** Centered card layout shared by the login and register pages. */
+export function AuthCard({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string
+  subtitle?: string
+  children: ReactNode
+}) {
+  return (
+    <div className="mx-auto flex min-h-[70vh] w-full max-w-sm flex-col justify-center">
+      <div className="rounded-xl border border-border bg-surface p-6 shadow-sm">
+        <h1 className="text-xl font-semibold tracking-tight text-fg">{title}</h1>
+        {subtitle && <p className="mt-1 text-sm text-muted">{subtitle}</p>}
+        <div className="mt-5">{children}</div>
+      </div>
+    </div>
+  )
+}

web/src/components/layout/AppShell.tsx

@@ -1,4 +1,5 @@
-import { Link, Outlet } from '@tanstack/react-router'
+import { Link, Outlet, useNavigate } from '@tanstack/react-router'
+import { useLogout, useMe } from '@/lib/auth'
 
 const navLinks = [
   { to: '/gardens', label: 'Gardens' },
@@ -14,6 +15,16 @@ const navLinkInactive = 'text-muted hover:bg-border/60 hover:text-fg'
 
 /** Top-level chrome: a sticky nav bar plus the routed page in an <Outlet>. */
 export function AppShell() {
+  const me = useMe()
+  const logout = useLogout()
+  const navigate = useNavigate()
+  const user = me.data
+
+  async function onLogout() {
+    await logout.mutateAsync()
+    await navigate({ to: '/login' })
+  }
+
   return (
     <div className="flex min-h-full flex-col">
       <header className="sticky top-0 z-10 border-b border-border bg-surface/90 backdrop-blur">
@@ -21,25 +32,42 @@ export function AppShell() {
           <Link to="/gardens" className="text-lg font-semibold text-accent-strong">
             🌱 pansy
           </Link>
+
           <div className="flex flex-1 items-center gap-1">
-            {navLinks.map((l) => (
-              <Link
-                key={l.to}
-                to={l.to}
-                className={navLinkBase}
-                activeProps={{ className: navLinkActive }}
-                inactiveProps={{ className: navLinkInactive }}
-              >
-                {l.label}
-              </Link>
-            ))}
+            {user &&
+              navLinks.map((l) => (
+                <Link
+                  key={l.to}
+                  to={l.to}
+                  className={navLinkBase}
+                  activeProps={{ className: navLinkActive }}
+                  inactiveProps={{ className: navLinkInactive }}
+                >
+                  {l.label}
+                </Link>
+              ))}
           </div>
-          <Link
-            to="/login"
-            className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg"
-          >
-            Sign in
-          </Link>
+
+          {user ? (
+            <div className="flex items-center gap-2">
+              <span className="hidden text-sm text-muted sm:inline">{user.displayName}</span>
+              <button
+                type="button"
+                onClick={onLogout}
+                disabled={logout.isPending}
+                className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg disabled:opacity-60"
+              >
+                {logout.isPending ? 'Signing out…' : 'Sign out'}
+              </button>
+            </div>
+          ) : (
+            <Link
+              to="/login"
+              className="rounded-md px-3 py-1.5 text-sm font-medium text-muted transition-colors hover:text-fg"
+            >
+              Sign in
+            </Link>
+          )}
         </nav>
       </header>
 

web/src/components/ui/Alert.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+type AlertTone = 'error' | 'info'
+
+/** A small inline notice for form errors and status messages. */
+export function Alert({ tone = 'error', children }: { tone?: AlertTone; children: ReactNode }) {
+  return (
+    <div
+      role={tone === 'error' ? 'alert' : 'status'}
+      className={cn(
+        'rounded-md border px-3 py-2 text-sm',
+        tone === 'error' && 'border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-300',
+        tone === 'info' && 'border-border bg-border/30 text-muted',
+      )}
+    >
+      {children}
+    </div>
+  )
+}

web/src/components/ui/Button.tsx

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+export type ButtonVariant = 'primary' | 'ghost'
+
+/** Shared button styling, exported so anchor "buttons" (e.g. the OIDC link) match. */
+export function buttonClasses(variant: ButtonVariant = 'primary', className?: string) {
+  return cn(
+    'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors',
+    'outline-none focus-visible:ring-2 focus-visible:ring-accent/40',
+    'disabled:cursor-not-allowed disabled:opacity-60',
+    variant === 'primary' && 'bg-accent text-accent-contrast hover:bg-accent-strong',
+    variant === 'ghost' && 'border border-border text-fg hover:bg-border/50',
+    className,
+  )
+}
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+}
+
+export function Button({ variant = 'primary', className, type = 'button', ...props }: ButtonProps) {
+  return <button type={type} className={buttonClasses(variant, className)} {...props} />
+}

web/src/components/ui/TextField.tsx

@@ -0,0 +1,43 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  label: string
+  hint?: string
+}
+
+// A labelled text input. text-base (16px) is deliberate: smaller fonts make iOS
+// Safari zoom on focus. The label's htmlFor falls back to the field name.
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
+  { label, hint, id, name, className, ...props },
+  ref,
+) {
+  const inputId = id ?? name
+  const hintId = hint ? `${inputId}-hint` : undefined
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={inputId} className="text-sm font-medium text-fg">
+        {label}
+      </label>
+      <input
+        ref={ref}
+        id={inputId}
+        name={name}
+        aria-describedby={hintId}
+        className={cn(
+          'w-full rounded-md border border-border bg-surface px-3 py-2 text-base text-fg',
+          'placeholder:text-muted/70 outline-none transition-colors',
+          'focus:border-accent focus:ring-2 focus:ring-accent/30',
+          'disabled:opacity-60',
+          className,
+        )}
+        {...props}
+      />
+      {hint && (
+        <p id={hintId} className="text-xs text-muted">
+          {hint}
+        </p>
+      )}
+    </div>
+  )
+})