canopycms-auth-dev 0.0.0

package/dist/jwt-verifier.js

@@ -0,0 +1,41 @@
+import { extractHeaders } from 'canopycms/auth';
+import { getDevUserCookieFromHeaders, DEFAULT_USER_ID } from './cookie-utils';
+import { DEV_ADMIN_USER_ID } from './dev-plugin';
+/**
+ * Test user key → dev user ID mapping.
+ * Matches the mapping in DevAuthPlugin.mapTestUserKey().
+ */
+const TEST_USER_MAP = {
+    admin: DEV_ADMIN_USER_ID,
+    editor: 'dev_user1_2nK8mP4xL9',
+    viewer: 'dev_user2_7qR3tY6wN2',
+    reviewer: 'dev_reviewer_9aB4cD2eF7',
+};
+/**
+ * Creates a token verifier for dev auth.
+ * Extracts userId from X-Test-User header, x-dev-user-id header,
+ * or canopy-dev-user cookie — same logic as DevAuthPlugin.authenticate().
+ *
+ * Used with CachingAuthPlugin in prod-sim mode to simulate the prod
+ * code path (token verification + cached metadata lookup) using dev users.
+ */
+export function createDevTokenVerifier(options) {
+    const defaultUserId = options?.defaultUserId ?? DEFAULT_USER_ID;
+    return async (context) => {
+        const headers = extractHeaders(context);
+        if (!headers)
+            return null;
+        // Same extraction logic as DevAuthPlugin.authenticate()
+        let userId = headers.get('X-Test-User');
+        if (!userId) {
+            userId = headers.get('x-dev-user-id') ?? getDevUserCookieFromHeaders(headers);
+        }
+        if (!userId) {
+            userId = defaultUserId;
+        }
+        // Map test user keys to dev user IDs
+        const mapped = TEST_USER_MAP[userId] ?? userId;
+        return { userId: mapped };
+    };
+}
+//# sourceMappingURL=jwt-verifier.js.map

package/dist/jwt-verifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jwt-verifier.js","sourceRoot":"","sources":["../src/jwt-verifier.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAEhD;;;GAGG;AACH,MAAM,aAAa,GAA2B;IAC5C,KAAK,EAAE,iBAAiB;IACxB,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;IAC9B,QAAQ,EAAE,yBAAyB;CACpC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,sBAAsB,CAAC,OAAoC;IACzE,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa,IAAI,eAAe,CAAA;IAE/D,OAAO,KAAK,EAAE,OAAgB,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,cAAc,CAAC,OAAO,CAAC,CAAA;QACvC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEzB,wDAAwD;QACxD,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAA;QACvC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,2BAA2B,CAAC,OAAO,CAAC,CAAA;QAC/E,CAAC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,GAAG,aAAa,CAAA;QACxB,CAAC;QAED,qCAAqC;QACrC,MAAM,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,MAAM,CAAA;QAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,CAAA;IAC3B,CAAC,CAAA;AACH,CAAC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "canopycms-auth-dev",
+  "version": "0.0.0",
+  "description": "Development authentication provider for CanopyCMS",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/safeinsights/canopycms.git",
+    "directory": "packages/canopycms-auth-dev"
+  },
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./client": "./src/client.ts",
+    "./cache-writer": "./src/cache-writer.ts"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./client": {
+        "import": "./dist/client.js",
+        "types": "./dist/client.d.ts"
+      },
+      "./cache-writer": {
+        "import": "./dist/cache-writer.js",
+        "types": "./dist/cache-writer.d.ts"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run --reporter=dot",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "canopycms": "*",
+    "react": "^18.0.0 || ^19.0.0",
+    "@mantine/core": "^7.0.0",
+    "@mantine/hooks": "^7.0.0",
+    "@mantine/modals": "^7.0.0",
+    "react-icons": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.0.0",
+    "typescript": "^5.6.3",
+    "vitest": "^1.6.0"
+  }
+}

