@pylonsync/create-pylon 0.3.345 → 0.3.347

package/templates/invoices/app/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { InvoicesView } from "./invoices-view";
 
@@ -10,27 +10,11 @@ export const metadata: Metadata = {
 /**
  * `/` — the invoice list.
  *
- * Server-side auth gate only. Reading `auth` opts this render out of caching,
- * which is correct: every screen here is private.
- *
- * The signed-in email comes from the User row — `PageAuth` is
- * `{ user_id, is_admin, tenant_id, roles }` and carries no email.
  */
-export default function InvoicesPage({
-  auth,
-  response,
-  searchParams,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+export default function InvoicesPage({ searchParams }: PageProps) {
   return (
     <InvoicesView
-      email={me?.email ?? ""}
-      openNew={searchParams?.new === "invoice"}
+          openNew={searchParams?.new === "invoice"}
     />
   );
 }

package/templates/invoices/app/workspace.tsx

@@ -46,20 +46,28 @@ export interface WorkspaceData {
  * the moment one of them marks it paid.
  */
 export function Workspace({
-  email,
   pathname,
   children,
 }: {
-  email: string;
   pathname: string;
   children: (data: WorkspaceData) => React.ReactNode;
 }) {
   const router = useRouter();
-  const { signOut } = useAuth();
+  // The signed-in identity comes from the CLIENT session, not from an SSR
+  // prop: the session cookie is SameSite=Lax and browsers withhold it inside
+  // the builder's cross-site preview iframe, so a server-resolved email would
+  // be empty exactly where this app is most often viewed.
+  const { signOut, userId } = useAuth();
   const { data: invoices, loading } = db.useQuery<InvoiceRow>("Invoice");
   const { data: clients } = db.useQuery<ClientRow>("Client");
   const { data: items } = db.useQuery<LineItemRow>("LineItem");
   const { data: payments } = db.useQuery<PaymentRow>("Payment");
+  const { data: users } = db.useQuery<UserRow>("User");
+
+  // Whoever is signed in, named from the synced User row rather than an
+  // SSR prop — see the note on useAuth above.
+  const signedInEmail =
+    (users ?? []).find((user) => user.id === userId)?.email ?? "";
 
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -140,14 +148,11 @@ export function Workspace({
     <div className="flex h-screen overflow-hidden">
       <Sidebar
         workspace="Invoices"
-        email={email}
+        email={signedInEmail}
         pathname={pathname}
         counts={{ "/": invoiceList.length, "/clients": clientList.length }}
         onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={async () => {
-          await signOut();
-          window.location.assign("/login");
-        }}
+        onSignOut={() => void signOut()}
       />
       <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
 

package/templates/invoices/{app/login → components}/auth-form.tsx

@@ -16,9 +16,10 @@ import { Label } from "@/components/ui/label";
  * then `persistSession` writes the token so the sync engine and `callFn`
  * authenticate as this user on the next load.
  *
- * The navigation is a full `assign`, not a client route change, so the SSR
- * runtime re-resolves auth from the HttpOnly cookie and the first paint of the
- * workspace is already signed in.
+ * No navigation afterwards: `persistSession` notifies the sync engine and the
+ * client-side gate swaps the app in. Reloading would hand the decision to the
+ * SSR cookie, which browsers withhold inside the builder's cross-site preview
+ * iframe — that's the sign-in loop this avoids.
  */
 export function AuthForm() {
   const [mode, setMode] = useState<"login" | "signup">("login");
@@ -36,8 +37,10 @@ export function AuthForm() {
         mode === "login"
           ? await passwordLogin({ email, password })
           : await passwordRegister({ email, password });
+      // No navigation: persistSession notifies the sync engine, RequireAuth
+      // re-renders, and the app appears in place. A full page load here would
+      // depend on the SSR session cookie, which a cross-site iframe withholds.
       persistSession(session);
-      window.location.assign("/");
     } catch (err) {
       setError(messageFor(err));
       setPending(false);

package/templates/invoices/components/require-auth.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@pylonsync/client";
+import { AuthForm } from "@/components/auth-form";
+
+/**
+ * Client-side auth gate.
+ *
+ * Deliberately NOT a server-side `response.redirect("/login")`. The session
+ * cookie is `SameSite=Lax`, which browsers withhold on cross-site iframe
+ * navigations — and this app is shown inside an iframe in the Pylon Cloud
+ * builder's live preview. An SSR gate there sees every request as anonymous no
+ * matter how many times you sign in, so signing in bounces straight back to the
+ * form. The token in local storage is visible to the client either way, so the
+ * gate belongs here.
+ *
+ * It also removes a full page load from the sign-in path: authenticating swaps
+ * this component's children in place instead of navigating.
+ */
+export function RequireAuth({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  const { isSignedIn, isLoaded } = useAuth();
+
+  // `isLoaded` covers the beat before the engine has resolved the stored token.
+  // Rendering the form during it would flash a sign-in screen at someone who is
+  // already signed in.
+  if (!isLoaded) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      </main>
+    );
+  }
+
+  if (!isSignedIn) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-6">
+        <div className="w-full max-w-[320px]">
+          <div className="mb-7 flex items-center gap-2">
+            <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+              {title.slice(0, 1).toUpperCase()}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+          </div>
+          <h1 className="text-[19px] font-semibold tracking-tight">
+            Sign in to your workspace
+          </h1>
+          <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>
+          <div className="mt-6">
+            <AuthForm />
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return <>{children}</>;
+}

package/templates/projects/app/clients/clients-view.tsx

@@ -10,13 +10,15 @@ import { EmptyState } from "@/components/empty-state";
 import { RecordDialog } from "@/components/record-dialog";
 import { Avatar } from "@/components/avatar";
 import { billableCents, duration, minutesForProject, money } from "@/lib/work";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type ClientRow } from "../workspace";
 
-export function ClientsView({ email }: { email: string }) {
+export function ClientsView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <Workspace email={email} pathname="/clients">
+    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+      <Workspace pathname="/clients">
       {(data) => {
         const forClient = (clientId: string) =>
           data.projects.filter((p) => p.clientId === clientId);
@@ -121,6 +123,7 @@ export function ClientsView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/projects/app/clients/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ClientsView } from "./clients-view";
 
@@ -7,11 +7,6 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
 
-export default function ClientsPage({ auth, response, serverData }: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <ClientsView email={me?.email ?? ""} />;
+export default function ClientsPage({}: PageProps) {
+  return <ClientsView />;
 }

package/templates/projects/app/layout.tsx

@@ -9,13 +9,13 @@ interface LayoutProps {
  * lives in `app/workspace.tsx` instead, because it needs the synced data; this
  * layer only sets up the page.
  *
- * `class="dark"` makes dark the default theme. The light tokens in globals.css
- * are complete and tested, so removing the class flips the whole app; swap it
- * for a stored preference when you want a toggle.
+ * Light by default. The dark tokens in globals.css are complete, so adding
+ * `className="dark"` here flips the whole app — or wire it to a stored
+ * preference, or to `prefers-color-scheme`, when you want a toggle.
  */
 export default function RootLayout({ children }: LayoutProps) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />

package/templates/projects/app/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ProjectsView } from "./projects-view";
 
@@ -10,21 +10,9 @@ export const metadata: Metadata = {
 /**
  * `/` — the project list.
  *
- * Server-side auth gate only. Reading `auth` opts this render out of caching,
- * which is correct: every screen here is private.
  */
-export default function ProjectsPage({
-  auth,
-  response,
-  searchParams,
-  serverData,
-}: PageProps) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+export default function ProjectsPage({ searchParams }: PageProps) {
   return (
-    <ProjectsView email={me?.email ?? ""} openNew={searchParams?.new === "project"} />
+    <ProjectsView openNew={searchParams?.new === "project"} />
   );
 }

package/templates/projects/app/projects/[id]/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ProjectView } from "./project-view";
 
@@ -8,16 +8,6 @@ export const metadata: Metadata = {
 };
 
 /** `app/projects/[id]/page.tsx` -> `/projects/:id`. */
-export default function ProjectPage({
-  auth,
-  response,
-  params,
-  serverData,
-}: PageProps<{ id: string }>) {
-  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
-    response.redirect("/login");
-    return null;
-  }
-  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
-  return <ProjectView email={me?.email ?? ""} projectId={params.id} />;
+export default function ProjectPage({ params }: PageProps<{ id: string }>) {
+  return <ProjectView projectId={params.id} />;
 }

package/templates/projects/app/projects/[id]/project-view.tsx

@@ -13,13 +13,12 @@ import { BoardSkeleton } from "@/components/board-skeleton";
 import { BudgetBar } from "@/components/budget-bar";
 import { TimeDialog } from "@/components/time-dialog";
 import { PROJECT_STATUSES, duration, minutesForProject, progress } from "@/lib/work";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
 export function ProjectView({
-  email,
   projectId,
 }: {
-  email: string;
   projectId: string;
 }) {
   const router = useRouter();
@@ -27,7 +26,8 @@ export function ProjectView({
   const [timeFor, setTimeFor] = useState<{ id: string; title: string } | null>(null);
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const project = data.projects.find((p) => p.id === projectId);
 
@@ -174,6 +174,7 @@ export function ProjectView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/projects/app/projects-view.tsx

@@ -16,20 +16,20 @@ import {
   parseDuration,
   progress,
 } from "@/lib/work";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type ProjectRow } from "./workspace";
 
 export function ProjectsView({
-  email,
   openNew,
 }: {
-  email: string;
   openNew?: boolean;
 }) {
   const router = useRouter();
   const [open, setOpen] = useState(Boolean(openNew));
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Projects" description="Your team shares one set of projects. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const columns: ColumnDef<ProjectRow>[] = [
           {
@@ -176,6 +176,7 @@ export function ProjectsView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/projects/app/workspace.tsx

@@ -47,22 +47,29 @@ export interface WorkspaceData {
  * a standup doesn\'t start with reconciling two views of the work.
  */
 export function Workspace({
-  email,
   pathname,
   children,
 }: {
-  email: string;
   pathname: string;
   children: (data: WorkspaceData) => React.ReactNode;
 }) {
   const router = useRouter();
-  const { signOut } = useAuth();
+  // The signed-in identity comes from the CLIENT session, not from an SSR
+  // prop: the session cookie is SameSite=Lax and browsers withhold it inside
+  // the builder's cross-site preview iframe, so a server-resolved email would
+  // be empty exactly where this app is most often viewed.
+  const { signOut, userId } = useAuth();
   const { data: projects, loading } = db.useQuery<ProjectRow>("Project");
   const { data: clients } = db.useQuery<ClientRow>("Client");
   const { data: tasks } = db.useQuery<TaskRow>("Task");
   const { data: entries } = db.useQuery<TimeEntryRow>("TimeEntry");
   const { data: users } = db.useQuery<UserRow>("User");
 
+  // Whoever is signed in, named from the synced User row rather than an
+  // SSR prop — see the note on useAuth above.
+  const signedInEmail =
+    (users ?? []).find((user) => user.id === userId)?.email ?? "";
+
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
 
@@ -153,17 +160,14 @@ export function Workspace({
     <div className="flex h-screen overflow-hidden">
       <Sidebar
         workspace="Projects"
-        email={email}
+        email={signedInEmail}
         pathname={pathname}
         counts={{
           "/": projectList.filter((p) => p.status === "active").length,
           "/clients": clientList.length,
         }}
         onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={async () => {
-          await signOut();
-          window.location.assign("/login");
-        }}
+        onSignOut={() => void signOut()}
       />
       <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
 

package/templates/projects/components/auth-form.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ApiError,
+  passwordLogin,
+  passwordRegister,
+  persistSession,
+} from "@pylonsync/client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+/**
+ * One form, two modes. Calls the built-in auth API (`/api/auth/password/*`),
+ * then `persistSession` writes the token so the sync engine and `callFn`
+ * authenticate as this user on the next load.
+ *
+ * No navigation afterwards: `persistSession` notifies the sync engine and the
+ * client-side gate swaps the app in. Reloading would hand the decision to the
+ * SSR cookie, which browsers withhold inside the builder's cross-site preview
+ * iframe — that's the sign-in loop this avoids.
+ */
+export function AuthForm() {
+  const [mode, setMode] = useState<"login" | "signup">("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    setError(null);
+    setPending(true);
+    try {
+      const session =
+        mode === "login"
+          ? await passwordLogin({ email, password })
+          : await passwordRegister({ email, password });
+      // No navigation: persistSession notifies the sync engine, RequireAuth
+      // re-renders, and the app appears in place. A full page load here would
+      // depend on the SSR session cookie, which a cross-site iframe withholds.
+      persistSession(session);
+    } catch (err) {
+      setError(messageFor(err));
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <form onSubmit={onSubmit} className="space-y-3.5">
+        <div className="space-y-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            autoComplete="email"
+            placeholder="you@company.com"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
+          />
+        </div>
+        {error ? (
+          <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-[12px] leading-snug text-destructive">
+            {error}
+          </p>
+        ) : null}
+        <Button type="submit" disabled={pending} className="w-full">
+          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+        </Button>
+      </form>
+
+      <p className="text-center text-[12px] text-muted-foreground">
+        {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => {
+            setMode(mode === "login" ? "signup" : "login");
+            setError(null);
+          }}
+          className="font-medium text-foreground underline underline-offset-2"
+        >
+          {mode === "login" ? "Create an account" : "Sign in"}
+        </button>
+      </p>
+    </div>
+  );
+}
+
+// `ApiError` carries a stable `.code`, so branch on the code rather than the
+// message — the copy here is ours, the message is the framework's.
+function messageFor(err: unknown): string {
+  if (err instanceof ApiError) {
+    switch (err.code) {
+      case "INVALID_CREDENTIALS":
+        return "Wrong email or password.";
+      case "USER_EXISTS":
+        return "That email is already registered — sign in instead.";
+      case "WEAK_PASSWORD":
+        return "Pick a longer password — at least 10 characters.";
+      case "PWNED_PASSWORD":
+        return "That password has appeared in a known breach. Choose another.";
+      case "RATE_LIMITED":
+        return "Too many attempts — try again in a minute.";
+      default:
+        return err.message;
+    }
+  }
+  if (err instanceof Error) return err.message;
+  return "Something went wrong. Try again.";
+}

package/templates/projects/components/require-auth.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@pylonsync/client";
+import { AuthForm } from "@/components/auth-form";
+
+/**
+ * Client-side auth gate.
+ *
+ * Deliberately NOT a server-side `response.redirect("/login")`. The session
+ * cookie is `SameSite=Lax`, which browsers withhold on cross-site iframe
+ * navigations — and this app is shown inside an iframe in the Pylon Cloud
+ * builder's live preview. An SSR gate there sees every request as anonymous no
+ * matter how many times you sign in, so signing in bounces straight back to the
+ * form. The token in local storage is visible to the client either way, so the
+ * gate belongs here.
+ *
+ * It also removes a full page load from the sign-in path: authenticating swaps
+ * this component's children in place instead of navigating.
+ */
+export function RequireAuth({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+}) {
+  const { isSignedIn, isLoaded } = useAuth();
+
+  // `isLoaded` covers the beat before the engine has resolved the stored token.
+  // Rendering the form during it would flash a sign-in screen at someone who is
+  // already signed in.
+  if (!isLoaded) {
+    return (
+      <main className="flex min-h-screen items-center justify-center">
+        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      </main>
+    );
+  }
+
+  if (!isSignedIn) {
+    return (
+      <main className="flex min-h-screen items-center justify-center px-6">
+        <div className="w-full max-w-[320px]">
+          <div className="mb-7 flex items-center gap-2">
+            <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
+              {title.slice(0, 1).toUpperCase()}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+          </div>
+          <h1 className="text-[19px] font-semibold tracking-tight">
+            Sign in to your workspace
+          </h1>
+          <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>
+          <div className="mt-6">
+            <AuthForm />
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  return <>{children}</>;
+}

package/templates/crm/app/login/page.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import type { Metadata, PageProps } from "@pylonsync/react";
-import { AuthForm } from "./auth-form";
-
-export const metadata: Metadata = {
-  title: "Sign in",
-  robots: "noindex",
-};
-
-export default function LoginPage({ auth, response }: PageProps) {
-  // Already signed in? Nothing to do here.
-  if (auth.user_id && !auth.user_id.startsWith("guest_")) {
-    response.redirect("/");
-    return null;
-  }
-
-  return (
-    <main className="flex min-h-screen items-center justify-center px-6">
-      <div className="w-full max-w-[320px]">
-        <div className="mb-7 flex items-center gap-2">
-          <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
-            C
-          </span>
-          <span className="text-[15px] font-semibold tracking-tight">CRM</span>
-        </div>
-        <h1 className="text-[19px] font-semibold tracking-tight">
-          Sign in to your workspace
-        </h1>
-        <p className="mt-1 text-[13px] text-muted-foreground">
-          Your team shares one pipeline. Anyone with an account sees it.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
-        </div>
-      </div>
-    </main>
-  );
-}