From 3c2c9f0dbaf8e3b64e12a8cff1047ca0f16dd6b3 Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 15:46:11 +0200 Subject: [PATCH 1/6] feat: read-only shared map viewer with password gate MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Stages 4-5 of the read-only private maps feature (plan in READ_ONLY_PRIVATE_MAPS.md): - /share/[token] page: resolves the share, mints the grant cookie via a claim route handler for passwordless shares (cookies cannot be set during page render), renders the password form for protected ones, and seeds the map query cache server-side - Password gate: SharePasswordForm + POST /api/share/[token]/verify with scrypt verification and per-IP+token Redis rate limiting - Read-only shell: ReadOnlyNavbar (name, view switcher, area search — no thumbnail upload or initial-view writes), ReadOnlyMapControls (boundary hover info, inspector, style/zoom/timeline), LegendDisplay (display-only choropleth legend) + existing MarkerLegend - isReadOnlyRouteAtom + useMapEditable(); inspector hides its config gears, "Add to areas" and "View in table" in read-only mode - useMapViews skips server writes on the read-only route so map style and timeline changes stay client-side only - useDataSources uses listForMapView for anonymous viewer routes - Markers API honours the properties param for grant holders whose share covers the data source, so marker styling matches the editor Co-Authored-By: Claude Fable 5 --- .../(private)/map/[id]/atoms/mapStateAtoms.ts | 8 ++ .../ConfigurableDataRecordsPanel.tsx | 4 +- .../InspectorPanel/InspectorDataTab.tsx | 42 ++++--- .../InspectorPanel/InspectorPanel.tsx | 25 ++-- .../[id]/components/Legend/LegendDisplay.tsx | 77 ++++++++++++ .../readonly/ReadOnlyMapControls.tsx | 56 +++++++++ .../components/readonly/ReadOnlyMapViews.tsx | 47 ++++++++ .../components/readonly/ReadOnlyNavbar.tsx | 40 +++++++ .../map/[id]/hooks/useMapEditable.ts | 18 +++ .../(private)/map/[id]/hooks/useMapViews.ts | 22 +++- .../map/[id]/providers/MapJotaiProvider.tsx | 10 ++ .../api/data-sources/[id]/markers/route.ts | 37 ++++-- src/app/api/share/[token]/claim/route.ts | 33 ++++++ src/app/api/share/[token]/verify/route.ts | 61 ++++++++++ .../[token]/components/SharePasswordForm.tsx | 85 ++++++++++++++ src/app/share/[token]/page.tsx | 111 ++++++++++++++++++ src/hooks/useDataSources.ts | 17 ++- src/server/services/ratelimit.ts | 10 ++ 18 files changed, 655 insertions(+), 48 deletions(-) create mode 100644 src/app/(private)/map/[id]/components/Legend/LegendDisplay.tsx create mode 100644 src/app/(private)/map/[id]/components/readonly/ReadOnlyMapControls.tsx create mode 100644 src/app/(private)/map/[id]/components/readonly/ReadOnlyMapViews.tsx create mode 100644 src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx create mode 100644 src/app/(private)/map/[id]/hooks/useMapEditable.ts create mode 100644 src/app/api/share/[token]/claim/route.ts create mode 100644 src/app/api/share/[token]/verify/route.ts create mode 100644 src/app/share/[token]/components/SharePasswordForm.tsx create mode 100644 src/app/share/[token]/page.tsx diff --git a/src/app/(private)/map/[id]/atoms/mapStateAtoms.ts b/src/app/(private)/map/[id]/atoms/mapStateAtoms.ts index c5d6090d0..9372840fa 100644 --- a/src/app/(private)/map/[id]/atoms/mapStateAtoms.ts +++ b/src/app/(private)/map/[id]/atoms/mapStateAtoms.ts @@ -13,6 +13,14 @@ export const mapModeAtom = atom("private"); */ export const isPublicMapRouteAtom = atom(false); +/** + * `true` on the read-only shared map page (`/share/[token]`), `false` + * everywhere else. Components use `useMapEditable()` to hide editing + * affordances, and `useMapViews` skips server writes so view-config + * changes (map style, timeline) stay client-side only. + */ +export const isReadOnlyRouteAtom = atom(false); + /** Derived: the navbar is visible exactly when we are NOT on the public route. */ export const showNavbarAtom = atom( (get) => !get(isPublicMapRouteAtom), diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/ConfigurableDataRecordsPanel.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/ConfigurableDataRecordsPanel.tsx index be9da4591..da095dbc1 100644 --- a/src/app/(private)/map/[id]/components/InspectorPanel/ConfigurableDataRecordsPanel.tsx +++ b/src/app/(private)/map/[id]/components/InspectorPanel/ConfigurableDataRecordsPanel.tsx @@ -1,5 +1,6 @@ "use client"; +import { useMapEditable } from "../../hooks/useMapEditable"; import { useOpenInspectorConfig } from "../../hooks/useOpenInspectorConfig"; import DataRecordsPanel from "./DataRecordsPanel"; import { InspectorConfigModal } from "./InspectorConfigModal"; @@ -20,6 +21,7 @@ export default function ConfigurableDataRecordsPanel({ }) { const { config, isModalOpen, setIsModalOpen, openConfig, onUpdateConfig } = useOpenInspectorConfig(dataSourceId); + const editable = useMapEditable(); return ( <> @@ -29,7 +31,7 @@ export default function ConfigurableDataRecordsPanel({ isLoading={isLoading} defaultExpanded={defaultExpanded} hint={hint} - onClickConfigure={openConfig} + onClickConfigure={editable ? openConfig : undefined} /> {config && ( {dataSource.name}

- + {editable && ( + + )} )} @@ -311,15 +315,17 @@ export default function InspectorDataTab() { defaultExpanded={index === 0} /> ))} - + {editable && ( + + )} diff --git a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx index 4f2b36d7f..3048920c5 100644 --- a/src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx +++ b/src/app/(private)/map/[id]/components/InspectorPanel/InspectorPanel.tsx @@ -17,6 +17,7 @@ import { useDisplayAreaStat } from "@/app/(private)/map/[id]/hooks/useDisplayAre import { useInspectorContent } from "@/app/(private)/map/[id]/hooks/useInspector"; import { useInspectorState } from "@/app/(private)/map/[id]/hooks/useInspectorState"; import { useMapRef } from "@/app/(private)/map/[id]/hooks/useMapCore"; +import { useMapEditable } from "@/app/(private)/map/[id]/hooks/useMapEditable"; import { useSelectedAreas } from "@/app/(private)/map/[id]/hooks/useSelectedAreas"; import { useSelectedSecondaryArea } from "@/app/(private)/map/[id]/hooks/useSelectedSecondaryArea"; import { useTable } from "@/app/(private)/map/[id]/hooks/useTable"; @@ -55,6 +56,7 @@ export default function InspectorPanel() { const [selectedSecondaryArea] = useSelectedSecondaryArea(); const [selectedAreas, setSelectedAreas] = useSelectedAreas(); const organisationId = useOrganisationId(); + const editable = useMapEditable(); // Selecting something new re-opens a minimised inspector const contentKey = `${type ?? ""}:${String(inspectorContent?.name ?? "")}`; @@ -365,14 +367,16 @@ export default function InspectorPanel() { {type === LayerType.Boundary && (
- + {editable && ( + + )} )} - {dataSource && ( + {dataSource && editable && ( + ))} +
+ ); +} diff --git a/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx b/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx new file mode 100644 index 000000000..1fa609450 --- /dev/null +++ b/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx @@ -0,0 +1,40 @@ +"use client"; + +import dynamic from "next/dynamic"; +import Navbar from "@/components/layout/Navbar"; +import { useMapId } from "../../hooks/useMapCore"; +import { useMapQuery } from "../../hooks/useMapQuery"; +import ReadOnlyMapViews from "./ReadOnlyMapViews"; + +/** + * Navbar for the read-only shared map page: map name, view switcher and + * area search. None of the private navbar's editing affordances — and + * crucially none of its side effects (initial-view creation, thumbnail + * upload), which write to the map. + */ +export default function ReadOnlyNavbar() { + const mapId = useMapId(); + const { data: map } = useMapQuery(mapId); + + return ( + +
+
+

+ {map ? map.name : "Loading..."} +

+ +
+ +
+ + ); +} + +const SearchBox = dynamic( + () => import("../SearchBox").then((mod) => ({ default: mod.SearchBox })), + { + ssr: false, + loading: () => null, + }, +); diff --git a/src/app/(private)/map/[id]/hooks/useMapEditable.ts b/src/app/(private)/map/[id]/hooks/useMapEditable.ts new file mode 100644 index 000000000..f2e161b93 --- /dev/null +++ b/src/app/(private)/map/[id]/hooks/useMapEditable.ts @@ -0,0 +1,18 @@ +"use client"; + +import { useAtomValue } from "jotai"; +import { isReadOnlyRouteAtom } from "../atoms/mapStateAtoms"; + +/** `true` on the read-only shared map page (`/share/[token]`). */ +export function useIsReadOnlyRoute() { + return useAtomValue(isReadOnlyRouteAtom); +} + +/** + * Whether the current viewer may edit the map. `false` only on the + * read-only shared map page — components use this to hide editing + * affordances (inspector config, add-to-areas, view-in-table, etc.). + */ +export function useMapEditable() { + return !useAtomValue(isReadOnlyRouteAtom); +} diff --git a/src/app/(private)/map/[id]/hooks/useMapViews.ts b/src/app/(private)/map/[id]/hooks/useMapViews.ts index 6c21441dc..9eeef07bc 100644 --- a/src/app/(private)/map/[id]/hooks/useMapViews.ts +++ b/src/app/(private)/map/[id]/hooks/useMapViews.ts @@ -12,6 +12,7 @@ import { createNewViewConfig } from "../utils/mapView"; import { getNewLastPosition } from "../utils/position"; import { useDebouncedCallback } from "./useDebouncedCallback"; import { useMapId } from "./useMapCore"; +import { useIsReadOnlyRoute } from "./useMapEditable"; import { useMapQuery } from "./useMapQuery"; import type { View } from "../types"; @@ -23,6 +24,11 @@ export function useMapViews() { const trpc = useTRPC(); const queryClient = useQueryClient(); const { data: mapData } = useMapQuery(mapId); + // On the read-only shared map page, view-config changes (map style, + // timeline range) update the query cache for instant feedback but are + // never persisted — anonymous viewers cannot write, and their tweaks + // should reset on reload. + const isReadOnlyRoute = useIsReadOnlyRoute(); // Get views directly from cache const views = mapData?.views; @@ -73,7 +79,7 @@ export function useMapViews() { const insertView = useCallback( (view: Omit) => { - if (!mapId) return; + if (!mapId || isReadOnlyRoute) return; const newView = { ...view, @@ -102,6 +108,7 @@ export function useMapViews() { }, [ mapId, + isReadOnlyRoute, views, setViewId, setDirtyViewIds, @@ -155,7 +162,9 @@ export function useMapViews() { const updatedViews = views?.map((v) => (v.id === view.id ? view : v)) || []; - setDirtyViewIds((ids) => ids.concat([view.id])); + if (!isReadOnlyRoute) { + setDirtyViewIds((ids) => ids.concat([view.id])); + } // Synchronously update cache BEFORE calling mutation for instant UI feedback queryClient.setQueryData(trpc.map.byId.queryKey({ mapId }), (old) => { @@ -171,10 +180,13 @@ export function useMapViews() { }; }); - updateViewMutate({ mapId, views: updatedViews }); + if (!isReadOnlyRoute) { + updateViewMutate({ mapId, views: updatedViews }); + } }, [ mapId, + isReadOnlyRoute, setDirtyViewIds, queryClient, trpc.map.byId, @@ -247,7 +259,7 @@ export function useMapViews() { const deleteView = useCallback( (viewId: string) => { - if (!mapId) return; + if (!mapId || isReadOnlyRoute) return; // Synchronously update cache BEFORE calling mutation for instant UI feedback queryClient.setQueryData(trpc.map.byId.queryKey({ mapId }), (old) => { @@ -260,7 +272,7 @@ export function useMapViews() { deleteViewMutate({ mapId, viewId }); }, - [mapId, queryClient, trpc.map.byId, deleteViewMutate], + [mapId, isReadOnlyRoute, queryClient, trpc.map.byId, deleteViewMutate], ); return { diff --git a/src/app/(private)/map/[id]/providers/MapJotaiProvider.tsx b/src/app/(private)/map/[id]/providers/MapJotaiProvider.tsx index cd3fd0835..46e155114 100644 --- a/src/app/(private)/map/[id]/providers/MapJotaiProvider.tsx +++ b/src/app/(private)/map/[id]/providers/MapJotaiProvider.tsx @@ -6,6 +6,7 @@ import { useSearchParams } from "next/navigation"; import { type MapMode, isPublicMapRouteAtom, + isReadOnlyRouteAtom, mapIdAtom, mapModeAtom, viewIdAtom, @@ -18,16 +19,21 @@ import type { ReactNode } from "react"; * `isPublicMapRoute` is `true` only on the standalone public page (`/public/[host]`). * The navbar visibility and editor-mode flag are derived from this single boolean, * and `mapMode` is derived from the URL. + * + * `isReadOnlyRoute` is `true` only on the shared map page (`/share/[token]`), + * where anonymous viewers see the private map without editing affordances. */ export default function MapJotaiProvider({ mapId, viewId, isPublicMapRoute = false, + isReadOnlyRoute = false, children, }: { mapId: string; viewId?: string; isPublicMapRoute?: boolean; + isReadOnlyRoute?: boolean; children: ReactNode; }) { return ( @@ -36,6 +42,7 @@ export default function MapJotaiProvider({ mapId={mapId} viewId={viewId} isPublicMapRoute={isPublicMapRoute} + isReadOnlyRoute={isReadOnlyRoute} > {children} @@ -47,11 +54,13 @@ function HydrateAtoms({ mapId, viewId, isPublicMapRoute, + isReadOnlyRoute, children, }: { mapId: string; viewId?: string; isPublicMapRoute: boolean; + isReadOnlyRoute: boolean; children: ReactNode; }) { // On the private route, derive mapMode + viewId from the URL so the very @@ -71,6 +80,7 @@ function HydrateAtoms({ [viewIdAtom, resolvedViewId || null], [mapModeAtom, resolvedMapMode], [isPublicMapRouteAtom, isPublicMapRoute], + [isReadOnlyRouteAtom, isReadOnlyRoute], ]); return children; diff --git a/src/app/api/data-sources/[id]/markers/route.ts b/src/app/api/data-sources/[id]/markers/route.ts index c07e75b59..be49ca651 100644 --- a/src/app/api/data-sources/[id]/markers/route.ts +++ b/src/app/api/data-sources/[id]/markers/route.ts @@ -4,9 +4,13 @@ import { getShareGrants } from "@/auth/shareGrants"; import { MARKER_MATCHED_COLUMN } from "@/constants"; import { streamDataRecordsByDataSource } from "@/server/repositories/DataRecord"; import { findDataSourceById } from "@/server/repositories/DataSource"; +import { findMapShareVisualisingDataSource } from "@/server/repositories/MapShare"; import { findOrganisationForUser } from "@/server/repositories/Organisation"; import { findPublicMapByViewId } from "@/server/repositories/PublicMap"; -import { canReadDataSource } from "@/server/utils/auth"; +import { + canReadDataSource, + getValidShareGrantMapIds, +} from "@/server/utils/auth"; import { closeRecordStream } from "@/server/utils/stream"; import { buildName, @@ -72,15 +76,28 @@ export async function GET( // Marker styling (icon/size/colour by column) needs the raw column values on // the features. The column list is client-supplied but only honoured for - // authenticated users: `canReadDataSource` passes anonymous requests for - // public data sources and published public maps, and those must stay on - // minimal properties. Authenticated readers can already fetch full record - // JSON via tRPC, so this grants them nothing new. - const includeProperties = currentUser?.id - ? parseIncludeProperties( - request?.nextUrl?.searchParams.get("properties") || null, - ) - : []; + // authenticated users and shared-map viewers whose grant covers this data + // source: `canReadDataSource` also passes anonymous requests for public + // data sources and published public maps, and those must stay on minimal + // properties. Grant holders and authenticated readers can already fetch + // full record JSON via tRPC, so this grants them nothing new. + const sharedMapIds = currentUser?.id + ? [] + : await getValidShareGrantMapIds(shareGrants); + const grantCoversDataSource = + sharedMapIds.length > 0 && + Boolean( + await findMapShareVisualisingDataSource({ + dataSourceId: dataSource.id, + mapIds: sharedMapIds, + }), + ); + const includeProperties = + currentUser?.id || grantCoversDataSource + ? parseIncludeProperties( + request?.nextUrl?.searchParams.get("properties") || null, + ) + : []; // Timeline filtering: when the data source declares a date column, expose // the record's month key, derived from the date parsed at import time diff --git a/src/app/api/share/[token]/claim/route.ts b/src/app/api/share/[token]/claim/route.ts new file mode 100644 index 000000000..933c2f6ea --- /dev/null +++ b/src/app/api/share/[token]/claim/route.ts @@ -0,0 +1,33 @@ +import { NextResponse } from "next/server"; +import { addShareGrant } from "@/auth/shareGrants"; +import { findMapShareByToken } from "@/server/repositories/MapShare"; +import type { NextRequest } from "next/server"; + +/** + * Mints the grant cookie for a passwordless share and bounces back to the + * share page. Exists because Next.js forbids setting cookies during page + * render. Password-protected shares are never minted here — the page shows + * the password form, and the verify endpoint mints instead. + */ +export async function GET( + request: NextRequest, + args: { params: Promise<{ token: string }> }, +): Promise { + const { token } = await args.params; + const share = await findMapShareByToken(token); + + const shareUrl = new URL(`/share/${token}`, request.nextUrl.origin); + const viewId = request.nextUrl.searchParams.get("viewId"); + if (viewId) { + shareUrl.searchParams.set("viewId", viewId); + } + + if (share && share.enabled && !share.passwordHash) { + await addShareGrant({ shareId: share.id, mapId: share.mapId }); + // Marks the claim as attempted so the page can detect blocked cookies + // instead of redirecting here again + shareUrl.searchParams.set("c", "1"); + } + + return NextResponse.redirect(shareUrl); +} diff --git a/src/app/api/share/[token]/verify/route.ts b/src/app/api/share/[token]/verify/route.ts new file mode 100644 index 000000000..c24017028 --- /dev/null +++ b/src/app/api/share/[token]/verify/route.ts @@ -0,0 +1,61 @@ +import { NextResponse } from "next/server"; +import { addShareGrant } from "@/auth/shareGrants"; +import { findMapShareByToken } from "@/server/repositories/MapShare"; +import { + checkSharePasswordAttempt, + getClientIp, +} from "@/server/services/ratelimit"; +import { verifyPassword } from "@/server/utils/auth"; +import type { NextRequest } from "next/server"; + +/** + * Verifies a shared map's password and mints the grant cookie on success. + * Rate-limited per IP + token to resist password guessing. + */ +export async function POST( + request: NextRequest, + args: { params: Promise<{ token: string }> }, +): Promise { + const { token } = await args.params; + const share = await findMapShareByToken(token); + if (!share || !share.enabled) { + return new NextResponse("Not found", { status: 404 }); + } + + // If the password was removed while the form was open, the claim is free + if (!share.passwordHash) { + await addShareGrant({ shareId: share.id, mapId: share.mapId }); + return new NextResponse(null, { status: 204 }); + } + + const ip = getClientIp(request); + const allowed = await checkSharePasswordAttempt(ip, token); + if (!allowed) { + return new NextResponse("Too many attempts", { status: 429 }); + } + + let password = ""; + try { + const body: unknown = await request.json(); + if ( + body !== null && + typeof body === "object" && + "password" in body && + typeof body.password === "string" + ) { + password = body.password; + } + } catch { + // Malformed body: treated as an empty password below + } + + const valid = password + ? await verifyPassword(password, share.passwordHash) + : false; + if (!valid) { + return new NextResponse("Incorrect password", { status: 401 }); + } + + await addShareGrant({ shareId: share.id, mapId: share.mapId }); + return new NextResponse(null, { status: 204 }); +} diff --git a/src/app/share/[token]/components/SharePasswordForm.tsx b/src/app/share/[token]/components/SharePasswordForm.tsx new file mode 100644 index 000000000..4fede2dce --- /dev/null +++ b/src/app/share/[token]/components/SharePasswordForm.tsx @@ -0,0 +1,85 @@ +"use client"; + +import { LockIcon } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; +import { Button } from "@/shadcn/ui/button"; +import { Input } from "@/shadcn/ui/input"; + +/** + * The password gate for a protected shared map. Submitting posts to the + * verify endpoint, which sets the grant cookie; the refresh then re-runs + * the server component, which sees the grant and renders the map. + */ +export default function SharePasswordForm({ + token, + mapName, +}: { + token: string; + mapName: string; +}) { + const router = useRouter(); + const [password, setPassword] = useState(""); + const [error, setError] = useState(null); + const [submitting, setSubmitting] = useState(false); + + const onSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + if (!password || submitting) { + return; + } + setSubmitting(true); + setError(null); + try { + const response = await fetch(`/api/share/${token}/verify`, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ password }), + }); + if (response.ok) { + router.refresh(); + return; + } + if (response.status === 429) { + setError("Too many attempts. Please try again in a few minutes."); + } else { + setError("Incorrect password. Please try again."); + } + } catch { + setError("Something went wrong. Please try again."); + } finally { + setSubmitting(false); + } + }; + + return ( +
+
+
+
+ +

{mapName}

+
+

+ This map is password protected. Enter the password to view it. +

+
+ setPassword(e.target.value)} + /> + {error &&

{error}

} + +
+
+ ); +} diff --git a/src/app/share/[token]/page.tsx b/src/app/share/[token]/page.tsx new file mode 100644 index 000000000..765612869 --- /dev/null +++ b/src/app/share/[token]/page.tsx @@ -0,0 +1,111 @@ +import { HydrationBoundary, dehydrate } from "@tanstack/react-query"; +import { notFound, redirect } from "next/navigation"; +import ReadOnlyMapControls from "@/app/(private)/map/[id]/components/readonly/ReadOnlyMapControls"; +import ReadOnlyNavbar from "@/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar"; +import SharedMap from "@/app/(private)/map/[id]/components/SharedMap"; +import MapJotaiProvider from "@/app/(private)/map/[id]/providers/MapJotaiProvider"; +import { getShareGrants } from "@/auth/shareGrants"; +import { findMapById } from "@/server/repositories/Map"; +import { findMapShareByToken } from "@/server/repositories/MapShare"; +import { findValidShareGrantForMap } from "@/server/utils/auth"; +import { createCaller, getQueryClient, trpc } from "@/services/trpc/server"; +import SharePasswordForm from "./components/SharePasswordForm"; +import type { Metadata } from "next"; + +interface Props { + params: Promise<{ token: string }>; + searchParams: Promise<{ viewId?: string; c?: string }>; +} + +export async function generateMetadata({ + params, +}: Pick): Promise { + const { token } = await params; + const share = await findMapShareByToken(token); + const map = share?.enabled ? await findMapById(share.mapId) : null; + return { + title: map ? `${map.name} - Mapped` : "Mapped", + // Share links are unlisted: never index them + robots: { index: false, follow: false }, + }; +} + +export default async function SharedMapPage({ params, searchParams }: Props) { + const { token } = await params; + const { viewId: requestedViewId, c: claimed } = await searchParams; + + const share = await findMapShareByToken(token); + if (!share || !share.enabled) { + notFound(); + } + + const grants = await getShareGrants(); + const grant = await findValidShareGrantForMap(grants, share.mapId); + + if (!grant) { + if (share.passwordHash) { + const map = await findMapById(share.mapId); + return ( + + ); + } + // Passwordless: the grant cookie is minted by a route handler (cookies + // cannot be set during page render) which redirects back here. `c=1` + // marks a completed claim, so blocked cookies show a message instead + // of looping. + if (claimed) { + return ; + } + const claimPath = requestedViewId + ? `/api/share/${token}/claim?viewId=${encodeURIComponent(requestedViewId)}` + : `/api/share/${token}/claim`; + redirect(claimPath); + } + + const caller = await createCaller(); + const map = await caller.map.byId({ mapId: share.mapId }); + const views = [...map.views].sort((a, b) => a.position - b.position); + const viewId = + views.find((v) => v.id === requestedViewId)?.id ?? views[0]?.id; + + // Seed the React Query cache so the client's `useMapQuery` picks the map + // up without a separate fetch (same pattern as the public map page) + const queryClient = getQueryClient(); + queryClient.setQueryData(trpc.map.byId.queryKey({ mapId: share.mapId }), map); + + return ( + + +
+ +
+ +
+ {/* Desktop-only message for small screens */} +
+

+ Your screen is too small to view this map. Please use a device + with a larger screen. +

+
+
+ +
+
+
+
+ + + ); +} + +function CookiesRequiredMessage() { + return ( +
+

+ This shared map needs cookies to work. Please enable cookies for this + site and reload the page. +

+
+ ); +} diff --git a/src/hooks/useDataSources.ts b/src/hooks/useDataSources.ts index f4fd6d6c5..dac03c9e4 100644 --- a/src/hooks/useDataSources.ts +++ b/src/hooks/useDataSources.ts @@ -3,7 +3,10 @@ import { useQuery } from "@tanstack/react-query"; import { useAtomValue } from "jotai"; import { useCallback, useMemo } from "react"; -import { isPublicMapRouteAtom } from "@/app/(private)/map/[id]/atoms/mapStateAtoms"; +import { + isPublicMapRouteAtom, + isReadOnlyRouteAtom, +} from "@/app/(private)/map/[id]/atoms/mapStateAtoms"; import { useMapConfig } from "@/app/(private)/map/[id]/hooks/useMapConfig"; import { useMapId } from "@/app/(private)/map/[id]/hooks/useMapCore"; import { @@ -18,12 +21,18 @@ export function useDataSources() { const trpc = useTRPC(); const organisationId = useOrganisationId(); const isPublicMapRoute = useAtomValue(isPublicMapRouteAtom); + const isReadOnlyRoute = useAtomValue(isReadOnlyRouteAtom); const isSuperadminDataSourceRoute = useAtomValue( isSuperadminDataSourceRouteAtom, ); const mapId = useMapId(); const viewId = useViewId(); + // Routes serving anonymous viewers (the public map page and the + // read-only shared map page) list only the data sources the map/view + // visualises; `listReadable` requires an authenticated user. + const isAnonymousViewerRoute = isPublicMapRoute || isReadOnlyRoute; + const listPublicQuery = useQuery( trpc.dataSource.listPublic.queryOptions(undefined, { enabled: isSuperadminDataSourceRoute, @@ -35,20 +44,20 @@ export function useDataSources() { { activeOrganisationId: organisationId ?? undefined, }, - { enabled: !isPublicMapRoute && !isSuperadminDataSourceRoute }, + { enabled: !isAnonymousViewerRoute && !isSuperadminDataSourceRoute }, ), ); const listForMapViewQuery = useQuery( trpc.dataSource.listForMapView.queryOptions( { mapId: mapId ?? "", viewId: viewId ?? "" }, - { enabled: isPublicMapRoute && Boolean(mapId) && Boolean(viewId) }, + { enabled: isAnonymousViewerRoute && Boolean(mapId) && Boolean(viewId) }, ), ); const query = isSuperadminDataSourceRoute ? listPublicQuery - : isPublicMapRoute + : isAnonymousViewerRoute ? listForMapViewQuery : listReadableQuery; diff --git a/src/server/services/ratelimit.ts b/src/server/services/ratelimit.ts index 728787eea..8010e9678 100644 --- a/src/server/services/ratelimit.ts +++ b/src/server/services/ratelimit.ts @@ -52,3 +52,13 @@ export async function checkForgotPasswordAttempt(ip: string): Promise { const count = await recordAttempt(`rate_limit:forgot_password:${ip}`); return count <= FORGOT_PASSWORD_MAX_ATTEMPTS; } + +const SHARE_PASSWORD_MAX_ATTEMPTS = 5; + +export async function checkSharePasswordAttempt( + ip: string, + token: string, +): Promise { + const count = await recordAttempt(`rate_limit:share_password:${token}:${ip}`); + return count <= SHARE_PASSWORD_MAX_ATTEMPTS; +} From b759bf2be5877c6df6ad0ff3b0a5aa1e34dd0f12 Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 19:54:57 +0200 Subject: [PATCH 2/6] refactor: claim grant cookie via client fetch instead of redirect chain The passwordless claim flow was page -> 307 claim -> 307 page?c=1, with the c=1 marker guarding against redirect loops when cookies are blocked. The marker leaked into the address bar, so a viewer copying the URL to share it passed on a link that showed the cookies-required message to new visitors without ever attempting a claim. The claim endpoint is now a POST returning 204 (mirroring verify), and the page renders a ShareClaim component that fetches it and refreshes - the same mechanism as SharePasswordForm, minus the form. The URL never changes. Blocked cookies are detected without URL state: a sessionStorage timestamp catches remount loops, and a finished refresh that still renders ShareClaim means the cookie did not stick. Co-Authored-By: Claude Fable 5 --- src/app/api/share/[token]/claim/route.ts | 31 +++---- .../share/[token]/components/ShareClaim.tsx | 82 +++++++++++++++++++ src/app/share/[token]/page.tsx | 33 ++------ 3 files changed, 103 insertions(+), 43 deletions(-) create mode 100644 src/app/share/[token]/components/ShareClaim.tsx diff --git a/src/app/api/share/[token]/claim/route.ts b/src/app/api/share/[token]/claim/route.ts index 933c2f6ea..db7df4f2c 100644 --- a/src/app/api/share/[token]/claim/route.ts +++ b/src/app/api/share/[token]/claim/route.ts @@ -4,30 +4,25 @@ import { findMapShareByToken } from "@/server/repositories/MapShare"; import type { NextRequest } from "next/server"; /** - * Mints the grant cookie for a passwordless share and bounces back to the - * share page. Exists because Next.js forbids setting cookies during page - * render. Password-protected shares are never minted here — the page shows - * the password form, and the verify endpoint mints instead. + * Mints the grant cookie for a passwordless share. Called by the share + * page's `ShareClaim` component (Next.js forbids setting cookies during + * page render); the client then refreshes so the server component sees + * the grant. Password-protected shares are never minted here — the page + * shows the password form, and the verify endpoint mints instead. */ -export async function GET( - request: NextRequest, +export async function POST( + _request: NextRequest, args: { params: Promise<{ token: string }> }, ): Promise { const { token } = await args.params; const share = await findMapShareByToken(token); - - const shareUrl = new URL(`/share/${token}`, request.nextUrl.origin); - const viewId = request.nextUrl.searchParams.get("viewId"); - if (viewId) { - shareUrl.searchParams.set("viewId", viewId); + if (!share || !share.enabled) { + return new NextResponse("Not found", { status: 404 }); } - - if (share && share.enabled && !share.passwordHash) { - await addShareGrant({ shareId: share.id, mapId: share.mapId }); - // Marks the claim as attempted so the page can detect blocked cookies - // instead of redirecting here again - shareUrl.searchParams.set("c", "1"); + if (share.passwordHash) { + return new NextResponse("Password required", { status: 401 }); } - return NextResponse.redirect(shareUrl); + await addShareGrant({ shareId: share.id, mapId: share.mapId }); + return new NextResponse(null, { status: 204 }); } diff --git a/src/app/share/[token]/components/ShareClaim.tsx b/src/app/share/[token]/components/ShareClaim.tsx new file mode 100644 index 000000000..4fbbdfcbb --- /dev/null +++ b/src/app/share/[token]/components/ShareClaim.tsx @@ -0,0 +1,82 @@ +"use client"; + +import { LoaderPinwheel } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useEffect, useRef, useState, useTransition } from "react"; + +// A claim attempted this recently that still yielded no grant means the +// browser is not storing our cookies +const RECENT_CLAIM_WINDOW_MS = 5000; + +const CLAIM_ATTEMPT_KEY = "shareClaimAttemptedAt"; + +/** + * The invisible claim step for a passwordless share: on mount, asks the + * claim endpoint to mint the grant cookie, then refreshes so the server + * component re-renders with the grant — the same mechanism as + * `SharePasswordForm`, minus the form. If the refreshed page still has no + * grant, the browser is blocking cookies: show a message instead of + * claiming again. + */ +export default function ShareClaim({ token }: { token: string }) { + const router = useRouter(); + const didRun = useRef(false); + const [isRefreshing, startTransition] = useTransition(); + const [status, setStatus] = useState<"claiming" | "claimed" | "blocked">( + "claiming", + ); + + useEffect(() => { + if (didRun.current) { + return; + } + didRun.current = true; + + try { + const lastAttempt = Number(sessionStorage.getItem(CLAIM_ATTEMPT_KEY)); + if (Date.now() - lastAttempt < RECENT_CLAIM_WINDOW_MS) { + setStatus("blocked"); + return; + } + sessionStorage.setItem(CLAIM_ATTEMPT_KEY, String(Date.now())); + } catch { + // Storage being unavailable means cookies are blocked too + setStatus("blocked"); + return; + } + + const claim = async () => { + try { + await fetch(`/api/share/${token}/claim`, { method: "POST" }); + } catch { + // Let the refreshed page decide what went wrong (404, password + // form, or the blocked-cookies message below) + } + startTransition(() => router.refresh()); + setStatus("claimed"); + }; + void claim(); + }, [token, router]); + + // A finished refresh that still renders this component means the server + // saw no grant: the cookie did not stick + const blocked = + status === "blocked" || (status === "claimed" && !isRefreshing); + + if (blocked) { + return ( +
+

+ This shared map needs cookies to work. Please enable cookies for this + site and reload the page. +

+
+ ); + } + + return ( +
+ +
+ ); +} diff --git a/src/app/share/[token]/page.tsx b/src/app/share/[token]/page.tsx index 765612869..c2f24f85c 100644 --- a/src/app/share/[token]/page.tsx +++ b/src/app/share/[token]/page.tsx @@ -1,5 +1,5 @@ import { HydrationBoundary, dehydrate } from "@tanstack/react-query"; -import { notFound, redirect } from "next/navigation"; +import { notFound } from "next/navigation"; import ReadOnlyMapControls from "@/app/(private)/map/[id]/components/readonly/ReadOnlyMapControls"; import ReadOnlyNavbar from "@/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar"; import SharedMap from "@/app/(private)/map/[id]/components/SharedMap"; @@ -9,12 +9,13 @@ import { findMapById } from "@/server/repositories/Map"; import { findMapShareByToken } from "@/server/repositories/MapShare"; import { findValidShareGrantForMap } from "@/server/utils/auth"; import { createCaller, getQueryClient, trpc } from "@/services/trpc/server"; +import ShareClaim from "./components/ShareClaim"; import SharePasswordForm from "./components/SharePasswordForm"; import type { Metadata } from "next"; interface Props { params: Promise<{ token: string }>; - searchParams: Promise<{ viewId?: string; c?: string }>; + searchParams: Promise<{ viewId?: string }>; } export async function generateMetadata({ @@ -32,7 +33,7 @@ export async function generateMetadata({ export default async function SharedMapPage({ params, searchParams }: Props) { const { token } = await params; - const { viewId: requestedViewId, c: claimed } = await searchParams; + const { viewId: requestedViewId } = await searchParams; const share = await findMapShareByToken(token); if (!share || !share.enabled) { @@ -49,17 +50,10 @@ export default async function SharedMapPage({ params, searchParams }: Props) { ); } - // Passwordless: the grant cookie is minted by a route handler (cookies - // cannot be set during page render) which redirects back here. `c=1` - // marks a completed claim, so blocked cookies show a message instead - // of looping. - if (claimed) { - return ; - } - const claimPath = requestedViewId - ? `/api/share/${token}/claim?viewId=${encodeURIComponent(requestedViewId)}` - : `/api/share/${token}/claim`; - redirect(claimPath); + // Passwordless: the grant cookie is minted by the claim endpoint + // (cookies cannot be set during page render). ShareClaim calls it and + // refreshes, after which the grant check above passes. + return ; } const caller = await createCaller(); @@ -98,14 +92,3 @@ export default async function SharedMapPage({ params, searchParams }: Props) { ); } - -function CookiesRequiredMessage() { - return ( -
-

- This shared map needs cookies to work. Please enable cookies for this - site and reload the page. -

-
- ); -} From 834e5687835eca18b5f83c94a91adc1b88da362b Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 19:55:04 +0200 Subject: [PATCH 3/6] fix: make read-only navbar clickable ReadOnlyNavbar sits inside the share page's pointer-events-none overlay and never restored pointer events, so the view switcher and search box were click-transparent. Wrap it in pointer-events-auto, as MapNavbar does inside the same overlay pattern. Co-Authored-By: Claude Fable 5 --- .../components/readonly/ReadOnlyNavbar.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx b/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx index 1fa609450..f994cd12d 100644 --- a/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx +++ b/src/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar.tsx @@ -17,17 +17,19 @@ export default function ReadOnlyNavbar() { const { data: map } = useMapQuery(mapId); return ( - -
-
-

- {map ? map.name : "Loading..."} -

- +
+ +
+
+

+ {map ? map.name : "Loading..."} +

+ +
+
- -
- + +
); } From d98af83ccf537c4599d6c19b6a7e3539f1efe733 Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 19:58:07 +0200 Subject: [PATCH 4/6] docs: markers properties param is also honoured for share-grant holders Co-Authored-By: Claude Fable 5 --- src/app/(private)/map/[id]/hooks/useMarkerQueries.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/(private)/map/[id]/hooks/useMarkerQueries.ts b/src/app/(private)/map/[id]/hooks/useMarkerQueries.ts index d3495a480..271a145fc 100644 --- a/src/app/(private)/map/[id]/hooks/useMarkerQueries.ts +++ b/src/app/(private)/map/[id]/hooks/useMarkerQueries.ts @@ -41,8 +41,9 @@ export function useMarkerQueries() { // Columns used by this view's marker styling must be present on the // marker features for Mapbox match expressions to read them. Only - // honoured by the server for authenticated readers. Sorted so the - // query key is stable regardless of config field order. + // honoured by the server for authenticated readers and shared-map + // viewers whose grant covers the data source. Sorted so the query + // key is stable regardless of config field order. const visualisation = view?.config.markerVisualisations?.[dataSourceId]; const propertyColumns = [ ...new Set( From abcd06910e61bb6d7513f8195a44d8d75b2f2162 Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 20:05:56 +0200 Subject: [PATCH 5/6] perf: dedupe share page DB lookups between generateMetadata and render Co-Authored-By: Claude Fable 5 --- src/app/share/[token]/page.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/app/share/[token]/page.tsx b/src/app/share/[token]/page.tsx index c2f24f85c..7d1cd9911 100644 --- a/src/app/share/[token]/page.tsx +++ b/src/app/share/[token]/page.tsx @@ -1,5 +1,6 @@ import { HydrationBoundary, dehydrate } from "@tanstack/react-query"; import { notFound } from "next/navigation"; +import { cache } from "react"; import ReadOnlyMapControls from "@/app/(private)/map/[id]/components/readonly/ReadOnlyMapControls"; import ReadOnlyNavbar from "@/app/(private)/map/[id]/components/readonly/ReadOnlyNavbar"; import SharedMap from "@/app/(private)/map/[id]/components/SharedMap"; @@ -18,12 +19,17 @@ interface Props { searchParams: Promise<{ viewId?: string }>; } +// Deduplicate the lookups between generateMetadata and the page render +// (memoised per request, and only within this module) +const getShareByToken = cache(findMapShareByToken); +const getMapById = cache(findMapById); + export async function generateMetadata({ params, }: Pick): Promise { const { token } = await params; - const share = await findMapShareByToken(token); - const map = share?.enabled ? await findMapById(share.mapId) : null; + const share = await getShareByToken(token); + const map = share?.enabled ? await getMapById(share.mapId) : null; return { title: map ? `${map.name} - Mapped` : "Mapped", // Share links are unlisted: never index them @@ -35,7 +41,7 @@ export default async function SharedMapPage({ params, searchParams }: Props) { const { token } = await params; const { viewId: requestedViewId } = await searchParams; - const share = await findMapShareByToken(token); + const share = await getShareByToken(token); if (!share || !share.enabled) { notFound(); } @@ -45,7 +51,7 @@ export default async function SharedMapPage({ params, searchParams }: Props) { if (!grant) { if (share.passwordHash) { - const map = await findMapById(share.mapId); + const map = await getMapById(share.mapId); return ( ); From 4b686d6ac43b363ac66ae015dd73be13bffd0c2e Mon Sep 17 00:00:00 2001 From: Joaquim d'Souza Date: Wed, 5 Aug 2026 20:34:54 +0200 Subject: [PATCH 6/6] fix: cookie-blocked detection for the password gate, token-scoped claim guard - Scope ShareClaim's sessionStorage claim-attempt key per token so a claim on one share cannot flag a different share's link as blocked - Detect blocked cookies in SharePasswordForm the same way ShareClaim does (refresh inside a transition; surviving a finished refresh means the grant cookie did not stick) instead of silently re-showing the form - Treat a 404 from verify (share disabled / token rotated) as a refresh to the real 404 page rather than reporting an incorrect password Co-Authored-By: Claude Fable 5 --- .../share/[token]/components/ShareClaim.tsx | 20 ++++++--- .../[token]/components/SharePasswordForm.tsx | 43 ++++++++++++++++--- 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/src/app/share/[token]/components/ShareClaim.tsx b/src/app/share/[token]/components/ShareClaim.tsx index 4fbbdfcbb..aa7c6878f 100644 --- a/src/app/share/[token]/components/ShareClaim.tsx +++ b/src/app/share/[token]/components/ShareClaim.tsx @@ -8,7 +8,9 @@ import { useEffect, useRef, useState, useTransition } from "react"; // browser is not storing our cookies const RECENT_CLAIM_WINDOW_MS = 5000; -const CLAIM_ATTEMPT_KEY = "shareClaimAttemptedAt"; +// Scoped per token: a successful claim on one share must not mark a +// different share's link, opened moments later in the same tab, as blocked +const claimAttemptKey = (token: string) => `shareClaimAttemptedAt:${token}`; /** * The invisible claim step for a passwordless share: on mount, asks the @@ -33,12 +35,14 @@ export default function ShareClaim({ token }: { token: string }) { didRun.current = true; try { - const lastAttempt = Number(sessionStorage.getItem(CLAIM_ATTEMPT_KEY)); + const lastAttempt = Number( + sessionStorage.getItem(claimAttemptKey(token)), + ); if (Date.now() - lastAttempt < RECENT_CLAIM_WINDOW_MS) { setStatus("blocked"); return; } - sessionStorage.setItem(CLAIM_ATTEMPT_KEY, String(Date.now())); + sessionStorage.setItem(claimAttemptKey(token), String(Date.now())); } catch { // Storage being unavailable means cookies are blocked too setStatus("blocked"); @@ -58,8 +62,14 @@ export default function ShareClaim({ token }: { token: string }) { void claim(); }, [token, router]); - // A finished refresh that still renders this component means the server - // saw no grant: the cookie did not stick + // Cookie-stick detection, shared with `SharePasswordForm`: the grant + // cookie is httpOnly and `router.refresh()` reports nothing back, so the + // only way to learn whether the cookie stuck is to see what the server + // renders. `isRefreshing` spans the full refresh round-trip, and a + // refresh preserves client component state — so once the claim's refresh + // has finished, either the server saw the grant and swapped in the map + // (unmounting us), or this same instance is still mounted, meaning the + // cookie did not stick. const blocked = status === "blocked" || (status === "claimed" && !isRefreshing); diff --git a/src/app/share/[token]/components/SharePasswordForm.tsx b/src/app/share/[token]/components/SharePasswordForm.tsx index 4fede2dce..66af1167d 100644 --- a/src/app/share/[token]/components/SharePasswordForm.tsx +++ b/src/app/share/[token]/components/SharePasswordForm.tsx @@ -2,7 +2,7 @@ import { LockIcon } from "lucide-react"; import { useRouter } from "next/navigation"; -import { useState } from "react"; +import { useState, useTransition } from "react"; import { Button } from "@/shadcn/ui/button"; import { Input } from "@/shadcn/ui/input"; @@ -22,10 +22,12 @@ export default function SharePasswordForm({ const [password, setPassword] = useState(""); const [error, setError] = useState(null); const [submitting, setSubmitting] = useState(false); + const [verified, setVerified] = useState(false); + const [isRefreshing, startTransition] = useTransition(); const onSubmit = async (e: React.FormEvent) => { e.preventDefault(); - if (!password || submitting) { + if (!password || submitting || verified) { return; } setSubmitting(true); @@ -37,7 +39,15 @@ export default function SharePasswordForm({ body: JSON.stringify({ password }), }); if (response.ok) { - router.refresh(); + setVerified(true); + startTransition(() => router.refresh()); + return; + } + if (response.status === 404) { + // The share was disabled or its token rotated while the form was + // open: refresh so the server renders the real outcome (the 404 + // page) rather than reporting an incorrect password + startTransition(() => router.refresh()); return; } if (response.status === 429) { @@ -52,6 +62,26 @@ export default function SharePasswordForm({ } }; + // Cookie-stick detection, shared with `ShareClaim`: the grant cookie is + // httpOnly and `router.refresh()` reports nothing back, so the only way + // to learn whether the cookie stuck is to see what the server renders. + // `isRefreshing` spans the full refresh round-trip, and a refresh + // preserves client component state — so once a correct password's + // refresh has finished, either the server saw the grant and swapped in + // the map (unmounting us), or this same instance is still mounted, + // meaning the browser is blocking cookies. Without this the form would + // silently re-appear and the viewer would resubmit forever. + if (verified && !isRefreshing) { + return ( +
+

+ This shared map needs cookies to work. Please enable cookies for this + site and reload the page. +

+
+ ); + } + return (
setPassword(e.target.value)} /> {error &&

{error}

} -