Basic Supabase OAuth integration & project-app binding

src/atoms/supabaseAtoms.ts

@@ -0,0 +1,13 @@
+import { atom } from "jotai";
+
+// Define atom for storing the list of Supabase projects
+export const supabaseProjectsAtom = atom<any[]>([]);
+
+// Define atom for tracking loading state
+export const supabaseLoadingAtom = atom<boolean>(false);
+
+// Define atom for storing any error that occurs during loading
+export const supabaseErrorAtom = atom<Error | null>(null);
+
+// Define atom for storing the currently selected Supabase project
+export const selectedSupabaseProjectAtom = atom<string | null>(null);

src/components/SupabaseConnector.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { SupabaseSchema } from "@/lib/schemas";
+import { IpcClient } from "@/ipc/ipc_client";
+import { toast } from "sonner";
+import { useSettings } from "@/hooks/useSettings";
+import { useSupabase } from "@/hooks/useSupabase";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useLoadApp } from "@/hooks/useLoadApp";
+const OAUTH_CLIENT_ID = "bf747de7-60bb-48a2-9015-6494e0b04983";
+
+export function SupabaseConnector({ appId }: { appId: number }) {
+  const [isConnecting, setIsConnecting] = useState(false);
+  const { settings } = useSettings();
+  const { app, refreshApp } = useLoadApp(appId);
+  const {
+    projects,
+    loading,
+    error,
+    loadProjects,
+    setAppProject,
+    unsetAppProject,
+  } = useSupabase();
+  const currentProjectId = app?.supabaseProjectId;
+
+  useEffect(() => {
+    // Load projects when the component mounts and user is connected
+    if (settings?.supabase?.accessToken) {
+      loadProjects();
+    }
+  }, [settings?.supabase?.accessToken, loadProjects]);
+
+  const handleConnect = async () => {
+    try {
+      setIsConnecting(true);
+
+      // TODO: replace this with deployed URL
+      const result = await IpcClient.getInstance().openExternalUrl(
+        "http://localhost:30123/connect-supabase/login"
+      );
+      if (!result.success) {
+        throw new Error(result.error || "Failed to open auth URL");
+      }
+
+      toast.success("Successfully connected to Supabase");
+    } catch (error) {
+      console.error("Failed to connect to Supabase:", error);
+      toast.error("Failed to connect to Supabase");
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const handleProjectSelect = async (projectId: string) => {
+    try {
+      await setAppProject(projectId, appId);
+      toast.success("Project connected to app successfully");
+      await refreshApp();
+    } catch (error) {
+      toast.error("Failed to connect project to app");
+    }
+  };
+
+  const handleUnsetProject = async () => {
+    try {
+      await unsetAppProject(appId);
+      toast.success("Project disconnected from app successfully");
+      await refreshApp();
+    } catch (error) {
+      console.error("Failed to disconnect project:", error);
+      toast.error("Failed to disconnect project from app");
+    }
+  };
+
+  if (settings?.supabase?.accessToken) {
+    if (app?.supabaseProjectName) {
+      return (
+        <Card>
+          <CardHeader>
+            <CardTitle>Supabase Project</CardTitle>
+            <CardDescription>
+              This app is connected to project: {app.supabaseProjectName}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="destructive" onClick={handleUnsetProject}>
+              Disconnect Project
+            </Button>
+          </CardContent>
+        </Card>
+      );
+    }
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Supabase Projects</CardTitle>
+          <CardDescription>
+            Select a Supabase project to connect to this app
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+          ) : error ? (
+            <div className="text-red-500">
+              Error loading projects: {error.message}
+              <Button
+                variant="outline"
+                className="mt-2"
+                onClick={() => loadProjects()}
+              >
+                Retry
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {projects.length === 0 ? (
+                <p className="text-sm text-gray-500">
+                  No projects found in your Supabase account.
+                </p>
+              ) : (
+                <>
+                  <div className="space-y-2">
+                    <Label htmlFor="project-select">Project</Label>
+                    <Select
+                      value={currentProjectId || ""}
+                      onValueChange={handleProjectSelect}
+                    >
+                      <SelectTrigger id="project-select">
+                        <SelectValue placeholder="Select a project" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {projects.map((project) => (
+                          <SelectItem key={project.id} value={project.id}>
+                            {project.name || project.id}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  {currentProjectId && (
+                    <div className="text-sm text-gray-500">
+                      This app is connected to project:{" "}
+                      {projects.find((p) => p.id === currentProjectId)?.name ||
+                        currentProjectId}
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="flex flex-col space-y-4 p-4 border rounded-md">
+      <h2 className="text-lg font-semibold">Connect to Supabase</h2>
+
+      <Button
+        onClick={handleConnect}
+        disabled={isConnecting}
+        className="w-full"
+      >
+        {isConnecting ? "Connecting..." : "Connect to Supabase"}
+      </Button>
+    </div>
+  );
+}

src/components/ui/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

src/db/schema.ts

@@ -14,6 +14,7 @@ export const apps = sqliteTable("apps", {
     .default(sql`(unixepoch())`),
   githubOrg: text("github_org"),
   githubRepo: text("github_repo"),
+  supabaseProjectId: text("supabase_project_id"),
 });
 
 export const chats = sqliteTable("chats", {

src/hooks/useSupabase.ts

@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+import { useAtom } from "jotai";
+import {
+  supabaseProjectsAtom,
+  supabaseLoadingAtom,
+  supabaseErrorAtom,
+  selectedSupabaseProjectAtom,
+} from "@/atoms/supabaseAtoms";
+import { IpcClient } from "@/ipc/ipc_client";
+
+export function useSupabase() {
+  const [projects, setProjects] = useAtom(supabaseProjectsAtom);
+  const [loading, setLoading] = useAtom(supabaseLoadingAtom);
+  const [error, setError] = useAtom(supabaseErrorAtom);
+  const [selectedProject, setSelectedProject] = useAtom(
+    selectedSupabaseProjectAtom
+  );
+
+  const ipcClient = IpcClient.getInstance();
+
+  /**
+   * Load Supabase projects from the API
+   */
+  const loadProjects = useCallback(async () => {
+    setLoading(true);
+    try {
+      const projectList = await ipcClient.listSupabaseProjects();
+      setProjects(projectList);
+      setError(null);
+    } catch (error) {
+      console.error("Error loading Supabase projects:", error);
+      setError(error instanceof Error ? error : new Error(String(error)));
+    } finally {
+      setLoading(false);
+    }
+  }, [ipcClient, setProjects, setError, setLoading]);
+
+  /**
+   * Associate a Supabase project with an app
+   */
+  const setAppProject = useCallback(
+    async (projectId: string, appId: number) => {
+      setLoading(true);
+      try {
+        const result = await ipcClient.setSupabaseAppProject(projectId, appId);
+
+        if (result.success) {
+          setError(null);
+          return result;
+        } else {
+          throw new Error("Failed to set project for app");
+        }
+      } catch (error) {
+        console.error("Error setting Supabase project for app:", error);
+        setError(error instanceof Error ? error : new Error(String(error)));
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ipcClient, setError, setLoading]
+  );
+
+  /**
+   * Remove a Supabase project association from an app
+   */
+  const unsetAppProject = useCallback(
+    async (appId: number) => {
+      setLoading(true);
+      try {
+        const result = await ipcClient.unsetSupabaseAppProject(appId);
+
+        if (result.success) {
+          setError(null);
+          return result;
+        } else {
+          throw new Error("Failed to unset project for app");
+        }
+      } catch (error) {
+        console.error("Error unsetting Supabase project for app:", error);
+        setError(error instanceof Error ? error : new Error(String(error)));
+        throw error;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [ipcClient, setError, setLoading]
+  );
+
+  /**
+   * Select a project for current use
+   */
+  const selectProject = useCallback(
+    (projectId: string | null) => {
+      setSelectedProject(projectId);
+    },
+    [setSelectedProject]
+  );
+
+  return {
+    projects,
+    loading,
+    error,
+    selectedProject,
+    loadProjects,
+    setAppProject,
+    unsetAppProject,
+    selectProject,
+  };
+}

src/ipc/handlers/app_handlers.ts

@@ -37,6 +37,7 @@ import { getGitAuthor } from "../utils/git_author";
 import killPort from "kill-port";
 import util from "util";
 import log from "electron-log";
+import { getSupabaseProjectName } from "../utils/supabase_management_client";
 
 const logger = log.scope("app_handlers");
 
@@ -222,9 +223,16 @@ export function registerAppHandlers() {
       // Return app even if files couldn't be read
     }
 
+    let supabaseProjectName: string | null = null;
+
+    if (app.supabaseProjectId) {
+      supabaseProjectName = await getSupabaseProjectName(app.supabaseProjectId);
+    }
+
     return {
       ...app,
       files,
+      supabaseProjectName,
     };
   });
 

src/ipc/handlers/supabase_handlers.ts

@@ -0,0 +1,65 @@
+import { ipcMain } from "electron";
+import { SupabaseManagementAPI } from "supabase-management-js";
+import { readSettings, writeSettings } from "../../main/settings";
+import log from "electron-log";
+import { db } from "../../db";
+import { eq } from "drizzle-orm";
+import { apps } from "../../db/schema";
+import { getSupabaseClient } from "../utils/supabase_management_client";
+
+const logger = log.scope("supabase_handlers");
+
+export function registerSupabaseHandlers() {
+  // List all Supabase projects
+  ipcMain.handle("supabase:list-projects", async () => {
+    try {
+      const supabase = await getSupabaseClient();
+      // Call the API according to supabase-management-js structure
+      const projects = await supabase.getProjects();
+      return projects;
+    } catch (error) {
+      logger.error("Error listing Supabase projects:", error);
+      throw error;
+    }
+  });
+
+  // Set app project - links a Dyad app to a Supabase project
+  ipcMain.handle(
+    "supabase:set-app-project",
+    async (_, { project, app }: { project: string; app: number }) => {
+      try {
+        // Here you could store the project-app association in your database
+        // For example:
+        await db
+          .update(apps)
+          .set({ supabaseProjectId: project })
+          .where(eq(apps.id, app));
+
+        logger.info(`Associated app ${app} with Supabase project ${project}`);
+        return { success: true, appId: app, projectId: project };
+      } catch (error) {
+        logger.error("Error setting Supabase project for app:", error);
+        throw error;
+      }
+    }
+  );
+
+  // Unset app project - removes the link between a Dyad app and a Supabase project
+  ipcMain.handle(
+    "supabase:unset-app-project",
+    async (_, { app }: { app: number }) => {
+      try {
+        await db
+          .update(apps)
+          .set({ supabaseProjectId: null })
+          .where(eq(apps.id, app));
+
+        logger.info(`Removed Supabase project association for app ${app}`);
+        return { success: true, appId: app };
+      } catch (error) {
+        logger.error("Error unsetting Supabase project for app:", error);
+        throw error;
+      }
+    }
+  );
+}

src/ipc/ipc_client.ts

@@ -676,6 +676,51 @@ export class IpcClient {
   }
   // --- End Proposal Management ---
 
+  // --- Supabase Management ---
+  public async listSupabaseProjects(): Promise<any[]> {
+    try {
+      const projects = await this.ipcRenderer.invoke("supabase:list-projects");
+      return projects;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+
+  public async setSupabaseAppProject(
+    project: string,
+    app: number
+  ): Promise<{ success: boolean; appId: number; projectId: string }> {
+    try {
+      const result = await this.ipcRenderer.invoke("supabase:set-app-project", {
+        project,
+        app,
+      });
+      return result;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+
+  public async unsetSupabaseAppProject(
+    app: number
+  ): Promise<{ success: boolean; appId: number }> {
+    try {
+      const result = await this.ipcRenderer.invoke(
+        "supabase:unset-app-project",
+        {
+          app,
+        }
+      );
+      return result;
+    } catch (error) {
+      showError(error);
+      throw error;
+    }
+  }
+  // --- End Supabase Management ---
+
   // Get system debug information
   public async getSystemDebugInfo(): Promise<SystemDebugInfo> {
     try {

src/ipc/ipc_host.ts

@@ -8,6 +8,7 @@ import { registerGithubHandlers } from "./handlers/github_handlers";
 import { registerNodeHandlers } from "./handlers/node_handlers";
 import { registerProposalHandlers } from "./handlers/proposal_handlers";
 import { registerDebugHandlers } from "./handlers/debug_handlers";
+import { registerSupabaseHandlers } from "./handlers/supabase_handlers";
 
 export function registerIpcHandlers() {
   // Register all IPC handlers by category
@@ -21,4 +22,5 @@ export function registerIpcHandlers() {
   registerNodeHandlers();
   registerProposalHandlers();
   registerDebugHandlers();
+  registerSupabaseHandlers();
 }

src/ipc/ipc_types.ts

@@ -57,6 +57,8 @@ export interface App {
   updatedAt: Date;
   githubOrg: string | null;
   githubRepo: string | null;
+  supabaseProjectId: string | null;
+  supabaseProjectName: string | null;
 }
 
 export interface Version {

src/ipc/utils/supabase_management_client.ts

@@ -0,0 +1,28 @@
+import { readSettings } from "../../main/settings";
+import { SupabaseManagementAPI } from "supabase-management-js";
+
+// Function to get the Supabase Management API client
+export async function getSupabaseClient(): Promise<SupabaseManagementAPI> {
+  const settings = readSettings();
+  // Check if Supabase token exists in settings
+  const supabaseAccessToken = settings.supabase?.accessToken?.value;
+
+  if (!supabaseAccessToken) {
+    throw new Error(
+      "Supabase access token not found. Please authenticate first."
+    );
+  }
+
+  return new SupabaseManagementAPI({
+    accessToken: supabaseAccessToken,
+  });
+}
+
+export async function getSupabaseProjectName(
+  projectId: string
+): Promise<string> {
+  const supabase = await getSupabaseClient();
+  const projects = await supabase.getProjects();
+  const project = projects?.find((p) => p.id === projectId);
+  return project?.name || `<project not found for: ${projectId}>`;
+}

src/lib/schemas.ts

@@ -80,6 +80,13 @@ export const GithubUserSchema = z.object({
 });
 export type GithubUser = z.infer<typeof GithubUserSchema>;
 
+export const SupabaseSchema = z.object({
+  accessToken: SecretSchema.optional(),
+  refreshToken: SecretSchema.optional(),
+  expiresIn: z.number().optional(),
+});
+export type Supabase = z.infer<typeof SupabaseSchema>;
+
 /**
  * Zod schema for user settings
  */
@@ -88,6 +95,7 @@ export const UserSettingsSchema = z.object({
   providerSettings: z.record(z.string(), ProviderSettingSchema),
   githubUser: GithubUserSchema.optional(),
   githubAccessToken: SecretSchema.optional(),
+  supabase: SupabaseSchema.optional(),
   autoApproveChanges: z.boolean().optional(),
   telemetryConsent: z.enum(["opted_in", "opted_out", "unset"]).optional(),
   telemetryUserId: z.string().optional(),

src/main.ts

@@ -7,6 +7,7 @@ import started from "electron-squirrel-startup";
 import { updateElectronApp } from "update-electron-app";
 import log from "electron-log";
 import { readSettings, writeSettings } from "./main/settings";
+import { handleSupabaseOAuthReturn } from "./main/supabase_return_handler";
 
 log.errorHandler.startCatching();
 log.eventLogger.startLogging();
@@ -27,6 +28,17 @@ if (started) {
   app.quit();
 }
 
+// https://www.electronjs.org/docs/latest/tutorial/launch-app-from-url-in-another-app#main-process-mainjs
+if (process.defaultApp) {
+  if (process.argv.length >= 2) {
+    app.setAsDefaultProtocolClient("dyad", process.execPath, [
+      path.resolve(process.argv[1]),
+    ]);
+  }
+} else {
+  app.setAsDefaultProtocolClient("dyad");
+}
+
 export async function onReady() {
   await onFirstRunMaybe();
 }
@@ -75,9 +87,11 @@ declare global {
   const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
 }
 
+let mainWindow: BrowserWindow | null = null;
+
 const createWindow = () => {
   // Create the browser window.
-  const mainWindow = new BrowserWindow({
+  mainWindow = new BrowserWindow({
     width: process.env.NODE_ENV === "development" ? 1280 : 960,
     height: 700,
     titleBarStyle: "hidden",
@@ -109,10 +123,55 @@ const createWindow = () => {
   }
 };
 
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on("ready", createWindow);
+const gotTheLock = app.requestSingleInstanceLock();
+
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on("second-instance", (event, commandLine, workingDirectory) => {
+    // Someone tried to run a second instance, we should focus our window.
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.focus();
+    }
+    // the commandLine is array of strings in which last element is deep link url
+    handleDeepLinkReturn(commandLine.pop()!);
+  });
+
+  // Create mainWindow, load the rest of the app, etc...
+  app.whenReady().then(() => {
+    createWindow();
+  });
+}
+
+// Handle the protocol. In this case, we choose to show an Error Box.
+app.on("open-url", (event, url) => {
+  handleDeepLinkReturn(url);
+});
+
+function handleDeepLinkReturn(url: string) {
+  // example url: "dyad://supabase-oauth-return?token=a&refreshToken=b"
+  const parsed = new URL(url);
+  if (parsed.protocol !== "dyad:") {
+    dialog.showErrorBox(
+      "Invalid Protocol",
+      `Expected dyad://, got ${parsed.protocol}. Full URL: ${url}`
+    );
+  }
+  if (parsed.hostname === "supabase-oauth-return") {
+    const token = parsed.searchParams.get("token");
+    const refreshToken = parsed.searchParams.get("refreshToken");
+    const expiresIn = Number(parsed.searchParams.get("expiresIn"));
+    if (!token || !refreshToken || !expiresIn) {
+      dialog.showErrorBox(
+        "Invalid URL",
+        "Expected token, refreshToken, and expiresIn"
+      );
+      return;
+    }
+    handleSupabaseOAuthReturn({ token, refreshToken, expiresIn });
+  }
+}
 
 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits

src/main/settings.ts

@@ -36,6 +36,27 @@ export function readSettings(): UserSettings {
       ...DEFAULT_SETTINGS,
       ...rawSettings,
     };
+    const supabase = combinedSettings.supabase;
+    if (supabase) {
+      if (supabase.refreshToken) {
+        const encryptionType = supabase.refreshToken.encryptionType;
+        if (encryptionType) {
+          supabase.refreshToken = {
+            value: decrypt(supabase.refreshToken),
+            encryptionType,
+          };
+        }
+      }
+      if (supabase.accessToken) {
+        const encryptionType = supabase.accessToken.encryptionType;
+        if (encryptionType) {
+          supabase.accessToken = {
+            value: decrypt(supabase.accessToken),
+            encryptionType,
+          };
+        }
+      }
+    }
     if (combinedSettings.githubAccessToken) {
       const encryptionType = combinedSettings.githubAccessToken.encryptionType;
       combinedSettings.githubAccessToken = {
@@ -74,7 +95,18 @@ export function writeSettings(settings: Partial<UserSettings>): void {
         newSettings.githubAccessToken.value
       );
     }
-
+    if (newSettings.supabase) {
+      if (newSettings.supabase.accessToken) {
+        newSettings.supabase.accessToken = encrypt(
+          newSettings.supabase.accessToken.value
+        );
+      }
+      if (newSettings.supabase.refreshToken) {
+        newSettings.supabase.refreshToken = encrypt(
+          newSettings.supabase.refreshToken.value
+        );
+      }
+    }
     for (const provider in newSettings.providerSettings) {
       if (newSettings.providerSettings[provider].apiKey) {
         newSettings.providerSettings[provider].apiKey = encrypt(

src/main/supabase_return_handler.ts

@@ -0,0 +1,23 @@
+import { writeSettings } from "./settings";
+
+export function handleSupabaseOAuthReturn({
+  token,
+  refreshToken,
+  expiresIn,
+}: {
+  token: string;
+  refreshToken: string;
+  expiresIn: number;
+}) {
+  writeSettings({
+    supabase: {
+      accessToken: {
+        value: token,
+      },
+      refreshToken: {
+        value: refreshToken,
+      },
+      expiresIn,
+    },
+  });
+}

src/pages/app-details.tsx

@@ -28,6 +28,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { GitHubConnector } from "@/components/GitHubConnector";
+import { SupabaseConnector } from "@/components/SupabaseConnector";
 
 export default function AppDetailsPage() {
   const navigate = useNavigate();
@@ -239,6 +240,7 @@ export default function AppDetailsPage() {
             <MessageCircle className="h-5 w-5" />
           </Button>
           <GitHubConnector appId={appId} folderName={selectedApp.path} />
+          {appId && <SupabaseConnector appId={appId} />}
         </div>
 
         {/* Rename Dialog */}

src/preload.ts

@@ -42,6 +42,9 @@ const validInvokeChannels = [
   "approve-proposal",
   "reject-proposal",
   "get-system-debug-info",
+  "supabase:list-projects",
+  "supabase:set-app-project",
+  "supabase:unset-app-project",
 ] as const;
 
 // Add valid receive channels