package/src/UserSwitcherButton.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { ActionIcon, Avatar } from '@mantine/core'
+import { UserSwitcherModal } from './UserSwitcherModal'
+import { DEFAULT_USERS } from './dev-plugin'
+import { getDevUserCookie, DEFAULT_USER_ID } from './cookie-utils'
+
+/**
+ * User switcher button component that shows current user avatar and opens modal
+ */
+export function UserSwitcherButton() {
+  const [opened, setOpened] = useState(false)
+  const [mounted, setMounted] = useState(false)
+
+  // Only read cookie after mount to avoid hydration mismatch
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Read current user from cookie (only on client)
+  const currentUserId = mounted ? (getDevUserCookie() ?? DEFAULT_USER_ID) : DEFAULT_USER_ID
+  const currentUser = DEFAULT_USERS.find((u) => u.userId === currentUserId)
+
+  return (
+    <>
+      <ActionIcon
+        variant="subtle"
+        size="lg"
+        radius="md"
+        onClick={() => setOpened(true)}
+        aria-label="Switch user"
+      >
+        <Avatar size="sm" color="blue">
+          {currentUser?.name[0] ?? 'U'}
+        </Avatar>
+      </ActionIcon>
+
+      <UserSwitcherModal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        currentUserId={currentUserId}
+      />
+    </>
+  )
+}

package/src/UserSwitcherModal.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { Modal, Stack, Paper, Group, Avatar, Text, Badge } from '@mantine/core'
+import { MdCheck } from 'react-icons/md'
+import { DEFAULT_USERS } from './dev-plugin'
+import { setDevUserCookie } from './cookie-utils'
+
+interface Props {
+  opened: boolean
+  onClose: () => void
+  currentUserId: string
+}
+
+/**
+ * User switcher modal component that displays all available dev users
+ */
+export function UserSwitcherModal({ opened, onClose, currentUserId }: Props) {
+  const switchUser = (userId: string) => {
+    // Set cookie for 7 days
+    setDevUserCookie(userId)
+    // Reload to apply new user
+    window.location.reload()
+  }
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Switch Development User">
+      <Stack gap="sm">
+        {DEFAULT_USERS.map((user) => (
+          <Paper
+            key={user.userId}
+            p="md"
+            withBorder
+            style={{ cursor: 'pointer' }}
+            onClick={() => switchUser(user.userId)}
+          >
+            <Group justify="space-between" mb="xs">
+              <Group>
+                <Avatar color="blue">{user.name[0]}</Avatar>
+                <div>
+                  <Text fw={500}>{user.name}</Text>
+                  <Text size="sm" c="dimmed">
+                    {user.email}
+                  </Text>
+                </div>
+              </Group>
+              {user.userId === currentUserId && <MdCheck size={20} />}
+            </Group>
+
+            {user.externalGroups.length > 0 && (
+              <Group gap="xs">
+                {user.externalGroups.map((g) => (
+                  <Badge key={g} variant="outline" size="sm">
+                    {g}
+                  </Badge>
+                ))}
+              </Group>
+            )}
+          </Paper>
+        ))}
+      </Stack>
+    </Modal>
+  )
+}

package/src/cache-writer.ts

