Add configurable QR code base URL for reverse proxy setups (#52)

gibz104 · gibz104 · commit 7bbdb3ac99c6 · 2026-03-24T14:41:26.000-05:00
Users behind nginx reverse proxies or custom domains can now set a
base URL override in Settings for QR code labels and NFC tags.
When empty, current behavior is preserved (uses browser URL).
diff --git a/app/src/app/api/settings/route.ts b/app/src/app/api/settings/route.ts
@@ -45,6 +45,9 @@ export async function GET() {
         }
       }
 
+      // Fetch optional QR base URL override
+      const qrBaseUrlSetting = await prisma.settings.findUnique({ where: { key: 'qr_base_url' } });
+
       return NextResponse.json({
         embeddedMode: false,
         addonMode: true,
@@ -57,6 +60,7 @@ export async function GET() {
           url: activeSpoolmanConnection.url,
           connected: true,
         } : null,
+        qrBaseUrl: qrBaseUrlSetting?.value || '',
       });
     }
 
@@ -234,6 +238,9 @@ export async function GET() {
     }
     // else: null — HA hasn't been set up yet (first startup)
 
+    // Fetch optional QR base URL override
+    const qrBaseUrlSetting = await prisma.settings.findUnique({ where: { key: 'qr_base_url' } });
+
     return NextResponse.json({
       embeddedMode,
       addonMode: false,
@@ -242,6 +249,7 @@ export async function GET() {
         url: spoolmanConnection.url,
         connected: true,
       } : null,
+      qrBaseUrl: qrBaseUrlSetting?.value || '',
     });
   } catch (error) {
     console.error('Error fetching settings:', error);
@@ -315,6 +323,21 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ success: true });
     }
 
