fix: issue with color scheme in layout (#1168)

* fix: issue with color scheme in layout

* test: add and adjust unit tests for sign-in-callback

apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx

@@ -1,12 +1,14 @@
 "use client";
 
-import { useState } from "react";
 import type { PropsWithChildren } from "react";
+import { useState } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
 import { createTheme, isMantineColorScheme, MantineProvider } from "@mantine/core";
+import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
+import { parseCookies, setClientCookie } from "@homarr/common";
 
 export const CustomMantineProvider = ({ children }: PropsWithChildren) => {
   const manager = useColorSchemeManager();
@@ -50,7 +52,8 @@ function useColorSchemeManager(): MantineColorSchemeManager {
       }
 
       try {
-        return (window.localStorage.getItem(key) as MantineColorScheme | undefined) ?? defaultValue;
+        const cookies = parseCookies(document.cookie);
+        return (cookies[key] as MantineColorScheme | undefined) ?? defaultValue;
       } catch {
         return defaultValue;
       }
@@ -61,6 +64,7 @@ function useColorSchemeManager(): MantineColorSchemeManager {
         if (session) {
           mutateColorScheme({ colorScheme: value });
         }
+        setClientCookie(key, value, { expires: dayjs().add(1, "year").toDate() });
         window.localStorage.setItem(key, value);
       } catch (error) {
         console.warn("[@mantine/core] Local storage color scheme manager was unable to save color scheme.", error);

apps/nextjs/src/app/[locale]/layout.tsx

@@ -6,6 +6,8 @@ import "@homarr/spotlight/styles.css";
 import "@homarr/ui/styles.css";
 import "~/styles/scroll-area.scss";
 
+import { cookies } from "next/headers";
+
 import { env } from "@homarr/auth/env.mjs";
 import { auth } from "@homarr/auth/next";
 import { ModalProvider } from "@homarr/modals";
@@ -53,7 +55,7 @@ export const viewport: Viewport = {
 
 export default async function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
   const session = await auth();
-  const colorScheme = session?.user.colorScheme;
+  const colorScheme = cookies().get("homarr-color-scheme")?.value ?? "light";
 
   const StackedProvider = composeWrappers([
     (innerProps) => {

packages/auth/callbacks.ts

@@ -1,5 +1,6 @@
 import { cookies } from "next/headers";
 import type { Adapter } from "@auth/core/adapters";
+import dayjs from "dayjs";
 import type { NextAuthConfig } from "next-auth";
 
 import type { Database } from "@homarr/db";
@@ -52,12 +53,12 @@ export const createSessionCallback = (db: Database): NextAuthCallbackOf<"session
 };
 
 export const createSignInCallback =
-  (adapter: Adapter, isCredentialsRequest: boolean): NextAuthCallbackOf<"signIn"> =>
+  (adapter: Adapter, db: Database, isCredentialsRequest: boolean): NextAuthCallbackOf<"signIn"> =>
   async ({ user }) => {
     if (!isCredentialsRequest) return true;
 
     // https://github.com/nextauthjs/next-auth/issues/6106
-    if (!adapter.createSession) {
+    if (!adapter.createSession || !user.id) {
       return false;
     }
 
@@ -66,8 +67,7 @@ export const createSignInCallback =
 
     await adapter.createSession({
       sessionToken,
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      userId: user.id,
-      userId: user.id!,
       expires: sessionExpires,
     });
 
@@ -79,6 +79,21 @@ export const createSignInCallback =
       secure: true,
     });
 
+    const dbUser = await db.query.users.findFirst({
+      where: eq(users.id, user.id),
+      columns: {
+        colorScheme: true,
+      },
+    });
+
+    if (!dbUser) return false;
+
+    // We use a cookie as localStorage is not shared with server (otherwise flickering would occur)
+    cookies().set("homarr-color-scheme", dbUser.colorScheme, {
+      path: "/",
+      expires: dayjs().add(1, "year").toDate(),
+    });
+
     return true;
   };
 

packages/auth/configuration.ts

@@ -38,7 +38,7 @@ export const createConfiguration = (isCredentialsRequest: boolean, headers: Read
     ]),
     callbacks: {
       session: createSessionCallback(db),
-      signIn: createSignInCallback(adapter, isCredentialsRequest),
+      signIn: createSignInCallback(adapter, db, isCredentialsRequest),
     },
     redirectProxyUrl: createRedirectUri(headers, "/api/auth"),
     secret: "secret-is-not-defined-yet", // TODO: This should be added later

packages/auth/test/callbacks.spec.ts

@@ -5,7 +5,7 @@ import { cookies } from "next/headers";
 import type { Adapter, AdapterUser } from "@auth/core/adapters";
 import type { Account } from "next-auth";
 import type { JWT } from "next-auth/jwt";
-import { describe, expect, it, test, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
 import { groupMembers, groupPermissions, groups, users } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
@@ -15,6 +15,7 @@ import { createSessionCallback, createSignInCallback, getCurrentUserPermissionsA
 
 describe("getCurrentUserPermissions", () => {
   test("should return empty permissions when non existing user requested", async () => {
+    // Arrange
     const db = createDb();
 
     await db.insert(groups).values({
@@ -30,11 +31,16 @@ describe("getCurrentUserPermissions", () => {
     });
 
     const userId = "1";
+
+    // Act
     const result = await getCurrentUserPermissionsAsync(db, userId);
+
+    // Assert
     expect(result).toEqual([]);
   });
 
   test("should return empty permissions when user has no groups", async () => {
+    // Arrange
     const db = createDb();
     const userId = "1";
 
@@ -50,11 +56,15 @@ describe("getCurrentUserPermissions", () => {
       id: userId,
     });
 
+    // Act
     const result = await getCurrentUserPermissionsAsync(db, userId);
+
+    // Assert
     expect(result).toEqual([]);
   });
 
   test("should return permissions for user", async () => {
+    // Arrange
     const db = createDb();
     const getPermissionsWithChildrenMock = vi
       .spyOn(definitions, "getPermissionsWithChildren")
@@ -77,14 +87,18 @@ describe("getCurrentUserPermissions", () => {
       permission: "admin",
     });
 
+    // Act
     const result = await getCurrentUserPermissionsAsync(db, mockId);
+
+    // Assert
     expect(result).toEqual(["board-create"]);
     expect(getPermissionsWithChildrenMock).toHaveBeenCalledWith(["admin"]);
   });
 });
 
 describe("session callback", () => {
-  it("should add id and name to session user", async () => {
+  test("should add id and name to session user", async () => {
+    // Arrange
     const user: AdapterUser = {
       id: "id",
       name: "name",
@@ -94,6 +108,8 @@ describe("session callback", () => {
     const token: JWT = {};
     const db = createDb();
     const callback = createSessionCallback(db);
+
+    // Act
     const result = await callback({
       session: {
         user: {
@@ -112,6 +128,8 @@ describe("session callback", () => {
       trigger: "update",
       newSession: {},
     });
+
+    // Assert
     expect(result.user).toBeDefined();
     expect(result.user!.id).toEqual(user.id);
     expect(result.user!.name).toEqual(user.name);
@@ -169,37 +187,56 @@ vi.mock("next/headers", async (importOriginal) => {
 });
 
 describe("createSignInCallback", () => {
-  it("should return true if not credentials request", async () => {
+  test("should return true if not credentials request and set colorScheme & sessionToken cookie", async () => {
+    // Arrange
     const isCredentialsRequest = false;
-    const signInCallback = createSignInCallback(createAdapter(), isCredentialsRequest);
+    const db = await prepareDbForSigninAsync("1");
+    const signInCallback = createSignInCallback(createAdapter(), db, isCredentialsRequest);
+
+    // Act
     const result = await signInCallback({
       user: { id: "1", emailVerified: new Date("2023-01-13") },
       account: {} as Account,
     });
+
+    // Assert
     expect(result).toBe(true);
   });
 
-  it("should return false if no adapter.createSession", async () => {
+  test("should return false if no adapter.createSession", async () => {
+    // Arrange
     const isCredentialsRequest = true;
+    const db = await prepareDbForSigninAsync("1");
     const signInCallback = createSignInCallback(
       // https://github.com/nextauthjs/next-auth/issues/6106
       { createSession: undefined } as unknown as Adapter,
+      db,
       isCredentialsRequest,
     );
+
+    // Act
     const result = await signInCallback({
       user: { id: "1", emailVerified: new Date("2023-01-13") },
       account: {} as Account,
     });
+
+    // Assert
     expect(result).toBe(false);
   });
 
   test("should call adapter.createSession with correct input", async () => {
+    // Arrange
     const adapter = createAdapter();
     const isCredentialsRequest = true;
-    const signInCallback = createSignInCallback(adapter, isCredentialsRequest);
+    const db = await prepareDbForSigninAsync("1");
+    const signInCallback = createSignInCallback(adapter, db, isCredentialsRequest);
     const user = { id: "1", emailVerified: new Date("2023-01-13") };
     const account = {} as Account;
+
+    // Act
     await signInCallback({ user, account });
+
+    // Assert
     expect(adapter.createSession).toHaveBeenCalledWith({
       sessionToken: mockSessionToken,
       userId: user.id,
@@ -213,4 +250,52 @@ describe("createSignInCallback", () => {
       secure: true,
     });
   });
+
+  test("should set colorScheme from db as cookie", async () => {
+    // Arrange
+    const isCredentialsRequest = false;
+    const db = await prepareDbForSigninAsync("1");
+    const signInCallback = createSignInCallback(createAdapter(), db, isCredentialsRequest);
+
+    // Act
+    const result = await signInCallback({
+      user: { id: "1", emailVerified: new Date("2023-01-13") },
+      account: {} as Account,
+    });
+
+    // Assert
+    expect(result).toBe(true);
+    expect(cookies().set).toHaveBeenCalledWith(
+      "homarr-color-scheme",
+      "dark",
+      expect.objectContaining({
+        path: "/",
+      }),
+    );
+  });
+
+  test("should return false if user not found in db", async () => {
+    // Arrange
+    const isCredentialsRequest = true;
+    const db = await prepareDbForSigninAsync("other-id");
+    const signInCallback = createSignInCallback(createAdapter(), db, isCredentialsRequest);
+
+    // Act
+    const result = await signInCallback({
+      user: { id: "1", emailVerified: new Date("2023-01-13") },
+      account: {} as Account,
+    });
+
+    // Assert
+    expect(result).toBe(false);
+  });
 });
+
+const prepareDbForSigninAsync = async (userId: string) => {
+  const db = createDb();
+  await db.insert(users).values({
+    id: userId,
+    colorScheme: "dark",
+  });
+  return db;
+};

packages/common/src/cookie.ts

@@ -1,3 +1,6 @@
+import type { CookieSerializeOptions } from "cookie";
+import { serialize } from "cookie";
+
 export function parseCookies(cookieString: string) {
   const list: Record<string, string> = {};
   const cookieHeader = cookieString;
@@ -15,3 +18,7 @@ export function parseCookies(cookieString: string) {
 
   return list;
 }
+
+export function setClientCookie(name: string, value: string, options: CookieSerializeOptions = {}) {
+  document.cookie = serialize(name, value, options);
+}