@@ -0,0 +1,61 @@
+import { writeAuthCacheSnapshot } from 'canopycms/auth/cache'
+import { DEFAULT_USERS, DEFAULT_GROUPS } from './dev-plugin'
+import type { DevUser, DevGroup } from './dev-plugin'
+
+export interface RefreshDevCacheOptions {
+  /** Directory to write cache files to (e.g., .canopy-prod-sim/.cache) */
+  cachePath: string
+  /** Custom users (defaults to DEFAULT_USERS) */
+  users?: DevUser[]
+  /** Custom groups (defaults to DEFAULT_GROUPS) */
+  groups?: DevGroup[]
+}
+
+/**
+ * Write dev users/groups to cache files for FileBasedAuthCache.
+ *
+ * This is the dev-auth equivalent of refreshClerkCache() — it populates
+ * the same JSON files that CachingAuthPlugin reads. Since dev users are
+ * hardcoded, no API calls are needed.
+ *
+ * Used by the worker's `run-once` command in prod-sim mode with dev auth.
+ */
+export async function refreshDevCache(
+  options: RefreshDevCacheOptions,
+): Promise<{ userCount: number; groupCount: number }> {
+  const { cachePath } = options
+  const users = options.users ?? DEFAULT_USERS
+  const groups = options.groups ?? DEFAULT_GROUPS
+
+  const usersData = {
+    users: users.map((u) => ({
+      id: u.userId,
+      name: u.name,
+      email: u.email,
+      avatarUrl: u.avatarUrl,
+    })),
+  }
+
+  const groupsData = {
+    groups: groups.map((g) => ({
+      id: g.id,
+      name: g.name,
+      description: g.description,
+    })),
+  }
+
+  const membershipsData = {
+    memberships: Object.fromEntries(
+      users.filter((u) => u.externalGroups.length > 0).map((u) => [u.userId, u.externalGroups]),
+    ),
+  }
+
+  // Write cache files atomically via snapshot directory + symlink swap
+  await writeAuthCacheSnapshot(cachePath, {
+    'users.json': usersData,
+    'orgs.json': groupsData,
+    'memberships.json': membershipsData,
+  })
+
+  return { userCount: users.length, groupCount: groups.length }
+}

package/src/client.ts

@@ -0,0 +1,34 @@
+'use client'
+
+import type { CanopyClientConfig } from 'canopycms/client'
+import { UserSwitcherButton } from './UserSwitcherButton'
+import { clearDevUserCookie } from './cookie-utils'
+
+/**
+ * Hook that provides dev auth handlers and components for CanopyCMS editor.
+ * Model after: packages/canopycms-auth-clerk/src/client.ts
+ *
+ * @example
+ * ```tsx
+ * import { useDevAuthConfig } from 'canopycms-auth-dev/client'
+ * import config from '../../canopycms.config'
+ *
+ * export default function EditPage() {
+ *   const devAuth = useDevAuthConfig()
+ *   const editorConfig = config.client(devAuth)
+ *   return <CanopyEditorPage config={editorConfig} />
+ * }
+ * ```
+ */
+export function useDevAuthConfig(): Pick<CanopyClientConfig, 'editor'> {
+  return {
+    editor: {
+      AccountComponent: UserSwitcherButton,
+      onLogoutClick: () => {
+        // Reset to default user
+        clearDevUserCookie()
+        window.location.reload()
+      },
+    },
+  }
+}

package/src/cookie-utils.ts

@@ -0,0 +1,44 @@
+import type { HeadersLike } from 'canopycms/auth'
+
+export const DEV_USER_COOKIE_NAME = 'canopy-dev-user'
+export const DEV_USER_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days
+export const DEFAULT_USER_ID = 'dev_user1_2nK8mP4xL9'
+
+/**
+ * Server-side: Extract cookie value from HTTP headers
+ */
+export function getDevUserCookieFromHeaders(headers: HeadersLike): string | null {
+  const cookie = headers.get('Cookie')
+  if (!cookie) return null
+
+  const match = cookie.match(new RegExp(`${DEV_USER_COOKIE_NAME}=([^;]+)`))
+  return match?.[1] ?? null
+}
+
+/**
+ * Client-side: Read cookie from document.cookie
+ */
+export function getDevUserCookie(): string | null {
+  if (typeof document === 'undefined') return null
+
+  const match = document.cookie.match(new RegExp(`${DEV_USER_COOKIE_NAME}=([^;]+)`))
+  return match?.[1] ?? null
+}
+
+/**
+ * Client-side: Set dev user cookie
+ */
+export function setDevUserCookie(userId: string): void {
+  if (typeof document === 'undefined') return
+
+  document.cookie = `${DEV_USER_COOKIE_NAME}=${userId}; path=/; max-age=${DEV_USER_COOKIE_MAX_AGE}; SameSite=Lax`
+}
+
+/**
+ * Client-side: Clear dev user cookie (logout)
+ */
+export function clearDevUserCookie(): void {
+  if (typeof document === 'undefined') return
+
+  document.cookie = `${DEV_USER_COOKIE_NAME}=; path=/; max-age=0`
+}