auth and cloud sync work in progress

Author: yujonglee

.drizzle/store.json

@@ -19,4 +19,4 @@
       }
     ]
   ]
-}
+}

apps/api/package.json

@@ -13,7 +13,9 @@
     "@supabase/supabase-js": "^2.58.0",
     "@t3-oss/env-core": "^0.13.8",
     "@tailwindcss/vite": "^4.1.14",
+    "drizzle-orm": "^0.44.6",
     "hono": "^4.9.10",
+    "postgres": "^3.4.7",
     "tailwindcss": "^4.1.14",
     "zod": "^4.1.12"
   },

apps/api/src/env.ts

@@ -12,6 +12,7 @@ export const getEnv = (c: Context<Env>) =>
       OPENAI_DEFAULT_MODEL: z.string().min(1),
       OPENAI_BASE_URL: z.string().min(1),
       OPENAI_API_KEY: z.string().min(1),
+      DATABASE_URL: z.string().min(1),
       SUPABASE_URL: z.string().min(1),
       SUPABASE_SERVICE_ROLE_KEY: z.string().min(1),
     },

apps/api/src/index.tsx

@@ -1,18 +1,22 @@
 import { zValidator } from "@hono/zod-validator";
+import { sql } from "drizzle-orm";
 import { Hono } from "hono";
+import { logger } from "hono/logger";
 import { proxy } from "hono/proxy";
 import { z } from "zod";
 
 import { getEnv } from "./env";
+import { drizzlePersisterMiddleware } from "./middleware/drizzle";
 import { supabaseMiddleware } from "./middleware/supabase";
 import { renderer } from "./renderer";
 import type { Env } from "./types";
 
 const app = new Hono<Env>();
+app.use(logger());
 app.use("/v1", supabaseMiddleware());
 
 app.get("/health", (c) => c.text("OK"));
