@pylonsync/create-pylon 0.3.345 → 0.3.347

package/templates/helpdesk/app/workspace.tsx

@@ -63,21 +63,28 @@ export interface WorkspaceData {
  * path, so there's one behaviour to reason about rather than two.
  */
 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: tickets, loading } = db.useQuery<TicketRow>("Ticket");
   const { data: customers } = db.useQuery<CustomerRow>("Customer");
   const { data: messages } = db.useQuery<MessageRow>("Message");
   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);
 
@@ -168,17 +175,14 @@ export function Workspace({
     <div className="flex h-screen overflow-hidden">
       <Sidebar
         workspace="Helpdesk"
-        email={email}
+        email={signedInEmail}
         pathname={pathname}
         counts={{
           "/": ticketList.filter(isOpen).length,
           "/customers": customerList.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/{inventory/app/login → helpdesk/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/helpdesk/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/inventory/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/inventory/app/movements/movements-view.tsx

@@ -7,6 +7,7 @@ import { DataTable, type ColumnDef } from "@/components/data-table";
 import { EmptyState } from "@/components/empty-state";
 import { relativeTime } from "@/lib/format";
 import { reasonById, signedQuantity } from "@/lib/stock";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type MovementRow } from "../workspace";
 
 /**
@@ -15,9 +16,10 @@ import { Workspace, type MovementRow } from "../workspace";
  * past valuation and make the current level unexplainable. Corrections are new
  * rows in the opposite direction.
  */
-export function MovementsView({ email }: { email: string }) {
+export function MovementsView() {
   return (
-    <Workspace email={email} pathname="/movements">
+    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+      <Workspace pathname="/movements">
       {(data) => {
         const columns: ColumnDef<MovementRow>[] = [
           {
@@ -98,6 +100,7 @@ export function MovementsView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/inventory/app/movements/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { MovementsView } from "./movements-view";
 
@@ -7,11 +7,6 @@ export const metadata: Metadata = {
   robots: "noindex",
 };
 
-export default function MovementsPage({ 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 <MovementsView email={me?.email ?? ""} />;
+export default function MovementsPage({}: PageProps) {
+  return <MovementsView />;
 }

package/templates/inventory/app/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ProductsView } from "./products-view";
 
@@ -10,24 +10,11 @@ export const metadata: Metadata = {
 /**
  * `/` — the stock 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 ProductsPage({
-  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 ProductsPage({ searchParams }: PageProps) {
   return (
     <ProductsView
-      email={me?.email ?? ""}
-      openNew={searchParams?.new === "product"}
+          openNew={searchParams?.new === "product"}
       initialFilter={searchParams?.filter}
     />
   );

package/templates/inventory/app/products/[id]/page.tsx

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { ProductView } from "./product-view";
 
@@ -8,16 +8,6 @@ export const metadata: Metadata = {
 };
 
 /** `app/products/[id]/page.tsx` -> `/products/:id`. */
-export default function ProductPage({
-  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 <ProductView email={me?.email ?? ""} productId={params.id} />;
+export default function ProductPage({ params }: PageProps<{ id: string }>) {
+  return <ProductView productId={params.id} />;
 }

package/templates/inventory/app/products/[id]/product-view.tsx

@@ -10,19 +10,19 @@ import { StockLevel } from "@/components/stock-level";
 import { MovementDialog } from "@/components/movement-dialog";
 import { relativeTime } from "@/lib/format";
 import { money, reasonById, signedQuantity } from "@/lib/stock";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
 export function ProductView({
-  email,
   productId,
 }: {
-  email: string;
   productId: string;
 }) {
   const [moveOpen, setMoveOpen] = useState(false);
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const product = data.products.find((p) => p.id === productId);
 
@@ -164,7 +164,8 @@ export function ProductView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }
 

package/templates/inventory/app/products-view.tsx

@@ -13,14 +13,13 @@ import { SummaryBar } from "@/components/summary-bar";
 import { StockLevel } from "@/components/stock-level";
 import { MovementDialog } from "@/components/movement-dialog";
 import { money, parseAmount, parseCount, stockState } from "@/lib/stock";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type ProductRow } from "./workspace";
 
 export function ProductsView({
-  email,
   openNew,
   initialFilter,
 }: {
-  email: string;
   openNew?: boolean;
   initialFilter?: string;
 }) {
@@ -53,7 +52,8 @@ export function ProductsView({
   }, []);
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Inventory" description="Your team shares one stock ledger. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const level = (id: string) => data.levels.get(id) ?? 0;
 
@@ -208,6 +208,7 @@ export function ProductsView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/inventory/app/workspace.tsx

@@ -38,20 +38,27 @@ export interface WorkspaceData {
  * damaged.
  */
 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: products, loading } = db.useQuery<ProductRow>("Product");
   const { data: movements } = db.useQuery<MovementRow>("Movement");
   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);
 
@@ -133,14 +140,11 @@ export function Workspace({
     <div className="flex h-screen overflow-hidden">
       <Sidebar
         workspace="Inventory"
-        email={email}
+        email={signedInEmail}
         pathname={pathname}
         counts={{ "/": summary.skuCount }}
         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/{helpdesk/app/login → inventory/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/inventory/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/invoices/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 { money, totals } from "@/lib/billing";
+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="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+      <Workspace pathname="/clients">
       {(data) => {
         // Outstanding per client, derived rather than stored — one less thing
         // to keep in sync when a payment lands.
@@ -125,6 +127,7 @@ export function ClientsView({ email }: { email: string }) {
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/invoices/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/invoices/app/invoices/[id]/invoice-view.tsx

@@ -13,20 +13,20 @@ import { TotalsPanel } from "@/components/totals-panel";
 import { PaymentDialog } from "@/components/payment-dialog";
 import { relativeTime } from "@/lib/format";
 import { STATUSES, displayStatus, money, totals } from "@/lib/billing";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
 export function InvoiceView({
-  email,
   invoiceId,
 }: {
-  email: string;
   invoiceId: string;
 }) {
   const router = useRouter();
   const [payOpen, setPayOpen] = useState(false);
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const invoice = data.invoices.find((i) => i.id === invoiceId);
 
@@ -239,7 +239,8 @@ export function InvoiceView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }
 

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

@@ -1,4 +1,4 @@
-import React, { use } from "react";
+import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
 import { InvoiceView } from "./invoice-view";
 
@@ -8,16 +8,6 @@ export const metadata: Metadata = {
 };
 
 /** `app/invoices/[id]/page.tsx` -> `/invoices/:id`. */
-export default function InvoicePage({
-  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 <InvoiceView email={me?.email ?? ""} invoiceId={params.id} />;
+export default function InvoicePage({ params }: PageProps<{ id: string }>) {
+  return <InvoiceView invoiceId={params.id} />;
 }

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

@@ -16,13 +16,12 @@ import {
   money,
   totals,
 } from "@/lib/billing";
+import { RequireAuth } from "@/components/require-auth";
 import { Workspace, type InvoiceRow } from "./workspace";
 
 export function InvoicesView({
-  email,
   openNew,
 }: {
-  email: string;
   openNew?: boolean;
 }) {
   const router = useRouter();
@@ -67,7 +66,8 @@ export function InvoicesView({
   }, [creating]);
 
   return (
-    <Workspace email={email} pathname="/">
+    <RequireAuth title="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+      <Workspace pathname="/">
       {(data) => {
         const columns: ColumnDef<InvoiceRow>[] = [
           {
@@ -178,6 +178,7 @@ export function InvoicesView({
           </>
         );
       }}
-    </Workspace>
+      </Workspace>
+    </RequireAuth>
   );
 }

package/templates/invoices/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" />