stack-auth · fomalhautb · Aug 19, 2025 · Jul 24, 2025 · Jul 24, 2025 · Jul 24, 2025
diff --git a/apps/backend/prisma/migrations/20250801204029_logo_url/migration.sql b/apps/backend/prisma/migrations/20250801204029_logo_url/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "logoUrl" TEXT;
+
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "fullLogoUrl" TEXT;
diff --git a/apps/backend/prisma/schema.prisma b/apps/backend/prisma/schema.prisma
@@ -19,6 +19,8 @@ model Project {
   displayName      String
   description      String  @default("")
   isProductionMode Boolean
+  logoUrl          String?
+  fullLogoUrl      String?
 
   projectConfigOverride Json?
 

diff --git a/apps/backend/src/lib/images.tsx b/apps/backend/src/lib/images.tsx
@@ -11,7 +11,7 @@ export async function parseBase64Image(input: string, options: {
   maxHeight?: number,
   allowTypes?: string[],
 } = {
-  maxBytes: 1024 * 300,
+  maxBytes: 1_000_000, // 1MB
   maxWidth: 4096,
   maxHeight: 4096,
   allowTypes: ['image/jpeg', 'image/png', 'image/webp'],

diff --git a/apps/backend/src/lib/projects.tsx b/apps/backend/src/lib/projects.tsx
@@ -1,3 +1,4 @@
+import { uploadAndGetUrl } from "@/s3";
 import { Prisma } from "@prisma/client";
 import { KnownErrors } from "@stackframe/stack-shared";
 import { CompleteConfig, EnvironmentConfigOverrideOverride, ProjectConfigOverrideOverride } from "@stackframe/stack-shared/dist/config/schema";
@@ -48,6 +49,8 @@ export function getProjectQuery(projectId: string): RawQuery<Promise<Omit<Projec
         id: row.id,
         display_name: row.displayName,
         description: row.description,
+        logo_url: row.logoUrl,
+        full_logo_url: row.fullLogoUrl,
         created_at_millis: new Date(row.createdAt + "Z").getTime(),
         is_production_mode: row.isProductionMode,
       };
@@ -76,6 +79,16 @@ export async function createOrUpdateProjectWithLegacyConfig(
     data: ProjectsCrud["Admin"]["Update"],
   })
 ) {
+  let logoUrl: string | null | undefined;
+  if (options.data.logo_url !== undefined) {
+    logoUrl = await uploadAndGetUrl(options.data.logo_url, "project-logos");
+  }
+
+  let fullLogoUrl: string | null | undefined;
+  if (options.data.full_logo_url !== undefined) {
+    fullLogoUrl = await uploadAndGetUrl(options.data.full_logo_url, "project-logos");
+  }
+
   const [projectId, branchId] = await retryTransaction(globalPrismaClient, async (tx) => {
     let project: Prisma.ProjectGetPayload<{}>;
     let branchId: string;
@@ -87,6 +100,8 @@ export async function createOrUpdateProjectWithLegacyConfig(
           displayName: options.data.display_name,
           description: options.data.description ?? "",
           isProductionMode: options.data.is_production_mode ?? false,
+          logoUrl,
+          fullLogoUrl,
         },
       });
 
@@ -117,6 +132,8 @@ export async function createOrUpdateProjectWithLegacyConfig(
           displayName: options.data.display_name,
           description: options.data.description === null ? "" : options.data.description,
           isProductionMode: options.data.is_production_mode,
+          logoUrl,
+          fullLogoUrl,
         },
       });
       branchId = options.branchId;