-app.get("/", renderer, (c) => {
+app.get("/callback/auth", renderer, (c) => {
   const params = c.req.query();
   const code = params.code;
   const deeplink = "hypr://auth/callback?" + new URLSearchParams(params).toString();
@@ -56,39 +60,87 @@ app.get("/", renderer, (c) => {
 
 app.post(
   "/v1/write",
+  drizzlePersisterMiddleware(),
   zValidator(
     "json",
-    z.discriminatedUnion("operation", [
-      z.object({
-        table: z.string(),
-        row_id: z.string(),
-        operation: z.literal("delete"),
-      }),
-      z.object({
-        table: z.string(),
-        row_id: z.string(),
-        data: z.record(z.string(), z.unknown()),
-        operation: z.literal("update"),
-      }),
-    ]),
+    z.array(
+      z.discriminatedUnion("operation", [
+        z.object({
+          table: z.string(),
+          row_id: z.string(),
+          operation: z.literal("delete"),
+        }),
+        z.object({
+          table: z.string(),
+          row_id: z.string(),
+          data: z.record(z.string(), z.unknown()),
+          operation: z.literal("update"),
+        }),
+      ]),
+    ),
   ),
   async (c) => {
-    const supabase = c.get("supabase");
+    const db = c.get("db");
     const user = c.get("user");
     const body = c.req.valid("json");
 
-    // TODO: use RPC / transaction
-    if (body.operation === "delete") {
-      await supabase.from(body.table).delete().eq("id", body.row_id);
-    } else {
-      await supabase.from(body.table).upsert({
-        ...body.data,
-        id: body.row_id,
-        user_id: user.id,
+    try {
+      await db.transaction(async (tx) => {
+        for (const change of body) {
+          const tableName = sql.identifier(change.table);
+
+          if (change.operation === "delete") {
+            await tx.execute(
+              sql`
+                DELETE FROM ${tableName}
+                WHERE id = ${change.row_id}
+                  AND user_id = ${user.id}
+              `,
+            );
+          } else {
+            const protectedFields = new Set(["id", "user_id"]);
+            const safeData = Object.fromEntries(
+              Object.entries(change.data).filter(([key]) => !protectedFields.has(key)),
+            );
+
+            const columns = ["id", "user_id", ...Object.keys(safeData)];
+            const values = [change.row_id, user.id, ...Object.values(safeData)];
+
+            const columnIdentifiers = sql.join(
+              columns.map((col) => sql.identifier(col)),
+              sql.raw(", "),
+            );
+
+            const valuePlaceholders = sql.join(
+              values.map((v) => sql`${v}`),
+              sql.raw(", "),
+            );
+
+            const updateSet = sql.join(
+              columns.slice(2).map((col) => {
+                const colId = sql.identifier(col);
+                return sql`${colId} = EXCLUDED.${colId}`;
+              }),
+              sql.raw(", "),
+            );
+
+            await tx.execute(
+              sql`
+                INSERT INTO ${tableName} (${columnIdentifiers}) 
+                VALUES (${valuePlaceholders}) 
+                ON CONFLICT (id) 
+                DO UPDATE SET ${updateSet} 
+                WHERE ${tableName}.user_id = ${user.id}
+              `,
+            );
+          }
+        }
       });
-    }
 
-    return c.json({ message: "OK" });
+      return c.json({ message: "OK" });
+    } catch (error) {
+      return c.json({ error }, 500);
+    }
   },
 );
 

apps/api/src/middleware/drizzle.ts

@@ -0,0 +1,18 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import { createMiddleware } from "hono/factory";
+
+import postgres from "postgres";
+import { getEnv } from "../env";
+import type { Env } from "../types";
+
+// https://orm.drizzle.team/docs/connect-supabase
+export const drizzlePersisterMiddleware = () => {
+  return createMiddleware<Env>(async (c, next) => {
+    const { DATABASE_URL } = getEnv(c);
+    const client = postgres(DATABASE_URL, { prepare: false });
+    const db = drizzle({ client });
+
+    c.set("db", db);
+    await next();
+  });
+};

apps/api/src/types.ts

@@ -1,8 +1,10 @@
 import type { SupabaseClient, User } from "@supabase/supabase-js";
+import type { PostgresJsDatabase } from "drizzle-orm/postgres-js";
 
 export type Variables = {
   supabase: SupabaseClient;
   user: User;
+  db: PostgresJsDatabase;
 };
 
 export type Env = {

apps/desktop2/src/auth.tsx

@@ -41,11 +41,28 @@ const AuthContext = createContext<
   {
     supabase: SupabaseClient | null;
     session: Session | null;
+    apiClient: ReturnType<typeof buildApiClient> | null;
   } | null
 >(null);
 
+const buildApiClient = (session: Session) => {
+  const base = "http://localhost:5173";
+  const apiClient = {
+    syncWrite: (changes: any) => {
+      return fetch(`${base}/v1/write`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "Authorization": `Bearer ${session.access_token}` },
+        body: JSON.stringify(changes),
+      });
+    },
+  };
+
+  return apiClient;
+};
+
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [session, setSession] = useState<Session | null>(null);
+  const [apiClient, setApiClient] = useState<ReturnType<typeof buildApiClient> | null>(null);
 
   useEffect(() => {
     if (!supabase) {
@@ -83,9 +100,18 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     };
   }, []);
 
+  useEffect(() => {
+    if (!session) {
+      setApiClient(null);
+    } else {
+      setApiClient(buildApiClient(session));
+    }
+  }, [session]);
+
   const value = {
     session,
     supabase,
+    apiClient,
   };
 
   return (

apps/desktop2/src/components/main/main-area.tsx

@@ -1,4 +1,3 @@
-import { commands as windowsCommands } from "@hypr/plugin-windows";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 import { clsx } from "clsx";
 import {
@@ -11,6 +10,7 @@ import {
   UserIcon,
 } from "lucide-react";
 
+import { commands as windowsCommands } from "@hypr/plugin-windows";
 import NoteEditor from "@hypr/tiptap/editor";
 import { ChatPanelButton } from "@hypr/ui/components/block/chat-panel-button";
 import TitleInput from "@hypr/ui/components/block/title-input";

apps/desktop2/src/routes/app.tsx

@@ -1,6 +1,8 @@
 import { OngoingSessionProvider2 } from "@hypr/utils/contexts";
 import { createFileRoute, Outlet } from "@tanstack/react-router";
 
+import { useCloudPersister } from "../tinybase/cloudPersister";
+
 export const Route = createFileRoute("/app")({
   component: Component,
   loader: async ({ context: { ongoingSessionStore } }) => {
@@ -9,10 +11,12 @@ export const Route = createFileRoute("/app")({
 });
 
 function Component() {
+  const sync = useCloudPersister();
   const { ongoingSessionStore } = Route.useLoaderData();
 
   return (
     <OngoingSessionProvider2 store={ongoingSessionStore}>
+      <button className="absolute top-2 right-12" onClick={() => sync()}>Sync</button>
       <Outlet />
     </OngoingSessionProvider2>
   );

apps/desktop2/src/routes/app/auth.tsx

@@ -11,7 +11,9 @@ export const Route = createFileRoute("/app/auth")({
   component: Component,
 });
 
-const redirectTo = import.meta.env.DEV ? "http://localhost:5173" : "https://api.hyprnote.com";
+const redirectTo = import.meta.env.DEV
+  ? "http://localhost:5173/callback/auth"
+  : "https://api.hyprnote.com/callback/auth";
 
 function Component() {
   const auth = useAuth();