org branding

apps/login/app/(login)/layout.tsx

@@ -1,38 +0,0 @@
-import { BrandingSettings } from "@zitadel/server";
-import React from "react";
-import { getBrandingSettings, server } from "#/lib/zitadel";
-import { Logo } from "#/ui/Logo";
-
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: React.ReactNode;
-  params: any;
-}) {
-  const branding = await getBrandingSettings(server);
-  let partial: Partial<BrandingSettings> | undefined;
-  if (branding) {
-    partial = {
-      lightTheme: branding?.lightTheme,
-      darkTheme: branding?.darkTheme,
-    };
-  }
-  return (
-    <div className="mx-auto flex flex-col items-center space-y-4">
-      <div className="relative">
-        {branding && (
-          <Logo
-            lightSrc={branding.lightTheme?.logoUrl}
-            darkSrc={branding.darkTheme?.logoUrl}
-            height={150}
-            width={150}
-          />
-        )}
-      </div>
-
-      <div className="w-full">{children}</div>
-      <div className="flex flex-row justify-between"></div>
-    </div>
-  );
-}

apps/login/app/(login)/loginname/page.tsx

@@ -1,10 +1,14 @@
 import {
+  getBrandingSettings,
   getLegalAndSupportSettings,
   getLoginSettings,
   server,
 } from "#/lib/zitadel";
+import DynamicTheme from "#/ui/DynamicTheme";
 import { SignInWithIDP } from "#/ui/SignInWithIDP";
+import ThemeWrapper from "#/ui/ThemeWrapper";
 import UsernameForm from "#/ui/UsernameForm";
+import { BrandingSettings } from "@zitadel/server";
 import {
   GetActiveIdentityProvidersResponse,
   IdentityProvider,
@@ -46,7 +50,10 @@ export default async function Page({
     ? `https://${process.env.VERCEL_URL}`
     : "http://localhost:3000";
 
+  const branding = await getBrandingSettings(server, organization);
+
   return (
+    <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>Welcome back!</h1>
         <p className="ztdl-p">Enter your login data.</p>
@@ -67,5 +74,6 @@ export default async function Page({
           ></SignInWithIDP>
         )}
       </div>
+    </DynamicTheme>
   );
 }

apps/login/app/(login)/passkey/login/page.tsx

@@ -1,5 +1,6 @@
-import { getSession, server } from "#/lib/zitadel";
+import { getBrandingSettings, getSession, server } from "#/lib/zitadel";
 import Alert from "#/ui/Alert";
+import DynamicTheme from "#/ui/DynamicTheme";
 import LoginPasskey from "#/ui/LoginPasskey";
 import UserAvatar from "#/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
@@ -29,7 +30,10 @@ export default async function Page({
     });
   }
 
+  const branding = await getBrandingSettings(server, organization);
+
   return (
+    <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{title}</h1>
 
@@ -57,5 +61,6 @@ export default async function Page({
           />
         )}
       </div>
+    </DynamicTheme>
   );
 }

apps/login/app/(login)/password/page.tsx

@@ -1,5 +1,6 @@
-import { getSession, server } from "#/lib/zitadel";
+import { getBrandingSettings, getSession, server } from "#/lib/zitadel";
 import Alert from "#/ui/Alert";
+import DynamicTheme from "#/ui/DynamicTheme";
 import PasswordForm from "#/ui/PasswordForm";
 import UserAvatar from "#/ui/UserAvatar";
 import { getMostRecentCookieWithLoginname } from "#/utils/cookies";
@@ -26,7 +27,10 @@ export default async function Page({
     });
   }
 
+  const branding = await getBrandingSettings(server, organization);
+
   return (
+    <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{sessionFactors?.factors?.user?.displayName ?? "Password"}</h1>
         <p className="ztdl-p mb-6 block">Enter your password.</p>
@@ -56,5 +60,6 @@ export default async function Page({
           isAlternative={alt === "true"}
         />
       </div>
+    </DynamicTheme>
   );
 }

apps/login/app/layout.tsx

@@ -26,15 +26,6 @@ export default async function RootLayout({
   // later only shown with dev mode enabled
   const showNav = process.env.DEBUG === "true";
 
-  const branding = await getBrandingSettings(server);
-  let partial: Partial<BrandingSettings> | undefined;
-  if (branding) {
-    partial = {
-      lightTheme: branding?.lightTheme,
-      darkTheme: branding?.darkTheme,
-    };
-  }
-
   let domain = process.env.ZITADEL_API_URL;
   domain = domain ? domain.replace("https://", "") : "acme.com";
 
@@ -42,9 +33,6 @@ export default async function RootLayout({
     <html lang="en" className={`${lato.className}`} suppressHydrationWarning>
       <head />
       <body>
-        <ThemeWrapper branding={partial}>
-          <ThemeProvider>
-            <LayoutProviders>
         <div
           className={`h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 ${
             showNav
@@ -74,17 +62,11 @@ export default async function RootLayout({
                 </div>
               )}
 
-                    <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 mb-10">
-                      <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
               {children}
             </div>
           </div>
         </div>
-                </div>
-              </div>
-            </LayoutProviders>
-          </ThemeProvider>
-        </ThemeWrapper>
+
         <Analytics />
       </body>
     </html>

apps/login/lib/zitadel.ts

@@ -55,11 +55,15 @@ if (!getServers().length) {
 }
 
 export async function getBrandingSettings(
-  server: ZitadelServer
+  server: ZitadelServer,
+  organization?: string
 ): Promise<BrandingSettings | undefined> {
   const settingsService = settings.getSettings(server);
   return settingsService
-    .getBrandingSettings({}, {})
+    .getBrandingSettings(
+      { ctx: organization ? { orgId: organization } : { instance: true } },
+      {}
+    )
     .then((resp: GetBrandingSettingsResponse) => resp.settings);
 }
 

apps/login/ui/DynamicTheme.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { BrandingSettings } from "@zitadel/server";
+import React from "react";
+import { Logo } from "#/ui/Logo";
+import ThemeWrapper from "./ThemeWrapper";
+import { LayoutProviders } from "./LayoutProviders";
+import ThemeProvider from "./ThemeProvider";
+
+export default async function DynamicTheme({
+  branding,
+  children,
+}: {
+  children: React.ReactNode;
+  branding?: BrandingSettings;
+}) {
+  let partial: Partial<BrandingSettings> | undefined;
+  if (branding) {
+    partial = {
+      lightTheme: branding?.lightTheme,
+      darkTheme: branding?.darkTheme,
+    };
+  }
+  return (
+    <ThemeWrapper branding={partial}>
+      <ThemeProvider>
+        <LayoutProviders>
+          <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 mb-10">
+            <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
+              <div className="mx-auto flex flex-col items-center space-y-4">
+                <div className="relative">
+                  {branding && (
+                    <Logo
+                      lightSrc={branding.lightTheme?.logoUrl}
+                      darkSrc={branding.darkTheme?.logoUrl}
+                      height={150}
+                      width={150}
+                    />
+                  )}
+                </div>
+
+                <div className="w-full">{children}</div>
+                <div className="flex flex-row justify-between"></div>
+              </div>
+            </div>
+          </div>
+        </LayoutProviders>
+      </ThemeProvider>
+    </ThemeWrapper>
+  );
+}