fix(favicon): reuse auth and fallback to site avatar

Author: OXeu

client/src/page/settings-helpers.ts

@@ -2,6 +2,7 @@ import { ConfigWrapper } from "@rin/config";
 import type { TFunction } from "i18next";
 import { client, endpoint } from "../app/runtime";
 import { defaultClientConfig, defaultServerConfig } from "../state/config";
+import { headersWithAuth } from "../utils/auth";
 
 const MASKED_SECRET = "••••••••";
 
@@ -87,6 +88,7 @@ export async function uploadFavicon(file: File, t: TFunction, showAlert: (messag
   formData.append("file", file);
   const response = await fetch(`${endpoint}/api/favicon`, {
     method: "POST",
+    headers: headersWithAuth(),
     body: formData,
     credentials: "include",
   });

server/src/services/__tests__/favicon.test.ts

@@ -139,6 +139,64 @@ describe('FaviconService', () => {
             // Will fail due to S3 not being available, but verifies route is registered
             expect(res.status).not.toBe(404);
         });
+
+        it('should generate favicon from site avatar when favicon is missing', async () => {
+            const clientConfig = new TestCacheImpl();
+            await clientConfig.set('site.avatar', 'https://example.com/avatar.png');
+
+            app = new Hono<{ Bindings: Env; Variables: Variables }>();
+            app.use(createMiddleware<{ Bindings: Env; Variables: Variables }>(async (c, next) => {
+                c.set('db', db);
+                c.set('cache', new TestCacheImpl());
+                c.set('serverConfig', new TestCacheImpl());
+                c.set('clientConfig', clientConfig);
+                c.set('jwt', {
+                    sign: async (payload: any) => `mock_token_${payload.id}`,
+                    verify: async (token: string) => token.startsWith('mock_token_') ? { id: 1 } : null,
+                } as JWTUtils);
+                c.set('oauth2', undefined);
+                c.set('env', env);
+                c.set('uid', 1);
+                c.set('admin', true);
+                await next();
+            }));
+            app.route('/', FaviconService());
+
+            const originalFetch = globalThis.fetch;
+            globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+                const url = typeof input === 'string'
+                    ? input
+                    : input instanceof URL
+                      ? input.toString()
+                      : input.url;
+                const method = init?.method ?? (input instanceof Request ? input.method : undefined);
+
+                if (url === 'https://example.com/avatar.png') {
+                    return new Response(new Uint8Array([1, 2, 3]), {
+                        status: 200,
+                        headers: { 'Content-Type': 'image/webp' },
+                    });
+                }
+
+                if (url === 'https://test-bucket.test.r2.cloudflarestorage.com/images/favicon.webp' && method === 'PUT') {
+                    return new Response(null, { status: 200 });
+                }
+
+                if (url.endsWith('/images/favicon.webp')) {
+                    return new Response('missing', { status: 404 });
+                }
+
+                return originalFetch(input, init);
+            };
+
+            try {
+                const res = await app.request('/', { method: 'GET' }, env);
+                expect(res.status).toBe(200);
+                expect(res.headers.get('content-type')).toBe('image/webp');
+            } finally {
+                globalThis.fetch = originalFetch;
+            }
+        });
     });
 
     describe('GET /original - Get original favicon', () => {

server/src/services/favicon.ts

@@ -15,21 +15,77 @@ export function getFaviconKey(env: Env) {
     return path_join(env.S3_FOLDER || "", "favicon.webp");
 }
 
+async function buildFaviconFromSource(c: AppContext, sourceUrl: string, faviconKey: string) {
+    const env = c.get('env');
+    const s3 = createS3Client(env);
+    const imageRequest = new Request(sourceUrl, {
+        headers: c.req.raw.headers,
+    });
+
+    const response = await fetch(imageRequest, {
+        cf: {
+            image: {
+                width: 144,
+                height: 144,
+                fit: "cover",
+                format: "webp",
+                quality: 100,
+            },
+        },
+    });
+
+    if (!response.ok) {
+        return response;
+    }
+
+    const arrayBuffer = await response.arrayBuffer();
+    await putObject(
+        s3,
+        env,
+        faviconKey,
+        new Uint8Array(arrayBuffer),
+        "image/webp",
+    );
+
+    return new Response(arrayBuffer, {
+        status: 200,
+        headers: {
+            "Content-Type": "image/webp",
+            "Cache-Control": "public, max-age=31536000",
+        },
+    });
+}
+
 export function FaviconService(): Hono {
     const app = new Hono();
 
     // GET /favicon
     app.get("/", async (c: AppContext) => {
         const env = c.get('env');
+        const clientConfig = c.get('clientConfig');
         const accessHost = env.S3_ACCESS_HOST || env.S3_ENDPOINT;
         const faviconKey = getFaviconKey(env);
 
         try {
             const response = await fetch(new Request(`${accessHost}/${faviconKey}`));
 
             if (!response.ok) {
-                c.status(response.status as 200 | 400 | 401 | 403 | 404 | 500);
-                return c.text(await response.text());
+                const avatar = await clientConfig.get("site.avatar") as string | undefined;
+                if (!avatar) {
+                    c.status(response.status as 200 | 400 | 401 | 403 | 404 | 500);
+                    return c.text(await response.text());
+                }
+
+                const avatarUrl = new URL(avatar, c.req.url).toString();
+                const generatedFavicon = await buildFaviconFromSource(c, avatarUrl, faviconKey);
+                if (!generatedFavicon.ok) {
+                    c.status(generatedFavicon.status as 200 | 400 | 401 | 403 | 404 | 500);
+                    return c.text(await generatedFavicon.text());
+                }
+
+                c.header("Content-Type", generatedFavicon.headers.get("Content-Type") || "image/webp");
+                c.header("Cache-Control", generatedFavicon.headers.get("Cache-Control") || "public, max-age=31536000");
+                return c.body(await generatedFavicon.arrayBuffer());
             }
 
             c.header("Content-Type", "image/webp");