feat(core): add org-level custom css support in sign-in-exp API (#7733)

Author: charIeszhao

packages/core/src/libraries/sign-in-experience/index.ts

@@ -131,11 +131,16 @@ export const createSignInExperienceLibrary = (
       return;
     }
     const organization = await trySafe(organizations.findById(organizationId));
-    if (!organization?.branding) {
+    const { branding, customCss } = organization ?? {};
+
+    if (!branding && !customCss) {
       return;
     }
 
-    return { branding: organization.branding };
+    return {
+      ...(branding && { branding }),
+      ...(customCss && { customCss }),
+    };
   };
 
   const findApplicationSignInExperience = async (appId?: string) => {

packages/integration-tests/src/tests/experience/overrides.test.ts

@@ -35,6 +35,7 @@ describe('overrides', () => {
     favicon: 'mock://fake-url-for-omni/favicon.ico',
     darkFavicon: 'mock://fake-url-for-omni/dark-favicon.ico',
   } satisfies Branding);
+  const omniCustomCss = '.logto_main-content { background-color: #f00 !important; }';
 
   const appColor = Object.freeze({
     primaryColor: '#00f',
@@ -52,6 +53,7 @@ describe('overrides', () => {
     logoUrl: 'mock://fake-url-for-org/logo.png',
     darkLogoUrl: 'mock://fake-url-for-org/dark-logo.png',
   } satisfies Branding);
+  const organizationCustomCss = '.logto_main-content { background-color: #0f0 !important; }';
 
   afterEach(async () => {
     await organizationApi.cleanUp();
@@ -64,6 +66,7 @@ describe('overrides', () => {
       privacyPolicyUrl: null,
       color: omniColor,
       branding: omniBranding,
+      customCss: omniCustomCss,
       signUp: { identifiers: [], password: true, verify: false },
       signIn: {
         methods: [
@@ -234,11 +237,42 @@ describe('overrides', () => {
     await deleteApplication(application.id);
   });
 
+  it('should apply omni custom CSS', async () => {
+    const experience = new ExpectExperience(await browser.newPage());
+    await experience.navigateTo(demoAppUrl.href);
+    const element = await experience.toMatchElement('main.logto_main-content');
+    expect(
+      await element.evaluate((element) => window.getComputedStyle(element).backgroundColor)
+    ).toBe('rgb(255, 0, 0)');
+
+    await experience.page.close();
+  });
+
+  it('should apply organization-level custom CSS over omni custom CSS', async () => {
+    const organization = await organizationApi.create({
+      name: 'Sign-in experience override',
+    });
+
+    await organizationApi.update(organization.id, {
+      customCss: organizationCustomCss,
+    });
+
+    const experience = new ExpectExperience(await browser.newPage());
+    await experience.navigateTo(demoAppUrl.href + `?organization_id=${organization.id}`);
+    const element = await experience.toMatchElement('main.logto_main-content');
+    expect(
+      await element.evaluate((element) => window.getComputedStyle(element).backgroundColor)
+    ).toBe('rgb(0, 255, 0)');
+
+    await experience.page.close();
+  });
+
   describe('override fallback', () => {
     beforeAll(async () => {
       await updateSignInExperience({
         color: omniColor,
         branding: pick(omniBranding, 'logoUrl', 'favicon'),
+        customCss: omniCustomCss,
       });
     });
 
@@ -301,4 +335,19 @@ describe('overrides', () => {
     await deleteApplication(application.id);
     await experience.page.close();
   });
+
+  it('should fallback to omni custom CSS when organization-level custom CSS is not provided', async () => {
+    const organization = await organizationApi.create({
+      name: 'Sign-in experience override',
+    });
+
+    const experience = new ExpectExperience(await browser.newPage());
+    await experience.navigateTo(demoAppUrl.href + `?organization_id=${organization.id}`);
+    const element = await experience.toMatchElement('main.logto_main-content');
+    expect(
+      await element.evaluate((element) => window.getComputedStyle(element).backgroundColor)
+    ).toBe('rgb(255, 0, 0)');
+
+    await experience.page.close();
+  });
 });