+    if (type === 'qr_base_url') {
+      // Save QR code base URL override
+      const qrBaseUrl = (url || '').trim().replace(/\/+$/, '');
+      if (qrBaseUrl) {
+        await prisma.settings.upsert({
+          where: { key: 'qr_base_url' },
+          create: { key: 'qr_base_url', value: qrBaseUrl },
+          update: { value: qrBaseUrl },
+        });
+      } else {
+        await prisma.settings.deleteMany({ where: { key: 'qr_base_url' } });
+      }
+      return NextResponse.json({ success: true });
+    }
+
     if (type === 'spoolman') {
       // Validate Spoolman connection
       const client = new SpoolmanClient(url);
diff --git a/app/src/app/scan/page.tsx b/app/src/app/scan/page.tsx
@@ -21,6 +21,7 @@ function ScanPageContent() {
   const [manualBarcode, setManualBarcode] = useState('');
   const [spoolsLoading, setSpoolsLoading] = useState(true);
   const [directAccessPort, setDirectAccessPort] = useState<number | undefined>(undefined);
+  const [qrBaseUrl, setQrBaseUrl] = useState<string | undefined>(undefined);
 
   const handleScan = useCallback(async (scannedData: string) => {
     setLoading(true);
@@ -110,6 +111,9 @@ function ScanPageContent() {
         if (data.directAccessPort) {
           setDirectAccessPort(data.directAccessPort);
         }
+        if (data.qrBaseUrl) {
+          setQrBaseUrl(data.qrBaseUrl);
+        }
       })
       .catch(() => {});
   }, []);
@@ -193,7 +197,7 @@ function ScanPageContent() {
               <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
             </div>
           ) : allSpools.length > 0 ? (
-            <QRCodeGenerator spools={allSpools} directAccessPort={directAccessPort} />
+            <QRCodeGenerator spools={allSpools} directAccessPort={directAccessPort} qrBaseUrl={qrBaseUrl} />
           ) : (
             <p className="text-sm text-muted-foreground text-center py-4">
               No spools found. Add spools to Spoolman to generate QR labels.
@@ -216,7 +220,7 @@ function ScanPageContent() {
               <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
             </div>
           ) : allSpools.length > 0 ? (
-            <NFCWriter spools={allSpools} directAccessPort={directAccessPort} />
+            <NFCWriter spools={allSpools} directAccessPort={directAccessPort} qrBaseUrl={qrBaseUrl} />
           ) : (
             <p className="text-sm text-muted-foreground text-center py-4">
               No spools found. Add spools to Spoolman to write NFC tags.
diff --git a/app/src/app/settings/page.tsx b/app/src/app/settings/page.tsx
@@ -78,6 +78,10 @@ function SettingsContent() {
   const [enabledFilters, setEnabledFilters] = useState<string[]>([]);
   const [savingFilters, setSavingFilters] = useState(false);
 
+  // QR base URL state
+  const [qrBaseUrl, setQrBaseUrl] = useState('');
+  const [savingQrUrl, setSavingQrUrl] = useState(false);
+
   // Alert configuration states
   const [alertConfig, setAlertConfig] = useState<AlertConfig>({
     enabled: false,
@@ -151,6 +155,9 @@ function SettingsContent() {
       if (data.spoolman) {
         setSpoolmanUrl(data.spoolman.url);
       }
+      if (data.qrBaseUrl !== undefined) {
+        setQrBaseUrl(data.qrBaseUrl);
+      }
     } catch {
       toast.error('Failed to load settings');
     } finally {
@@ -1163,6 +1170,55 @@ function SettingsContent() {
             </>
           )}
 
+          {/* QR Code Base URL */}
+          <Card>
+            <CardHeader>
+              <CardTitle>QR Code / NFC URL</CardTitle>
+              <CardDescription>
+                Override the base URL used in generated QR code labels and NFC tags.
+                Leave empty to use the current browser URL automatically.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-3">
+              <div className="space-y-2">
+                <Label htmlFor="qrBaseUrl">Base URL</Label>
+                <div className="flex gap-2">
+                  <Input
+                    id="qrBaseUrl"
+                    value={qrBaseUrl}
+                    onChange={(e) => setQrBaseUrl(e.target.value)}
+                    placeholder="e.g., http://192.168.1.100:3000"
+                  />
+                  <Button
+                    onClick={async () => {
+                      setSavingQrUrl(true);
+                      try {
+                        const res = await fetch('/api/settings', {
+                          method: 'POST',
+                          headers: { 'Content-Type': 'application/json' },
+                          body: JSON.stringify({ type: 'qr_base_url', url: qrBaseUrl }),
+                        });
+                        if (!res.ok) throw new Error();
+                        toast.success(qrBaseUrl.trim() ? 'QR base URL saved' : 'QR base URL cleared');
+                      } catch {
+                        toast.error('Failed to save QR base URL');
+                      } finally {
+                        setSavingQrUrl(false);
+                      }
+                    }}
+                    disabled={savingQrUrl}
+                  >
+                    {savingQrUrl ? 'Saving...' : 'Save'}
+                  </Button>
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Useful when accessing SpoolmanSync through a reverse proxy or custom domain.
+                  QR codes will link to this URL instead of the browser address bar URL.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+
         </div>
 
         {/* Add Printer Dialog */}
diff --git a/app/src/components/nfc-writer.tsx b/app/src/components/nfc-writer.tsx
@@ -35,6 +35,7 @@ type SortBy = 'id' | 'name' | 'material' | 'vendor';
 interface NFCWriterProps {
   spools: Spool[];
   directAccessPort?: number;
+  qrBaseUrl?: string;
 }
 
 interface FilterField {
@@ -121,7 +122,7 @@ function getSpoolFieldValue(spool: Spool, fieldKey: string): string | null {
   }
 }
 
-export function NFCWriter({ spools, directAccessPort }: NFCWriterProps) {
+export function NFCWriter({ spools, directAccessPort, qrBaseUrl }: NFCWriterProps) {
   const [selectedSpool, setSelectedSpool] = useState<Spool | null>(null);
   const [searchValue, setSearchValue] = useState('');
   const [filters, setFilters] = useState<Record<string, string | null>>({});
@@ -166,7 +167,7 @@ export function NFCWriter({ spools, directAccessPort }: NFCWriterProps) {
   }, [spools, filters, sortBy]);
 
   const nfcUrl = selectedSpool
-    ? buildExternalUrl(`/scan/spool/${selectedSpool.id}`, directAccessPort)
+    ? buildExternalUrl(`/scan/spool/${selectedSpool.id}`, directAccessPort, qrBaseUrl)
     : null;
 
   const handleSpoolSelect = (spool: Spool) => {
@@ -249,7 +250,7 @@ export function NFCWriter({ spools, directAccessPort }: NFCWriterProps) {
 
   // Show unsupported message for non-NFC browsers
   if (!nfcSupported) {
-    const baseUrl = typeof window !== 'undefined' ? buildExternalUrl('/scan/spool/', directAccessPort) : '/scan/spool/';
+    const baseUrl = typeof window !== 'undefined' ? buildExternalUrl('/scan/spool/', directAccessPort, qrBaseUrl) : '/scan/spool/';
 
     return (
       <Alert>
diff --git a/app/src/components/qr-code-generator.tsx b/app/src/components/qr-code-generator.tsx
@@ -104,6 +104,7 @@ function sortSpools(spools: Spool[], sortBy: SortBy): Spool[] {
 interface QRCodeGeneratorProps {
   spools: Spool[];
   directAccessPort?: number;
+  qrBaseUrl?: string;
 }
 
 interface FilterField {
@@ -132,7 +133,7 @@ function getSpoolFieldValue(spool: Spool, fieldKey: string): string | null {
   }
 }
 
-export function QRCodeGenerator({ spools, directAccessPort }: QRCodeGeneratorProps) {
+export function QRCodeGenerator({ spools, directAccessPort, qrBaseUrl }: QRCodeGeneratorProps) {
   const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
   const [searchValue, setSearchValue] = useState('');
   const [filters, setFilters] = useState<Record<string, string | null>>({});
@@ -202,8 +203,8 @@ export function QRCodeGenerator({ spools, directAccessPort }: QRCodeGeneratorPro
   }, [spools, selectedIds]);
 
   const labelItems = useMemo(() => {
-    return buildLabelItems(selectedSpools, config, directAccessPort);
-  }, [selectedSpools, config, directAccessPort]);
+    return buildLabelItems(selectedSpools, config, directAccessPort, qrBaseUrl);
+  }, [selectedSpools, config, directAccessPort, qrBaseUrl]);
 
   const pages = useMemo(() => {
     return paginateItems(labelItems, config);
diff --git a/app/src/lib/ingress-path.ts b/app/src/lib/ingress-path.ts
@@ -49,15 +49,21 @@ export function isIngressMode(): boolean {
  *
  * @param path - The path to build the URL for
  * @param directAccessPort - The direct access port (addon mode only, default 3000)
+ * @param qrBaseUrl - Optional user-configured base URL override for QR codes/NFC tags
  */
-export function buildExternalUrl(path: string, directAccessPort: number = 3000): string {
+export function buildExternalUrl(path: string, directAccessPort: number = 3000, qrBaseUrl?: string): string {
   if (typeof window === 'undefined') {
     return path;
   }
 
   // Ensure path starts with /
   const normalizedPath = path.startsWith('/') ? path : `/${path}`;
 
+  // User-configured override takes priority (e.g., for reverse proxy setups)
+  if (qrBaseUrl) {
+    return `${qrBaseUrl}${normalizedPath}`;
+  }
+
   if (isIngressMode()) {
     // In addon mode, use the Next.js server directly on the configured port
     // host_network: true makes this accessible from the local network
diff --git a/app/src/lib/label-sheet-config.ts b/app/src/lib/label-sheet-config.ts
@@ -140,11 +140,12 @@ export function buildLabelItems(
   selectedSpools: Spool[],
   config: LabelSheetConfig,
   directAccessPort?: number,
+  qrBaseUrl?: string,
 ): LabelItem[] {
   const items: LabelItem[] = [];
 
   for (const spool of selectedSpools) {
-    const url = buildExternalUrl(`/scan/spool/${spool.id}`, directAccessPort);
+    const url = buildExternalUrl(`/scan/spool/${spool.id}`, directAccessPort, qrBaseUrl);
     for (let i = 0; i < config.sheet.itemCopies; i++) {
       items.push({ spool, url });
     }
