fix(auth): handle missing Supabase config

Author: 808StaN

.env.example

@@ -0,0 +1,2 @@
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=

src/App.jsx

@@ -15,7 +15,7 @@ import { SampleSettingsWindow } from "./components/SampleSettingsWindow";
 import { TopToolbar } from "./components/TopToolbar";
 import { setPlaying, undoLastChange, toggleWindowMaximize } from "./store";
 import { setUser, clearUser } from "./store/userSlice";
-import { supabase } from "./lib/supabase";
+import { isSupabaseConfigured, supabase } from "./lib/supabase";
 import { MIDI_FILE_DND_MIME } from "./utils/midiImport";
 import { MIDI_PATTERN_DND_MIME } from "./utils/midiPattern";
 
@@ -288,6 +288,10 @@ function App() {
   }, []);
 
   useEffect(function () {
+    if (!isSupabaseConfigured) {
+      return undefined;
+    }
+
     const syncUserProfile = async function (session) {
       try {
         const { data: profile } = await supabase

src/components/auth/AuthDialog.jsx

@@ -1,7 +1,11 @@
 import { useState, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { setUser, setAuthLoading, setAuthError } from "../../store/userSlice";
-import { supabase } from "../../lib/supabase";
+import {
+  SUPABASE_UNCONFIGURED_MESSAGE,
+  isSupabaseConfigured,
+  supabase,
+} from "../../lib/supabase";
 
 export function AuthDialog({ onClose }) {
   const dispatch = useDispatch();
@@ -61,6 +65,11 @@ export function AuthDialog({ onClose }) {
 
   const handleLogin = useCallback(
     async function () {
+      if (!isSupabaseConfigured) {
+        dispatch(setAuthError(SUPABASE_UNCONFIGURED_MESSAGE));
+        return;
+      }
+
       dispatch(setAuthLoading(true));
       try {
         const { data: profile, error: profileError } = await supabase
@@ -113,6 +122,11 @@ export function AuthDialog({ onClose }) {
 
   const handleRegister = useCallback(
     async function () {
+      if (!isSupabaseConfigured) {
+        dispatch(setAuthError(SUPABASE_UNCONFIGURED_MESSAGE));
+        return;
+      }
+
       dispatch(setAuthLoading(true));
       try {
         const { data: existing } = await supabase

src/components/auth/AuthDialog.test.jsx

@@ -7,6 +7,9 @@ import { AuthDialog } from "./AuthDialog";
 import { userReducer } from "../../store/userSlice";
 
 vi.mock("../../lib/supabase", () => ({
+  isSupabaseConfigured: false,
+  SUPABASE_UNCONFIGURED_MESSAGE:
+    "Cloud login is unavailable because Supabase is not configured.",
   supabase: {
     auth: { signInWithPassword: vi.fn(), signUp: vi.fn() },
     from: vi.fn().mockReturnValue({
@@ -58,6 +61,16 @@ describe("AuthDialog", () => {
     expect(screen.getByText(/Password must be at least 6 characters/i)).toBeInTheDocument();
   });
 
+  it("shows server configuration error when Supabase is unavailable", async () => {
+    renderWithStore(<AuthDialog onClose={vi.fn()} />);
+    await userEvent.type(screen.getByPlaceholderText("your_username"), "testuser");
+    await userEvent.type(screen.getByPlaceholderText("••••••••"), "123456");
+
+    await userEvent.click(screen.getByRole("button", { name: /Sign In/i }));
+
+    expect(screen.getByText(/Supabase is not configured/i)).toBeInTheDocument();
+  });
+
   it("calls onClose when close button is clicked", async () => {
     const onClose = vi.fn();
     renderWithStore(<AuthDialog onClose={onClose} />);

src/components/auth/UserMenu.jsx

@@ -77,7 +77,11 @@ export function UserMenu({ onOpenAuth }) {
             type="button"
             className="project-dropdown-item"
             onClick={async function () {
-              await supabase.auth.signOut();
+              try {
+                await supabase.auth.signOut();
+              } catch (error) {
+                console.warn("Could not sign out from Supabase", error);
+              }
               dispatch(clearUser());
               setMenuOpen(false);
             }}

src/lib/projectApi.js

@@ -1,4 +1,4 @@
-import { supabase } from "./supabase";
+import { assertSupabaseConfigured, supabase } from "./supabase";
 
 function getProjectBpm(projectData) {
   return projectData?.daw?.transport?.bpm || projectData?.transport?.bpm || 140;
@@ -9,6 +9,8 @@ function serializeProjectFile(projectData) {
 }
 
 async function getAuthenticatedUserId() {
+  assertSupabaseConfigured();
+
   const {
     data: { user },
     error,
@@ -99,6 +101,8 @@ export async function fetchProjects() {
 }
 
 export async function loadProjectFromCloud(projectId) {
+  assertSupabaseConfigured();
+
   const { data: meta, error: metaError } = await supabase
     .from("projects")
     .select("storage_path")

src/lib/projectApi.test.js

@@ -6,10 +6,20 @@ vi.mock("./supabase", () => {
     from: vi.fn(),
     storage: { from: vi.fn() },
   };
-  return { supabase: mockSupabase };
+  return {
+    SUPABASE_UNCONFIGURED_MESSAGE:
+      "Cloud login is unavailable because Supabase is not configured.",
+    assertSupabaseConfigured: vi.fn(),
+    isSupabaseConfigured: true,
+    supabase: mockSupabase,
+  };
 });
 
-import { supabase } from "./supabase";
+import {
+  SUPABASE_UNCONFIGURED_MESSAGE,
+  assertSupabaseConfigured,
+  supabase,
+} from "./supabase";
 import {
   saveProjectToCloud,
   overwriteProjectInCloud,
@@ -24,9 +34,19 @@ describe("projectApi", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    assertSupabaseConfigured.mockImplementation(function () {});
     supabase.auth.getUser.mockResolvedValue({ data: { user: { id: userId } }, error: null });
   });
 
+  it("throws a clear error when Supabase is not configured", async () => {
+    assertSupabaseConfigured.mockImplementation(function () {
+      throw new Error(SUPABASE_UNCONFIGURED_MESSAGE);
+    });
+
+    await expect(fetchProjects()).rejects.toThrow("Supabase is not configured");
+    expect(supabase.auth.getUser).not.toHaveBeenCalled();
+  });
+
   describe("saveProjectToCloud", () => {
     it("uploads file and inserts metadata", async () => {
       const uploadMock = vi.fn().mockResolvedValue({ error: null });

src/lib/supabase.js

@@ -1,6 +1,51 @@
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+const supabaseUrl = String(import.meta.env.VITE_SUPABASE_URL || "").trim();
+const supabaseKey = String(import.meta.env.VITE_SUPABASE_ANON_KEY || "").trim();
 
-export const supabase = createClient(supabaseUrl, supabaseKey);
+export const SUPABASE_UNCONFIGURED_MESSAGE =
+  "Cloud login is unavailable because Supabase is not configured.";
+
+export const isSupabaseConfigured = Boolean(supabaseUrl && supabaseKey);
+
+export function assertSupabaseConfigured() {
+  if (!isSupabaseConfigured) {
+    throw new Error(SUPABASE_UNCONFIGURED_MESSAGE);
+  }
+}
+
+function createUnavailableSupabaseClient() {
+  const rejectUnavailable = async function () {
+    throw new Error(SUPABASE_UNCONFIGURED_MESSAGE);
+  };
+
+  const throwUnavailable = function () {
+    throw new Error(SUPABASE_UNCONFIGURED_MESSAGE);
+  };
+
+  return {
+    auth: {
+      getUser: rejectUnavailable,
+      signInWithPassword: rejectUnavailable,
+      signUp: rejectUnavailable,
+      signOut: rejectUnavailable,
+      onAuthStateChange: function () {
+        return {
+          data: {
+            subscription: {
+              unsubscribe: function () {},
+            },
+          },
+        };
+      },
+    },
+    from: throwUnavailable,
+    storage: {
+      from: throwUnavailable,
+    },
+  };
+}
+
+export const supabase = isSupabaseConfigured
+  ? createClient(supabaseUrl, supabaseKey)
+  : createUnavailableSupabaseClient();