${success ? 'Stuffbox connected. You can close this window.' : 'Stuffbox could not be connected.'}
+
+ `;
+ return new NextResponse(html, {
+ status: success ? 200 : 400,
+ headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' },
+ });
+}
+
+export async function GET(request: NextRequest) {
+ const origin = request.nextUrl.origin;
+ try {
+ const user = await requireAuth();
+ const pending = await consumeStuffboxConnectionState();
+ const code = request.nextUrl.searchParams.get('code');
+ const state = request.nextUrl.searchParams.get('state');
+ const denied = request.nextUrl.searchParams.get('error');
+
+ if (denied) return popupResponse(origin, false, 'Stuffbox access was not approved.');
+ if (!pending || pending.userId !== user.id || !code || state !== pending.state) {
+ return popupResponse(origin, false, 'The Stuffbox connection request is invalid or expired.');
+ }
+
+ const tokens = await exchangeAuthorizationCode(pending.baseUrl, {
+ code,
+ codeVerifier: pending.verifier,
+ redirectUri: pending.redirectUri,
+ });
+ await saveStuffboxTokens(user.id, pending.baseUrl, tokens);
+ return popupResponse(new URL(pending.redirectUri).origin, true, 'Stuffbox connected.');
+ } catch (error) {
+ if (error instanceof StuffboxApiError) {
+ return popupResponse(origin, false, error.message);
+ }
+ console.error('Stuffbox callback error:', error);
+ return popupResponse(origin, false, 'Stuffbox could not be connected.');
+ }
+}
diff --git a/src/app/api/storage/stuffbox/connect/route.ts b/src/app/api/storage/stuffbox/connect/route.ts
new file mode 100644
index 0000000..5669b1c
--- /dev/null
+++ b/src/app/api/storage/stuffbox/connect/route.ts
@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { db } from '@/db';
+import { requireAuth } from '@/lib/auth';
+import { configuredStuffboxUrl, createConnectionRequest, StuffboxApiError } from '@/lib/stuffbox/client';
+import { saveStuffboxConnectionState } from '@/lib/stuffbox/connection-state';
+import { generatePkce } from '@/lib/stuffbox/crypto';
+import { STUFFBOX_SCOPES } from '@/lib/stuffbox/types';
+
+function nodeOrigin(request: NextRequest): string {
+ const appUrl = process.env.NEXT_PUBLIC_APP_URL?.trim();
+ if (appUrl) return new URL(appUrl).origin;
+ const configured = process.env.NEXT_PUBLIC_NODE_DOMAIN?.trim();
+ if (!configured) return request.nextUrl.origin;
+ const protocol = /^(localhost|127\.0\.0\.1)(:|$)/.test(configured) ? 'http' : 'https';
+ return new URL(configured.includes('://') ? configured : `${protocol}://${configured}`).origin;
+}
+
+export async function POST(request: NextRequest) {
+ try {
+ const user = await requireAuth();
+ const baseUrl = configuredStuffboxUrl();
+ if (!baseUrl) {
+ return NextResponse.json({
+ error: 'Stuffbox is not configured on this node.',
+ code: 'STUFFBOX_UNAVAILABLE',
+ }, { status: 503 });
+ }
+
+ const origin = nodeOrigin(request);
+ const redirectUri = `${origin}/api/storage/stuffbox/callback`;
+ const node = user.nodeId
+ ? await db.query.nodes.findFirst({ where: { id: user.nodeId } })
+ : null;
+ const pkce = generatePkce();
+ const connection = await createConnectionRequest(baseUrl, {
+ nodeName: node?.name || new URL(origin).host,
+ callbackUrl: redirectUri,
+ codeChallenge: pkce.challenge,
+ state: pkce.state,
+ scopes: STUFFBOX_SCOPES,
+ });
+
+ await saveStuffboxConnectionState({
+ userId: user.id,
+ baseUrl,
+ verifier: pkce.verifier,
+ state: pkce.state,
+ redirectUri,
+ expiresAt: Math.min(Date.parse(connection.expiresAt) || Date.now() + 10 * 60_000, Date.now() + 10 * 60_000),
+ });
+
+ return NextResponse.json({ authorizationUrl: connection.authorizationUrl });
+ } catch (error) {
+ if (error instanceof Error && error.message === 'Authentication required') {
+ return NextResponse.json({ error: 'Authentication required' }, { status: 401 });
+ }
+ if (error instanceof StuffboxApiError) {
+ return NextResponse.json({ error: error.message, code: error.code }, { status: error.status || 502 });
+ }
+ console.error('Stuffbox connection error:', error);
+ return NextResponse.json({ error: 'Unable to start Stuffbox connection' }, { status: 500 });
+ }
+}
diff --git a/src/app/api/storage/stuffbox/disconnect/route.ts b/src/app/api/storage/stuffbox/disconnect/route.ts
new file mode 100644
index 0000000..d86d5d8
--- /dev/null
+++ b/src/app/api/storage/stuffbox/disconnect/route.ts
@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+import { requireAuth } from '@/lib/auth';
+import { revokeToken } from '@/lib/stuffbox/client';
+import {
+ getStuffboxConnection,
+ readStuffboxRefreshToken,
+ removeStuffboxConnection,
+} from '@/lib/stuffbox/tokens';
+
+export async function POST() {
+ try {
+ const user = await requireAuth();
+ const connection = await getStuffboxConnection(user.id);
+ if (connection) {
+ try {
+ await revokeToken(connection.baseUrl, readStuffboxRefreshToken(connection));
+ } catch (error) {
+ console.warn('Stuffbox token revocation failed; removing local connection:', error);
+ }
+ await removeStuffboxConnection(user.id);
+ }
+ return NextResponse.json({ success: true });
+ } catch (error) {
+ if (error instanceof Error && error.message === 'Authentication required') {
+ return NextResponse.json({ error: 'Authentication required' }, { status: 401 });
+ }
+ console.error('Stuffbox disconnect error:', error);
+ return NextResponse.json({ error: 'Unable to disconnect Stuffbox' }, { status: 500 });
+ }
+}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
index 971fd30..063c6a9 100644
--- a/src/app/settings/page.tsx
+++ b/src/app/settings/page.tsx
@@ -2,7 +2,7 @@
import Link from 'next/link';
-import { Rocket, Shield, Bell, Eye, UserX } from 'lucide-react';
+import { Rocket, Shield, Bell, Eye, UserX, HardDrive } from 'lucide-react';
export default function SettingsPage() {
return (
@@ -26,6 +26,23 @@ export default function SettingsPage() {
+
+
+
+
+ Connect Stuffbox or an S3-compatible bucket
+
+
+
+
(null);
+ const [error, setError] = useState('');
+ const [showConnect, setShowConnect] = useState(false);
+ const [isDisconnecting, setIsDisconnecting] = useState(false);
+
+ const loadStatus = useCallback(async () => {
+ try {
+ const response = await fetch('/api/storage/configuration', { cache: 'no-store' });
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok) throw new Error(data.error || 'Unable to load storage settings');
+ setStatus(data);
+ setError('');
+ } catch (loadError) {
+ setError(loadError instanceof Error ? loadError.message : 'Unable to load storage settings');
+ }
+ }, []);
+
+ useEffect(() => { void loadStatus(); }, [loadStatus]);
+
+ const disconnectStuffbox = async () => {
+ if (!window.confirm('Disconnect Stuffbox from this Synapsis account? Existing media links will keep working.')) return;
+ setIsDisconnecting(true);
+ setError('');
+ try {
+ const response = await fetch('/api/storage/stuffbox/disconnect', { method: 'POST' });
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok) throw new Error(data.error || 'Unable to disconnect Stuffbox');
+ await loadStatus();
+ } catch (disconnectError) {
+ setError(disconnectError instanceof Error ? disconnectError.message : 'Unable to disconnect Stuffbox');
+ } finally {
+ setIsDisconnecting(false);
+ }
+ };
+
+ return <>
+
+
+
+ Storage belongs to your account rather than this node. That keeps your media available if you move your account elsewhere.
+
+
+
+
+ {status?.provider === 'stuffbox' ?
: status?.provider === 's3' ?
:
}
+
+
{!status ? 'Loading…' : status.provider === 'stuffbox' ? 'Stuffbox connected' : status.provider === 's3' ? 'S3 storage connected' : 'No media storage connected'}
+ {status?.stuffboxBaseUrl &&
{status.stuffboxBaseUrl}
}
+ {status?.s3Provider && status.provider === 's3' &&
Provider: {status.s3Provider}
}
+
+
+
+ setShowConnect(true)} disabled={!status}>{status?.provider ? 'Change storage' : 'Connect storage'}
+ {status?.provider === 'stuffbox' && {isDisconnecting ? 'Disconnecting…' : 'Disconnect Stuffbox'} }
+
+
{error}
}
+
+
{ setShowConnect(false); await loadStatus(); }} onCancel={() => setShowConnect(false)} />
+ ;
+}
diff --git a/src/components/Compose.tsx b/src/components/Compose.tsx
index 62be04f..5a8051c 100644
--- a/src/components/Compose.tsx
+++ b/src/components/Compose.tsx
@@ -8,6 +8,7 @@ import { VideoEmbed } from '@/components/VideoEmbed';
import { useFormattedHandle } from '@/lib/utils/handle';
import { useAuth } from '@/lib/contexts/AuthContext';
import { StorageConfigurationPrompt } from '@/components/StorageConfigurationPrompt';
+import { MediaUploadError, uploadMediaFile } from '@/lib/stuffbox/browser-upload';
interface MediaAttachment extends Attachment {
mimeType?: string;
@@ -131,31 +132,22 @@ export function Compose({ onPost, replyingTo, onCancelReply, placeholder = "What
for (const file of selectedFiles) {
try {
- const formData = new FormData();
- formData.append('file', file);
- const res = await fetch('/api/media/upload', {
- method: 'POST',
- body: formData,
- });
- const data = await res.json();
-
- if (!res.ok || !data.media?.id) {
- if (data.code === 'STORAGE_NOT_CONFIGURED') {
- setPendingStorageFiles(selectedFiles);
- setShowStorageConfiguration(true);
- setIsUploading(false);
- return;
- }
- throw new Error(data.error || 'Upload failed');
- }
+ const media = await uploadMediaFile(file);
uploaded.push({
- id: data.media.id,
- url: data.media.url || data.url,
- altText: data.media.altText ?? null,
- mimeType: data.media.mimeType ?? file.type,
+ id: media.id,
+ url: media.url,
+ altText: media.altText ?? null,
+ mimeType: media.mimeType ?? file.type,
});
} catch (error) {
+ if (error instanceof MediaUploadError && error.code === 'STORAGE_NOT_CONFIGURED') {
+ setAttachments((prev) => [...prev, ...uploaded].slice(0, 4));
+ setPendingStorageFiles(selectedFiles.slice(uploaded.length));
+ setShowStorageConfiguration(true);
+ setIsUploading(false);
+ return;
+ }
console.error('Upload failed', error);
setUploadError('One or more uploads failed. Try again.');
}
diff --git a/src/components/StorageConfigurationPrompt.tsx b/src/components/StorageConfigurationPrompt.tsx
index 5da9ebb..c6f6f7c 100644
--- a/src/components/StorageConfigurationPrompt.tsx
+++ b/src/components/StorageConfigurationPrompt.tsx
@@ -1,6 +1,7 @@
'use client';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { Box, ChevronDown, ExternalLink } from 'lucide-react';
interface StorageConfigurationPromptProps {
open: boolean;
@@ -8,11 +9,7 @@ interface StorageConfigurationPromptProps {
onCancel: () => void;
}
-export function StorageConfigurationPrompt({
- open,
- onConfigured,
- onCancel,
-}: StorageConfigurationPromptProps) {
+export function StorageConfigurationPrompt({ open, onConfigured, onCancel }: StorageConfigurationPromptProps) {
const [provider, setProvider] = useState('r2');
const [endpoint, setEndpoint] = useState('');
const [publicBaseUrl, setPublicBaseUrl] = useState('');
@@ -23,37 +20,81 @@ export function StorageConfigurationPrompt({
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isLoading, setIsLoading] = useState(false);
+ const [stuffboxAvailable, setStuffboxAvailable] = useState(false);
+ const [showS3, setShowS3] = useState(false);
+
+ useEffect(() => {
+ if (!open) return;
+ let active = true;
+ setError('');
+ setIsLoading(true);
+ fetch('/api/storage/configuration', { cache: 'no-store' })
+ .then(async (response) => {
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok) throw new Error(data.error || 'Unable to load storage options');
+ if (active) setStuffboxAvailable(Boolean(data.stuffboxAvailable));
+ })
+ .catch((loadError) => active && setError(loadError instanceof Error ? loadError.message : 'Unable to load storage options'))
+ .finally(() => active && setIsLoading(false));
+ return () => { active = false; };
+ }, [open]);
if (!open) return null;
-
const needsCustomUrls = provider === 'r2' || provider === 'b2' || provider === 'contabo';
- const handleSubmit = async (event: React.FormEvent) => {
+ const connectStuffbox = async () => {
+ setError('');
+ setIsSubmitting(true);
+ const popup = window.open('', 'synapsis-stuffbox', 'popup,width=620,height=760');
+ if (!popup) {
+ setError('Your browser blocked the Stuffbox window. Allow popups and try again.');
+ setIsSubmitting(false);
+ return;
+ }
+ popup.document.body.textContent = 'Connecting to Stuffbox…';
+
+ try {
+ const response = await fetch('/api/storage/stuffbox/connect', { method: 'POST' });
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok || !data.authorizationUrl) throw new Error(data.error || 'Unable to connect Stuffbox');
+ const result = new Promise((resolve, reject) => {
+ const timeout = window.setTimeout(() => {
+ window.removeEventListener('message', receive);
+ reject(new Error('Stuffbox connection timed out.'));
+ }, 10 * 60_000);
+ function receive(event: MessageEvent) {
+ if (event.origin !== window.location.origin || event.data?.type !== 'synapsis:stuffbox') return;
+ window.clearTimeout(timeout);
+ window.removeEventListener('message', receive);
+ if (event.data.success) resolve();
+ else reject(new Error(event.data.message || 'Stuffbox could not be connected.'));
+ }
+ window.addEventListener('message', receive);
+ });
+ popup.location.href = data.authorizationUrl;
+ await result;
+ await onConfigured();
+ } catch (connectError) {
+ if (!popup.closed) popup.close();
+ setError(connectError instanceof Error ? connectError.message : 'Unable to connect Stuffbox');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ const connectS3 = async (event: React.FormEvent) => {
event.preventDefault();
setError('');
setIsSubmitting(true);
-
try {
const response = await fetch('/api/storage/configuration', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({
- provider,
- endpoint: endpoint || null,
- publicBaseUrl: publicBaseUrl || null,
- region,
- bucket,
- accessKey,
- secretKey,
- password,
- }),
+ body: JSON.stringify({ provider, endpoint: endpoint || null, publicBaseUrl: publicBaseUrl || null, region, bucket, accessKey, secretKey, password }),
});
const data = await response.json().catch(() => ({}));
-
- if (!response.ok) {
- throw new Error(data.error || 'Failed to connect storage');
- }
-
+ if (!response.ok) throw new Error(data.error || 'Failed to connect storage');
await onConfigured();
} catch (submitError) {
setError(submitError instanceof Error ? submitError.message : 'Failed to connect storage');
@@ -63,83 +104,68 @@ export function StorageConfigurationPrompt({
};
return (
-
+
event.stopPropagation()}>
-
Connect your media storage
+
Connect media storage
- Synapsis keeps media in your own S3-compatible bucket. This is only required when you upload a photo or video.
+ Your media lives outside this Synapsis node, so your account stays portable.
-