diff --git a/apps/backend/src/s3.tsx b/apps/backend/src/s3.tsx
@@ -36,7 +36,7 @@ export function getS3PublicUrl(key: string): string {
 
 async function uploadBase64Image({
   input,
-  maxBytes = 1024 * 300,
+  maxBytes = 1_000_000, // 1MB
   folderName,
 }: {
   input: string,
@@ -85,7 +85,7 @@ export function checkImageString(input: string) {
 
 export async function uploadAndGetUrl(
   input: string | null | undefined,
-  folderName: 'user-profile-images' | 'team-profile-images' | 'team-member-profile-images'
+  folderName: 'user-profile-images' | 'team-profile-images' | 'team-member-profile-images' | 'project-logos'
 ) {
   if (input) {
     const checkResult = checkImageString(input);
@@ -97,7 +97,6 @@ export async function uploadAndGetUrl(
     } else {
       throw new StatusError(StatusError.BadRequest, "Invalid profile image URL");
     }
-
   } else if (input === null) {
     return null;
   } else {

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -38,6 +38,7 @@
     "@tanstack/react-table": "^8.20.5",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.12",
+    "browser-image-compression": "^2.0.2",
     "canvas-confetti": "^1.9.2",
     "clsx": "^2.0.0",
     "dotenv-cli": "^7.3.0",

diff --git a/...ashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx b/...ashboard/src/app/(main)/(protected)/projects/[projectId]/project-settings/page-client.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { InputField } from "@/components/form-fields";
 import { StyledLink } from "@/components/link";
+import { LogoUpload } from "@/components/logo-upload";
 import { FormSettingCard, SettingCard, SettingSwitch, SettingText } from "@/components/settings";
 import { getPublicEnvVar } from '@/lib/env';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionDialog, Alert, Button, Typography } from "@stackframe/stack-ui";
@@ -63,6 +64,32 @@ export default function PageClient() {
         )}
       />
 
+      <SettingCard title="Project Logo">
+        <LogoUpload
+          label="Logo"
+          value={project.logoUrl}
+          onValueChange={async (logoUrl) => {
+            await project.update({ logoUrl });
+          }}
+          description="Upload a logo for your project. Recommended size: 200x200px"
+          type="logo"
+        />
+
+        <LogoUpload
+          label="Full Logo"
+          value={project.fullLogoUrl}
+          onValueChange={async (fullLogoUrl) => {
+            await project.update({ fullLogoUrl });
+          }}
+          description="Upload a full logo with text. Recommended size: At least 100px tall, landscape format"
+          type="full-logo"
+        />
+
+        <Typography variant="secondary" type="footnote">
+          Logo images will be displayed in your application (e.g. login page) and emails. The logo should be a square image, while the full logo can include text and be wider.
+        </Typography>
+      </SettingCard>
+
       <SettingCard
         title="API Key Settings"
         description="Configure which types of API keys are allowed in your project."

diff --git a/apps/dashboard/src/components/logo-upload.tsx b/apps/dashboard/src/components/logo-upload.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';
+import { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';
+import { Button, cn, Typography } from '@stackframe/stack-ui';
+import imageCompression from 'browser-image-compression';
+import { Upload, X } from 'lucide-react';
+import { useState } from 'react';
+
+export async function checkImageUrl(url: string) {
+  try {
+    const res = await fetch(url, { method: 'HEAD' });
+    const buff = await res.blob();
+    return buff.type.startsWith('image/');
+  } catch (e) {
+    return false;
+  }
+}
+
+export function LogoUpload(props: {
+  label: string,
+  value?: string | null,
+  onValueChange: (value: string | null) => void | Promise<void>,
+  description?: string,
+  acceptedTypes?: string[],
+  type: 'logo' | 'full-logo',
+}) {
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  function upload() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = props.acceptedTypes?.join(',') || 'image/*';
+
+    input.onchange = (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+
+      setUploading(true);
+      setError(null);
+
+      runAsynchronouslyWithAlert(async () => {
+        try {
+          // Compress the image first
+          const compressedFile = await imageCompression(file, {
+            maxSizeMB: 1,
+            maxWidthOrHeight: 800,
+            useWebWorker: true,
+            fileType: file.type.startsWith('image/svg') ? file.type : 'image/jpeg',
+          });
+
+          const base64Url = await fileToBase64(compressedFile);
+
+          if (await checkImageUrl(base64Url)) {
+            await props.onValueChange(base64Url);
+            setError(null);
+          } else {
+            setError('Invalid image format');
+          }
+        } catch (err) {
+          setError('Failed to process image');
+          console.error('Logo upload error:', err);
+        } finally {
+          setUploading(false);
+          input.remove();
+        }
+      });
+    };
+
+    input.click();
+  }
+
+  async function remove() {
+    setError(null);
+    await props.onValueChange(null);
+  }
+
+  const logoContainerClasses = props.type === 'full-logo'
+    ? "relative h-16 w-48 rounded border overflow-hidden bg-muted"
+    : "relative h-16 w-16 rounded border overflow-hidden bg-muted";
+
+  const placeholderContainerClasses = props.type === 'full-logo'
+    ? "h-16 w-48 rounded border-2 border-dashed border-muted-foreground/25 flex items-center justify-center bg-muted/50"
+    : "h-16 w-16 rounded border-2 border-dashed border-muted-foreground/25 flex items-center justify-center bg-muted/50";
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Typography variant="secondary" type="label">
+        {props.label}
+      </Typography>
+
+      <div className="flex items-center gap-3">
+        {props.value ? (
+          <div className="flex items-center gap-3">
+            <div className={logoContainerClasses}>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={props.value}
+                alt={props.label}
+                className="h-full w-full object-contain"
+              />
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={remove}
+              disabled={uploading}
+            >
+              <X className="h-4 w-4 mr-2" />
+              Remove
+            </Button>
+          </div>
+        ) : (
+          <div className="flex flex-col items-center gap-4">
+            <div className={cn(placeholderContainerClasses, "cursor-pointer", uploading && "opacity-50 pointer-events-none")} onClick={uploading ? undefined : upload}>
+              <Upload className="h-6 w-6 text-muted-foreground" />
+            </div>
+            {props.description && (
+              <Typography variant="secondary" type="footnote" className="mt-2">
+                {props.description}
+              </Typography>
+            )}
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <Typography variant="destructive" type="footnote">
+          {error}
+        </Typography>
+      )}
+    </div>
+  );
+}
diff --git a/apps/e2e/tests/backend/endpoints/api/v1/integrations/custom/projects/provision.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/integrations/custom/projects/provision.test.ts
@@ -80,8 +80,10 @@ it("should be able to provision a new project if client details are correct", as
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "Project created by an external integration",
         "display_name": "Test project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": false,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }

diff --git a/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/oauth-providers.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/oauth-providers.test.ts
@@ -126,8 +126,10 @@ it("lists oauth providers", async ({ expect }) => {
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "",
         "display_name": "New Project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": false,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }

diff --git a/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/projects/current.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/projects/current.test.ts
@@ -39,8 +39,10 @@ it("get project details", async ({ expect }) => {
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "",
         "display_name": "New Project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": false,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }
@@ -91,8 +93,10 @@ it("creates and updates the basic project information of a project", async ({ ex
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "Updated description",
         "display_name": "Updated Project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": true,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }
@@ -159,8 +163,10 @@ it("creates and updates the email config of a project", async ({ expect }) => {
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "",
         "display_name": "New Project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": false,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }

diff --git a/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/projects/provision.test.ts b/apps/e2e/tests/backend/endpoints/api/v1/integrations/neon/projects/provision.test.ts
@@ -80,8 +80,10 @@ it("should be able to provision a new project if neon client details are correct
         "created_at_millis": <stripped field 'created_at_millis'>,
         "description": "Created with Neon",
         "display_name": "Test project",
+        "full_logo_url": null,
         "id": "<stripped UUID>",
         "is_production_mode": false,
+        "logo_url": null,
       },
       "headers": Headers { <some fields may have been hidden> },
     }