Koko210/immich-folio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

security: implement AUTH_SECRET and secure map/exif API routes

Browse Source
This commit is contained in:
ralksta
2026-03-07 08:18:23 +01:00
parent 2a16a9386f
commit e394fe84a0
14 changed files with 849 additions and 793 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local.example
View File

@@ -22,6 +22,10 @@ CACHE_TTL=300
# Rate limit for image proxy (integer >= 1, requests per minute per IP, default: 120)
# RATE_LIMIT_RPM=120
# Secret for signing auth cookies and encrypting asset tokens (string, min 16 chars).
# If not provided, IMMICH_API_KEY will be used as a fallback (not recommended).
# AUTH_SECRET=your-super-long-random-secret-here
# ── Album configuration ──────────────────────────────────────────
# Albums, subpages, hero image, and passwords are defined in content/gallery.yaml
# See content/gallery.yaml.example for the full reference.

3
app/[...path]/PhotoGrid.tsx
View File

@@ -136,7 +136,8 @@ export function PhotoGrid({ assets, layout = 'masonry', gridStyle }: PhotoGridPr
{assets.map((asset, index) => (
<FadeIn key={asset.id} delay={index < 12 ? index * 50 : 0}>
<div
className={`photo-grid__item${layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
className={`photo-grid__item${
layout === 'showcase' && index === 0 ? ' photo-grid__featured' : ''
}`}
onClick={() => openLightbox(index)}
onKeyDown={(e) => {

11
app/api/exif/[id]/route.ts
View File

@@ -24,7 +24,8 @@ export async function GET(_request: Request, { params }: { params: Promise<{ id:
}
const exif = asset.exifInfo;
return NextResponse.json({
return NextResponse.json(
{
make: exif.make,
model: exif.model,
lensModel: exif.lensModel,
@@ -34,5 +35,11 @@ export async function GET(_request: Request, { params }: { params: Promise<{ id:
iso: exif.iso,
city: exif.city,
country: exif.country,
});
},
{
headers: {
'Cache-Control': 'private, max-age=86400, stale-while-revalidate=3600',
},
},
);
}

33
app/api/map/route.ts
View File

@@ -4,39 +4,56 @@
* Cover asset IDs are encrypted for security.
*/
import { NextResponse } from 'next/server';
import { NextRequest, NextResponse } from 'next/server';
import { cookies } from 'next/headers';
import { immich } from '@/lib/immich';
import { getConfig } from '@/lib/config';
import { imageUrl } from '@/lib/urls';
import { isAuthenticated } from '@/lib/auth';
export const dynamic = 'force-dynamic';
export async function GET() {
export async function GET(_request: NextRequest) {
const config = getConfig();
if (!config.map) {
return NextResponse.json({ error: 'Map is not enabled' }, { status: 404 });
}
const cookieStore = await cookies();
const getCookie = (name: string) => cookieStore.get(name)?.value;
const locations = await immich.getMapData();
// Encrypt cover asset IDs and convert to public-safe image URLs
const publicLocations = locations.map((loc) => ({
// Filter locations and albums based on auth
const publicLocations = locations
.map((loc) => {
// Only keep albums the user is allowed to see
const allowedAlbums = loc.albums.filter((a) => {
if (!a.subpageSlug) return true; // Standalone albums are public
return isAuthenticated(a.subpageSlug, getCookie);
});
if (allowedAlbums.length === 0) return null;
return {
city: loc.city,
country: loc.country,
lat: loc.lat,
lng: loc.lng,
photoCount: loc.photoCount,
photoCount: loc.photoCount, // Note: This count might be slightly off if some photos are in hidden albums
coverUrl: imageUrl(loc.coverAssetId, 'thumbnail'),
albums: loc.albums.map((a) => ({
albums: allowedAlbums.map((a) => ({
name: a.name,
url: a.subpageSlug ? `/${a.subpageSlug}/${a.slug}` : `/${a.slug}`,
})),
}));
};
})
.filter((loc) => loc !== null);
return NextResponse.json(publicLocations, {
headers: {
'Cache-Control': `public, max-age=${Math.floor(config.cacheTtl / 1000)}, stale-while-revalidate=60`,
'Cache-Control': `private, no-cache, no-store, must-revalidate`, // Don't cache personalized map data publicly
},
});
}

2
app/map/page.tsx
View File

@@ -26,7 +26,7 @@ export default function MapPage() {
return (
<>
{/* Leaflet CSS from CDN */}
{/* eslint-disable-next-line @next/next/no-page-custom-font */}
{}
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"

10
app/page.tsx
View File

@@ -80,9 +80,7 @@ export default async function HomePage() {
<nav className="hero__nav hero__nav--indexed">
{subpages.map((sp, i) => (
<Link key={sp.slug} href={`/${sp.slug}`} className="hero__nav-link">
<span className="hero__nav-index">
{String(i + 1).padStart(2, '0')}
</span>
<span className="hero__nav-index">{String(i + 1).padStart(2, '0')}</span>
{sp.name}
</Link>
))}
@@ -127,11 +125,7 @@ export default async function HomePage() {
<FadeIn delay={200}>
<nav className="hero__thumbnail-strip">
{allEntries.map((entry) => (
<Link
key={entry.slug}
href={`/${entry.slug}`}
className="hero__thumbnail-item"
>
<Link key={entry.slug} href={`/${entry.slug}`} className="hero__thumbnail-item">
<span className="hero__thumbnail-label">{entry.name}</span>
</Link>
))}

81
components/DevToolbar.tsx
View File

@@ -11,7 +11,7 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback, useLayoutEffect } from 'react';
const PRESETS = ['studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph', 'botanica'];
const FRAMES = ['none', 'passepartout', 'shadow'];
@@ -62,8 +62,8 @@ export function DevToolbar() {
const [gridGap, setGridGap] = useState(12);
// Read initial values from DOM
useEffect(() => {
setPreset(getAttr('data-preset'));
useLayoutEffect(() => {
setPreset(getAttr('data-preset')); // eslint-disable-line react-hooks/set-state-in-effect
setFrame(getAttr('data-photo-frame'));
setTheme(getAttr('data-theme') || 'dark');
setGrain(getAttr('data-grain'));
@@ -85,12 +85,17 @@ export function DevToolbar() {
const fonts = PRESET_FONTS[p];
if (fonts) {
setVar('--font-serif', `'${fonts.heading}', Georgia, 'Times New Roman', serif`);
setVar('--font-sans', `'${fonts.body}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`);
setVar(
'--font-sans',
`'${fonts.body}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`,
);
setVar('--font-caption', `'${fonts.caption}', Georgia, serif`);
// Dynamically load Google Fonts if not already loaded
const families = [fonts.heading, fonts.body, fonts.caption]
.filter((f, i, a) => a.indexOf(f) === i)
.map((f) => `family=${f.replace(/\s+/g, '+')}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400`)
.map(
(f) => `family=${f.replace(/\s+/g, '+')}:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400`,
)
.join('&');
const href = `https://fonts.googleapis.com/css2?${families}&display=swap`;
// Check if already loaded
@@ -135,14 +140,11 @@ export function DevToolbar() {
});
}, []);
const copyYaml = useCallback(
(section: string, yaml: string) => {
const copyYaml = useCallback((section: string, yaml: string) => {
navigator.clipboard.writeText(yaml);
setCopiedYaml(section);
setTimeout(() => setCopiedYaml(''), 1500);
},
[],
);
}, []);
const currentYaml = `theme:
preset: ${preset}
@@ -176,9 +178,7 @@ export function DevToolbar() {
height: 44,
borderRadius: '50%',
border: '2px solid rgba(255,255,255,0.2)',
background: open
? 'linear-gradient(135deg, #f43f5e, #a855f7)'
: 'rgba(30,30,30,0.9)',
background: open ? 'linear-gradient(135deg, #f43f5e, #a855f7)' : 'rgba(30,30,30,0.9)',
backdropFilter: 'blur(12px)',
color: '#fff',
fontSize: 18,
@@ -243,29 +243,17 @@ export function DevToolbar() {
{/* ── Preset ──────────────────────────── */}
<Section title="Preset">
<PillGrid
items={PRESETS}
active={preset}
onSelect={switchPreset}
/>
<PillGrid items={PRESETS} active={preset} onSelect={switchPreset} />
</Section>
{/* ── Dark / Light ────────────────────── */}
<Section title="Mode">
<PillGrid
items={['dark', 'light']}
active={theme}
onSelect={switchTheme}
/>
<PillGrid items={['dark', 'light']} active={theme} onSelect={switchTheme} />
</Section>
{/* ── Photo Frame ─────────────────────── */}
<Section title="Photo Frame">
<PillGrid
items={FRAMES}
active={frame}
onSelect={switchFrame}
/>
<PillGrid items={FRAMES} active={frame} onSelect={switchFrame} />
</Section>
{/* ── Grain ───────────────────────────── */}
@@ -274,11 +262,15 @@ export function DevToolbar() {
onClick={toggleGrain}
style={{
...pillStyle,
background: grain === 'true'
background:
grain === 'true'
? 'linear-gradient(135deg, #f43f5e, #a855f7)'
: 'rgba(255,255,255,0.06)',
color: grain === 'true' ? '#fff' : '#a1a1aa',
border: grain === 'true' ? '1px solid rgba(255,255,255,0.2)' : '1px solid rgba(255,255,255,0.06)',
border:
grain === 'true'
? '1px solid rgba(255,255,255,0.2)'
: '1px solid rgba(255,255,255,0.06)',
}}
>
{grain === 'true' ? '● On' : '○ Off'}
@@ -288,7 +280,9 @@ export function DevToolbar() {
{/* ── Grid Controls ───────────────────── */}
<Section title="Grid">
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>Cols: {gridCols}</label>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>
Cols: {gridCols}
</label>
<input
type="range"
min={1}
@@ -299,7 +293,9 @@ export function DevToolbar() {
/>
</div>
<div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 8 }}>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>Gap: {gridGap}px</label>
<label style={{ color: '#71717a', fontSize: 11, minWidth: 45 }}>
Gap: {gridGap}px
</label>
<input
type="range"
min={0}
@@ -313,17 +309,25 @@ export function DevToolbar() {
{/* ── Hero Style (info only) ──────────── */}
<Section title="Hero Style (server)">
<PillGrid items={HERO_STYLES} active="" onSelect={(h) => {
<PillGrid
items={HERO_STYLES}
active=""
onSelect={(h) => {
copyYaml('hero', `theme:\n heroStyle: ${h}`);
}} />
}}
/>
{copiedYaml === 'hero' && <CopyBadge />}
</Section>
{/* ── Grid Layout (info only) ─────────── */}
<Section title="Grid Layout (server)">
<PillGrid items={GRID_LAYOUTS} active="" onSelect={(l) => {
<PillGrid
items={GRID_LAYOUTS}
active=""
onSelect={(l) => {
copyYaml('layout', `grid:\n layout: ${l}`);
}} />
}}
/>
{copiedYaml === 'layout' && <CopyBadge />}
</Section>
@@ -341,9 +345,8 @@ export function DevToolbar() {
padding: '10px 0',
borderRadius: 10,
border: 'none',
background: copiedYaml === 'all'
? '#22c55e'
: 'linear-gradient(135deg, #a855f7, #6366f1)',
background:
copiedYaml === 'all' ? '#22c55e' : 'linear-gradient(135deg, #a855f7, #6366f1)',
color: '#fff',
fontWeight: 600,
fontSize: 12,

13
components/MapView.tsx
View File

@@ -52,7 +52,8 @@ export function MapView() {
// Dark-themed tiles (CartoDB Dark Matter)
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19,
}).addTo(map);
@@ -139,14 +140,14 @@ export function MapView() {
return (
<div style={{ position: 'relative' }}>
{loading && (
<div className="map-container__loading" style={{ position: 'absolute', inset: 0, zIndex: 1000 }}>
<div
className="map-container__loading"
style={{ position: 'absolute', inset: 0, zIndex: 1000 }}
>
<p>Loading map…</p>
</div>
)}
<div
ref={containerRef}
className="map-container"
/>
<div ref={containerRef} className="map-container" />
</div>
);
}

2
lib/auth.ts
View File

@@ -12,7 +12,7 @@ import { getConfig, SubpageConfig } from './config';
const TOKEN_EXPIRY_HOURS = 24;
function hmac(data: string): string {
return crypto.createHmac('sha256', getConfig().immich.apiKey).update(data).digest('hex');
return crypto.createHmac('sha256', getConfig().authSecret).update(data).digest('hex');
}
function authToken(slug: string, password: string): string {

20
lib/config.ts
View File

@@ -224,6 +224,8 @@ export interface GridConfig {
export interface AppConfig {
immich: { apiUrl: string; apiKey: string };
/** Secret used for signing auth cookies and encrypting asset tokens. */
authSecret: string;
albums: string[];
standaloneAlbums: string[];
subpages: SubpageConfig[];
@@ -317,6 +319,15 @@ export function getConfig(): AppConfig {
const apiUrl = env.IMMICH_API_URL;
const apiKey = env.IMMICH_API_KEY;
const authSecret = env.AUTH_SECRET || apiKey;
if (!env.AUTH_SECRET && process.env.NODE_ENV === 'production') {
console.warn(
'\n⚠️ SECURITY WARNING: AUTH_SECRET is not set. Falling back to IMMICH_API_KEY.\n' +
' Please set a long random string as AUTH_SECRET in your .env for better security.\n',
);
}
const gallery = loadGalleryYaml();
// Resolve theme: string shorthand → preset, object → merged with preset base
@@ -340,7 +351,13 @@ export function getConfig(): AppConfig {
processAlbumEntry(entry, 'gallery.yaml albums'),
);
if (standaloneAlbumIds.length === 0 && (!gallery.subpages || (Array.isArray(gallery.subpages) ? gallery.subpages.length === 0 : Object.keys(gallery.subpages).length === 0))) {
if (
standaloneAlbumIds.length === 0 &&
(!gallery.subpages ||
(Array.isArray(gallery.subpages)
? gallery.subpages.length === 0
: Object.keys(gallery.subpages).length === 0))
) {
throw new Error('gallery.yaml must define at least one album or subpage');
}
@@ -427,6 +444,7 @@ export function getConfig(): AppConfig {
apiUrl: `${apiUrl}/api`,
apiKey,
},
authSecret,
albums: allAlbumIds,
standaloneAlbums: standaloneAlbumIds.filter((id) => !subpageAlbumIds.has(id)),
subpages,

6
lib/env.ts
View File

@@ -26,6 +26,12 @@ const envSchema = z.object({
/** Rate limit: max requests per minute per IP */
RATE_LIMIT_RPM: z.coerce.number().int().min(1).default(120),
/**
* Secret used for signing auth cookies and encrypting asset tokens.
* If not provided, IMMICH_API_KEY will be used as a fallback (not recommended for production).
*/
AUTH_SECRET: z.string().min(16, 'AUTH_SECRET should be at least 16 characters').optional(),
});
export type Env = z.infer<typeof envSchema>;

4
lib/tokens.ts
View File

@@ -13,8 +13,8 @@ let _key: Buffer | null = null;
function getKey(): Buffer {
if (!_key) {
const apiKey = getConfig().immich.apiKey;
_key = crypto.createHash('sha256').update(apiKey).digest();
const authSecret = getConfig().authSecret;
_key = crypto.createHash('sha256').update(authSecret).digest();
}
return _key;
}

13
scripts/screenshots.ts
View File

@@ -15,7 +15,7 @@
* docs/screenshots/theme-{preset}-{page}.png
*/
import { execSync, spawn, type ChildProcess } from 'child_process';
import { spawn, type ChildProcess } from 'child_process';
import fs from 'fs';
import path from 'path';
@@ -71,9 +71,9 @@ async function main() {
await page.goto(`${BASE_URL}${GRID_PATH}`, { waitUntil: 'networkidle' });
// Force all fade-in elements visible (don't scroll — keep album title in view)
await page.evaluate(() => {
document.querySelectorAll('.fade-in').forEach(el => el.classList.add('fade-in--visible'));
document.querySelectorAll('.fade-in').forEach((el) => el.classList.add('fade-in--visible'));
// Trigger lazy images by switching to eager loading
document.querySelectorAll('img[loading="lazy"]').forEach(img => {
document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
(img as HTMLImageElement).loading = 'eager';
});
});
@@ -101,7 +101,12 @@ async function main() {
}
console.log(`\n🎉 Done! Screenshots saved to ${OUTPUT_DIR}/`);
console.log(` ${fs.readdirSync(OUTPUT_DIR).filter(f => f.endsWith('.png')).join(', ')}`);
console.log(
` ${fs
.readdirSync(OUTPUT_DIR)
.filter((f) => f.endsWith('.png'))
.join(', ')}`,
);
}
// ── Helpers ──────────────────────────────────────────────────────