feat(web): remove auth requirement to simplify onboarding

jest.config.js

@@ -35,6 +35,90 @@ const backendProject = {
   preset: "@shelf/jest-mongodb", // https://jestjs.io/docs/mongodb,
 };
 
+/** @type { Exclude<Exclude<import("jest").Config["projects"], undefined>[number], string>} */
+const coreProject = {
+  displayName: "core",
+  moduleNameMapper: {
+    "^@core(/(.*)$)?": "<rootDir>/packages/core/src/$1",
+  },
+  testEnvironment: "node",
+  testMatch: ["<rootDir>/packages/core/**/?(*.)+(spec|test).[tj]s?(x)"],
+  setupFiles: ["<rootDir>/packages/core/src/__tests__/core.test.init.ts"],
+  setupFilesAfterEnv: [
+    "<rootDir>/packages/core/src/__tests__/core.test.start.ts",
+  ],
+};
+
+/** @type { Exclude<Exclude<import("jest").Config["projects"], undefined>[number], string>} */
+const webProject = {
+  displayName: "web",
+  moduleNameMapper: {
+    "\\.(jpg|jpeg|png|gif)$":
+      "<rootDir>/packages/web/src/__tests__/__mocks__/file.stub.js",
+    "^@core(/(.*)$)?": "<rootDir>/packages/core/src/$1",
+    "^@web/__tests__(/(.*)$)?": "<rootDir>/packages/web/src/__tests__/$1",
+    "^@web/assets(/(.*)$)?": "<rootDir>/packages/web/src/assets/$1",
+    "^@web/auth(/(.*)$)?": "<rootDir>/packages/web/src/auth/$1",
+    "^@web/common(/(.*)$)?": "<rootDir>/packages/web/src/common/$1",
+    "^@web/components(/(.*)$)?": "<rootDir>/packages/web/src/components/$1",
+    "^@web/ducks(/(.*)$)?": "<rootDir>/packages/web/src/ducks/$1",
+    "^@web/public(/(.*)$)?": "<rootDir>/packages/web/src/public/$1",
+    "^@web/routers(/(.*)$)?": "<rootDir>/packages/web/src/routers/$1",
+    "^@web/socket(/(.*)$)?": "<rootDir>/packages/web/src/socket/$1",
+    "^@web/store((/(.*)$)?)?": "<rootDir>/packages/web/src/store/$1",
+    "^@web/views(/(.*)$)?": "<rootDir>/packages/web/src/views/$1",
+    "^.+\\.(css|less)$":
+      "<rootDir>/packages/web/src/__tests__/__mocks__/css.stub.js",
+    "\\.(svg)$": "<rootDir>/packages/web/src/__tests__/__mocks__/svg.stub.js",
+    "^uuid$": "uuid",
+  },
+  setupFiles: [
+    "<rootDir>/packages/core/src/__tests__/core.test.init.ts",
+    "<rootDir>/packages/core/src/__tests__/core.test.start.ts",
+    "<rootDir>/packages/web/src/__tests__/web.test.init.ts",
+    "jest-canvas-mock",
+  ],
+  setupFilesAfterEnv: [
+    "<rootDir>/packages/web/src/__tests__/web.test.start.ts",
+  ],
+  testEnvironment: "<rootDir>/packages/web/src/__tests__/jsdom.ts",
+  testMatch: ["<rootDir>/packages/web/**/*.(test|spec).[jt]s?(x)"],
+  transformIgnorePatterns: [
+    //https://github.com/react-dnd/react-dnd/issues/3443
+    "/node_modules/(?!react-dnd|dnd-core|@react-dnd)",
+  ],
+};
+
+/** @type { Exclude<Exclude<import("jest").Config["projects"], undefined>[number], string>} */
+const scriptsProject = {
+  displayName: "scripts",
+  moduleNameMapper: {
+    ...backendProject.moduleNameMapper,
+    "^@scripts(/(.*)$)?": "<rootDir>/packages/scripts/src/$1",
+    "^@scripts/commands(/(.*)$)?": "<rootDir>/packages/scripts/src/commands/$1",
+    "^@scripts/common(/(.*)$)?": "<rootDir>/packages/scripts/src/common/$1",
+    "^@scripts/migrations(/(.*)$)?":
+      "<rootDir>/packages/scripts/src/migrations/$1",
+    "^@scripts/seeders(/(.*)$)?": "<rootDir>/packages/scripts/src/seeders/$1",
+  },
+  setupFiles: [...backendProject.setupFiles],
+  setupFilesAfterEnv: [...backendProject.setupFilesAfterEnv],
+  testMatch: ["<rootDir>/packages/scripts/**/?(*.)+(spec|test).[tj]s?(x)"],
+  // A preset that is used as a base for Jest's configuration
+  preset: "@shelf/jest-mongodb", // https://jestjs.io/docs/mongodb,
+};
+
+const projectMap = {
+  core: coreProject,
+  web: webProject,
+  backend: backendProject,
+  scripts: scriptsProject,
+};
+
+const requestedProject = process.argv.find((arg) =>
+  Object.prototype.hasOwnProperty.call(projectMap, arg),
+);
+
 /** @type { import("jest").Config } */
 const config = {
   // All imported modules in your tests should be mocked automatically
@@ -126,80 +210,9 @@ const config = {
   // An enum that specifies notification mode. Requires { notify: true }
   // notifyMode: "failure-change",
 
-  projects: [
-    {
-      displayName: "core",
-      moduleNameMapper: {
-        "^@core(/(.*)$)?": "<rootDir>/packages/core/src/$1",
-      },
-      testEnvironment: "node",
-      testMatch: ["<rootDir>/packages/core/**/?(*.)+(spec|test).[tj]s?(x)"],
-      setupFiles: ["<rootDir>/packages/core/src/__tests__/core.test.init.ts"],
-      setupFilesAfterEnv: [
-        "<rootDir>/packages/core/src/__tests__/core.test.start.ts",
-      ],
-    },
-    {
-      displayName: "web",
-      moduleNameMapper: {
-        "\\.(jpg|jpeg|png|gif)$":
-          "<rootDir>/packages/web/src/__tests__/__mocks__/file.stub.js",
-        "^@core(/(.*)$)?": "<rootDir>/packages/core/src/$1",
-        "^@web/__tests__(/(.*)$)?": "<rootDir>/packages/web/src/__tests__/$1",
-        "^@web/assets(/(.*)$)?": "<rootDir>/packages/web/src/assets/$1",
-        "^@web/auth(/(.*)$)?": "<rootDir>/packages/web/src/auth/$1",
-        "^@web/common(/(.*)$)?": "<rootDir>/packages/web/src/common/$1",
-        "^@web/components(/(.*)$)?": "<rootDir>/packages/web/src/components/$1",
-        "^@web/ducks(/(.*)$)?": "<rootDir>/packages/web/src/ducks/$1",
-        "^@web/public(/(.*)$)?": "<rootDir>/packages/web/src/public/$1",
-        "^@web/routers(/(.*)$)?": "<rootDir>/packages/web/src/routers/$1",
-        "^@web/socket(/(.*)$)?": "<rootDir>/packages/web/src/socket/$1",
-        "^@web/store((/(.*)$)?)?": "<rootDir>/packages/web/src/store/$1",
-        "^@web/views(/(.*)$)?": "<rootDir>/packages/web/src/views/$1",
-        "^.+\\.(css|less)$":
-          "<rootDir>/packages/web/src/__tests__/__mocks__/css.stub.js",
-        "\\.(svg)$":
-          "<rootDir>/packages/web/src/__tests__/__mocks__/svg.stub.js",
-        "^uuid$": "uuid",
-      },
-      setupFiles: [
-        "<rootDir>/packages/core/src/__tests__/core.test.init.ts",
-        "<rootDir>/packages/core/src/__tests__/core.test.start.ts",
-        "<rootDir>/packages/web/src/__tests__/web.test.init.ts",
-        "jest-canvas-mock",
-      ],
-      setupFilesAfterEnv: [
-        "<rootDir>/packages/web/src/__tests__/web.test.start.ts",
-      ],
-      testEnvironment: "<rootDir>/packages/web/src/__tests__/jsdom.ts",
-      testMatch: ["<rootDir>/packages/web/**/*.(test|spec).[jt]s?(x)"],
-      transformIgnorePatterns: [
-        //https://github.com/react-dnd/react-dnd/issues/3443
-        "/node_modules/(?!react-dnd|dnd-core|@react-dnd)",
-      ],
-    },
-    backendProject,
-    {
-      displayName: "scripts",
-      moduleNameMapper: {
-        ...backendProject.moduleNameMapper,
-        "^@scripts(/(.*)$)?": "<rootDir>/packages/scripts/src/$1",
-        "^@scripts/commands(/(.*)$)?":
-          "<rootDir>/packages/scripts/src/commands/$1",
-        "^@scripts/common(/(.*)$)?": "<rootDir>/packages/scripts/src/common/$1",
-        "^@scripts/migrations(/(.*)$)?":
-          "<rootDir>/packages/scripts/src/migrations/$1",
-        "^@scripts/seeders(/(.*)$)?":
-          "<rootDir>/packages/scripts/src/seeders/$1",
-      },
-
-      setupFiles: [...backendProject.setupFiles],
-      setupFilesAfterEnv: [...backendProject.setupFilesAfterEnv],
-      testMatch: ["<rootDir>/packages/scripts/**/?(*.)+(spec|test).[tj]s?(x)"],
-      // A preset that is used as a base for Jest's configuration
-      preset: "@shelf/jest-mongodb", // https://jestjs.io/docs/mongodb,
-    },
-  ],
+  projects: requestedProject
+    ? [projectMap[requestedProject]]
+    : [coreProject, webProject, backendProject, scriptsProject],
   // Use this configuration option to add custom reporters to Jest
   // reporters: undefined,
 

package.json

@@ -59,6 +59,7 @@
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "babel-loader": "^9.1.0",
+    "baseline-browser-mapping": "^2.9.11",
     "buffer": "^6.0.3",
     "concurrently": "^8.0.1",
     "cross-env": "^7.0.3",

packages/web/package.json

@@ -24,6 +24,8 @@
     "classnames": "^2.3.1",
     "css-loader": "^6.3.0",
     "dayjs": "^1.10.7",
+    "dexie": "^4.2.1",
+    "dexie-react-hooks": "^4.2.0",
     "fast-deep-equal": "^3.1.3",
     "html-webpack-plugin": "^5.6.4",
     "mini-css-extract-plugin": "^2.3.0",
@@ -78,6 +80,7 @@
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-testing-library": "^5.0.5",
+    "fake-indexeddb": "^6.2.5",
     "jest": "^29.0.3",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",

packages/web/src/__tests__/utils/repositories/repository.test.factory.ts

@@ -0,0 +1,93 @@
+import { Origin, Priorities } from "@core/constants/core.constants";
+import { Event_Core } from "@core/types/event.types";
+import dayjs from "@core/util/date/dayjs";
+import { createMockStandaloneEvent } from "@core/util/test/ccal.event.factory";
+import { Task } from "@web/common/types/task.types";
+
+/**
+ * Factory function to create a test Event_Core with sensible defaults.
+ * @param overrides - Partial event properties to override defaults
+ * @returns A complete Event_Core object
+ */
+export const createTestEvent = (
+  overrides: Partial<Event_Core & { order?: number }> = {},
+): Event_Core & { order?: number } => {
+  const dateStr = dayjs().format(dayjs.DateFormat.YEAR_MONTH_DAY_FORMAT);
+  return {
+    _id: `event-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+    title: "Test Event",
+    startDate: dateStr,
+    endDate: dateStr,
+    origin: Origin.COMPASS,
+    priority: Priorities.UNASSIGNED,
+    user: "user-1",
+    ...overrides,
+  };
+};
+
+/**
+ * Factory function to create multiple test events.
+ * @param count - Number of events to create
+ * @param overrides - Partial event properties to override defaults (applied to all events)
+ * @returns Array of Event_Core objects
+ */
+export const createTestEvents = (
+  count: number,
+  overrides: Partial<Event_Core> = {},
+): Event_Core[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createTestEvent({
+      ...overrides,
+      _id: overrides._id || `event-${index + 1}`,
+      title: overrides.title || `Event ${index + 1}`,
+    }),
+  );
+};
+
+/**
+ * Factory function to create a test CompassCoreEvent (for edit operations).
+ * Uses the existing factory from @core/util/test/ccal.event.factory.
+ * @param overrides - Partial event properties to override defaults
+ * @returns A complete event object compatible with CompassCoreEvent
+ */
+export const createTestCompassEvent = (
+  overrides: Parameters<typeof createMockStandaloneEvent>[0] = {},
+) => {
+  return createMockStandaloneEvent(overrides);
+};
+
+/**
+ * Factory function to create a test Task with sensible defaults.
+ * @param overrides - Partial task properties to override defaults
+ * @returns A complete Task object
+ */
+export const createTestTask = (overrides: Partial<Task> = {}): Task => {
+  return {
+    id: `task-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+    title: "Test Task",
+    status: "todo",
+    order: 0,
+    createdAt: new Date().toISOString(),
+    ...overrides,
+  };
+};
+
+/**
+ * Factory function to create multiple test tasks.
+ * @param count - Number of tasks to create
+ * @param overrides - Partial task properties to override defaults (applied to all tasks)
+ * @returns Array of Task objects
+ */
+export const createTestTasks = (
+  count: number,
+  overrides: Partial<Task> = {},
+): Task[] => {
+  return Array.from({ length: count }, (_, index) =>
+    createTestTask({
+      ...overrides,
+      id: overrides.id || `task-${index + 1}`,
+      title: overrides.title || `Task ${index + 1}`,
+      order: overrides.order !== undefined ? overrides.order : index,
+    }),
+  );
+};

packages/web/src/__tests__/web.test.start.ts

@@ -1,10 +1,24 @@
+import "fake-indexeddb/auto";
 import "@testing-library/jest-dom";
 import { mockNodeModules } from "@web/__tests__/__mocks__/mock.setup";
 import { server } from "@web/__tests__/__mocks__/server/mock.server";
 
+// Polyfill structuredClone for fake-indexeddb
+if (typeof global.structuredClone === "undefined") {
+  global.structuredClone = (obj: unknown) => {
+    return JSON.parse(JSON.stringify(obj));
+  };
+}
+
 mockNodeModules();
 
-beforeEach(() => jest.clearAllMocks());
+beforeEach(() => {
+  jest.clearAllMocks();
+  const sessionModule = jest.requireMock(
+    "supertokens-web-js/recipe/session",
+  ) as { doesSessionExist?: jest.Mock };
+  sessionModule.doesSessionExist?.mockResolvedValue(true);
+});
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());

packages/web/src/auth/UserContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { UserProfile } from "@core/types/user.types";
+
+export const UserContext = createContext<
+  | Partial<
+      { isLoadingUser: boolean; userId: string } & Omit<UserProfile, "_id">
+    >
+  | undefined
+>(undefined);

packages/web/src/auth/UserProvider.tsx

@@ -1,22 +1,9 @@
 import { usePostHog } from "posthog-js/react";
-import {
-  ReactNode,
-  createContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react";
+import { ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { UserProfile } from "@core/types/user.types";
 import { UserApi } from "@web/common/apis/user.api";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
-
-const UserContext = createContext<
-  | Partial<
-      { isLoadingUser: boolean; userId: string } & Omit<UserProfile, "_id">
-    >
-  | undefined
->(undefined);
+import { UserContext } from "./UserContext";
 
 export const UserProvider = ({ children }: { children: ReactNode }) => {
   const profile = useRef<UserProfile | null>(null);
@@ -35,7 +22,13 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
         profile.current = userProfile;
       })
       .catch((e) => {
-        console.error("Failed to get user profile", e);
+        // For unauthenticated users, this is expected - don't show error
+        // Only log if it's not a 401/403 (unauthorized) error
+        const status = (e as { response?: { status?: number } })?.response
+          ?.status;
+        if (status !== 401 && status !== 403) {
+          console.error("Failed to get user profile", e);
+        }
       })
       .finally(() => {
         setIsLoadingUser(false);
@@ -50,7 +43,12 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
     }
   }, [userId, email, posthog]);
 
-  if (isLoadingUser || userId === null) {
+  // Allow unauthenticated users to proceed without blocking
+  // Only show loader briefly while checking auth status
+  // Unauthenticated users will have profile.current === null, which is fine
+  if (isLoadingUser && userId === null) {
+    // Brief loading state - but don't block indefinitely
+    // The route loader handles auth redirects
     return <AbsoluteOverflowLoader />;
   }