@evenicanpm/storefront-core 2.0.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@evenicanpm/storefront-core",
-	"version": "2.0.1",
+	"version": "2.2.0",
 	"description": "Core module for D365/e4 Headless Storefront",
 	"type": "module",
 	"scripts": {
@@ -32,13 +32,14 @@
 	"peerDependencies": {
 		"@msdyn365-commerce/retail-proxy": "9.50",
 		"@tanstack/react-query": "^5.76.1",
+		"better-auth": "*",
 		"graphql": "^16.11.0",
 		"graphql-request": "^7.1.2",
 		"jsonwebtoken": "^9.0.2",
 		"lodash": "^4.17.21",
 		"next": "^15.2.1",
-		"next-auth": "^4.24.11",
 		"object-mapper": "^6.2.0",
+		"set-cookie-parser": "^2.7.1",
 		"typedoc": "^0.28.9",
 		"typedoc-plugin-merge-modules": "^7.0.0",
 		"typescript": "^5.8.3",
@@ -49,5 +50,5 @@
 			"esbuild": "0.19.11"
 		}
 	},
-	"gitHead": "bbaff05f6f592114ad7a25caeee531e4fa1b14cf"
+	"gitHead": "21ad4044713e4d6625e30c745dd6cd5c7c52b0b3"
 }

package/src/api-manager/datasources/d365/d365-order.datasource.ts

@@ -11,8 +11,8 @@ import {
 	type ICallerContext,
 	SearchLocation,
 } from "@msdyn365-commerce/retail-proxy";
-import type { IContext } from "@msdyn365-commerce/retail-proxy/dist/Interfaces/ICallerContext";
 import { getSalesOrderDetailsByTransactionIdAsync } from "@msdyn365-commerce/retail-proxy/dist/DataActions/SalesOrdersDataActions.g";
+import type { IContext } from "@msdyn365-commerce/retail-proxy/dist/Interfaces/ICallerContext";
 import uniq from "lodash/uniq";
 
 class D365OrderDatasource extends D365DatasourceBase implements OrderApi {

package/src/api-manager/datasources/d365/d365-organization.datasource.ts

@@ -23,7 +23,7 @@ class D365OrganizationDatasource
 	implements OrganizationApi
 {
 	private getRetailContext(context: ICallerContext): IContext {
-		return { callerContext: context };
+		return context as unknown as IContext;
 	}
 
 	async getStoresList(

package/src/api-manager/datasources/d365/d365-product.datasource.ts

@@ -5,6 +5,7 @@ import {
 	testMedia,
 	validateAndSetMediaUrls,
 } from "@evenicanpm/storefront-core/src/api-manager/datasources/d365/utils/product-images-utils";
+import type { CategoriesQuery } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 import type {
 	GetProductByIdInput,
 	GetProductByIdsInput,
@@ -15,7 +16,6 @@ import type {
 	SearchByCriteriaResponse,
 	searchProductsInput,
 } from "@evenicanpm/storefront-core/src/api-manager/schemas/product.schema";
-import type { CategoriesQuery } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 import type { ProductApi } from "@evenicanpm/storefront-core/src/api-manager/types/Datasource";
 import {
 	executeAction,
@@ -58,7 +58,7 @@ const setFullProductImgUrl = async (
 
 class D365ProductDatasource extends D365DatasourceBase implements ProductApi {
 	private getRetailContext(context: ICallerContext): IContext {
-		return { callerContext: context };
+		return context as unknown as IContext;
 	}
 
 	/**

package/src/api-manager/datasources/d365/d365-user.datasource.ts

@@ -53,7 +53,7 @@ function decodeIdTokenClaims(token: string): IdTokenClaims {
 
 class D365UserDatasource extends D365DatasourceBase implements UserApi {
 	private getRetailContext(context: ICallerContext): IContext {
-		return { callerContext: context };
+		return context as unknown as IContext;
 	}
 
 	async updateUser(user: User): Promise<User> {

package/src/api-manager/datasources/d365/utils/get-context-cookie.ts

@@ -1,8 +1,8 @@
 "use server";
 import type { ICallerContext } from "@msdyn365-commerce/retail-proxy";
-import { cookies } from "next/headers";
+import { cookies, headers as getHeaders } from "next/headers";
 import { getLocale } from "next-intl/server";
-import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
+import { auth } from "@/auth/better-auth";
 
 /**
  * Retrieves the D365 context from the "D365Context" cookie, enriches it with the current session token,
@@ -21,14 +21,16 @@ import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
 export async function getContextFromCookie(): Promise<ICallerContext> {
 	const cookieStore = await cookies();
 	const d365Context = cookieStore.get("D365Context");
-	const token = await manuallyRetrieveSessionCookie();
+	const session = await auth.api.getSession({ headers: await getHeaders() });
+	const accessToken =
+		(session?.session as { accessToken?: string })?.accessToken || "";
 	const locale = await getLocale();
 	if (d365Context) {
 		const context = JSON.parse(d365Context.value) as ICallerContext;
 		context.requestContext.operationId = crypto.randomUUID();
 		context.requestContext.user = {
-			isAuthenticated: !!token?.accessToken,
-			token: token?.accessToken ?? "",
+			isAuthenticated: !!accessToken,
+			token: accessToken,
 		};
 		context.requestContext.locale = locale;
 		return context;

package/src/api-manager/datasources/e4/middleware.ts

@@ -0,0 +1,35 @@
+import createGraphQLClient from "@evenicanpm/storefront-core/src/lib/create-graphql-client";
+import type { NextRequest, NextResponse } from "next/server";
+import { parse, splitCookiesString } from "set-cookie-parser";
+
+const setE4SessionCookies = async (
+	response: NextResponse,
+	request: NextRequest,
+) => {
+	const cookiesAlreadySet = request.cookies.get("storefront");
+	if (cookiesAlreadySet) return response;
+
+	const e4Api = await createGraphQLClient();
+
+	const session = await e4Api.e4ReadSessionCustomer();
+
+	const cookieString = session?.headers?.get("set-cookie");
+	if (!cookieString) return response;
+	const splitCookies = parse(
+		splitCookiesString(decodeURIComponent(cookieString)),
+	);
+
+	splitCookies.forEach((cookie) => {
+		response.cookies.set({
+			name: cookie.name,
+			value: cookie.value,
+			httpOnly: true,
+			expires: cookie.expires,
+			secure: true,
+		});
+	});
+
+	return response;
+};
+
+export default setE4SessionCookies;

package/src/api-manager/lib/get-graphql-client.ts

@@ -2,9 +2,8 @@
 
 import { getSdk } from "@evenicanpm/storefront-core/src/api-manager/datasources/e4/graphqlRequestSdk";
 import { GraphQLClient } from "graphql-request";
-import { cookies } from "next/headers";
-import { getServerSession } from "next-auth/next";
-import authOptions from "@/auth/auth-options";
+import { cookies, headers as getHeaders } from "next/headers";
+import { auth } from "@/auth/better-auth";
 
 /**
  * Initializes and returns a cached GraphQL client
@@ -28,9 +27,11 @@ const getGraphQLClient = async (withAuth = false) => {
 	}
 
 	if (withAuth) {
-		const session = await getServerSession(authOptions());
-		if (session?.accessToken) {
-			headers.Authorization = `Bearer ${session.accessToken}`;
+		const session = await auth.api.getSession({ headers: await getHeaders() });
+		const accessToken = (session?.session as { accessToken?: string })
+			?.accessToken;
+		if (accessToken) {
+			headers.Authorization = `Bearer ${accessToken}`;
 		}
 	}
 

package/src/api-manager/services/create-query.ts

@@ -7,14 +7,9 @@ import {
 	useQuery,
 	useSuspenseQuery,
 } from "@tanstack/react-query";
-import { Mutex } from "async-mutex";
-import jwt from "jsonwebtoken";
-import { getSession } from "next-auth/react";
-import { manuallyRetrieveSessionCookie } from "@/auth/next-auth-cookie-manager";
 import signOut from "@/auth/signout";
 
 const QUERY_ROUTE = "/api";
-const mutex = new Mutex();
 
 export type ApiPath<T extends keyof DatasourceApis = keyof DatasourceApis> = [
 	T,
@@ -27,22 +22,6 @@ export type Query<TInput, TOutput> = ReturnType<
 
 // --- Shared helpers (no closure dependencies) ---
 
-const checkTokenExpiry = async (): Promise<boolean> => {
-	let token: string | undefined;
-	if (isServer) {
-		const session = (await manuallyRetrieveSessionCookie()) ?? undefined;
-		token = session?.accessToken;
-	} else {
-		const session = await getSession();
-		token = session?.accessToken;
-	}
-	const decoded = token && (jwt.decode(token) as { exp?: number } | null);
-	const currentTime = Math.floor(Date.now() / 1000);
-	return (
-		!!decoded && typeof decoded.exp === "number" && decoded.exp < currentTime
-	);
-};
-
 const doFetch = async <TInput>(
 	input: TInput | undefined,
 	apiManagerPath: ApiPath,
@@ -60,27 +39,6 @@ const doFetch = async <TInput>(
 	return result.json();
 };
 
-// Acquires a mutex before fetching so concurrent requests don't each trigger
-// a token refresh simultaneously (double-check pattern after acquiring lock).
-const withTokenRefresh = async <TInput>(
-	input: TInput | undefined,
-	apiManagerPath: ApiPath,
-) => {
-	const release = await mutex.acquire();
-	try {
-		const headers = new Headers();
-		if (await checkTokenExpiry()) {
-			headers.append("should-refresh-token", "true");
-		}
-		return await doFetch(input, apiManagerPath, headers);
-	} catch (error) {
-		console.error("Error fetching data:", error);
-		throw new Error("Failed to fetch data");
-	} finally {
-		release();
-	}
-};
-
 // --- Factory ---
 
 export const createQuery = <TInput, TOutput>(
@@ -103,10 +61,7 @@ export const createQuery = <TInput, TOutput>(
 					return getApiFromPath(apiManager, apiManagerPath)(input);
 				}
 			: async () => {
-					const isExpired = await checkTokenExpiry();
-					return isExpired
-						? withTokenRefresh(input, apiManagerPath)
-						: doFetch(input, apiManagerPath);
+					return await doFetch(input, apiManagerPath);
 				},
 		enabled: config?.disableProperties
 			? config.disableProperties.every((prop) => !!input?.[prop])

package/src/auth/better-auth.ts

@@ -0,0 +1,89 @@
+import { betterAuth } from "better-auth";
+import { genericOAuth, customSession } from "better-auth/plugins";
+import { nextCookies } from "better-auth/next-js";
+
+const tenantName = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
+const loginAuthority = `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;
+
+export const auth = betterAuth({
+	secret: process.env.BETTER_AUTH_SECRET,
+	baseURL: process.env.BETTER_AUTH_URL || process.env.NEXTAUTH_URL,
+	session: {
+		cookieCache: {
+			enabled: true,
+			maxAge: 60 * 60, // 1 hour
+			strategy: "jwe",
+			refreshCache: true,
+		},
+	},
+	account: {
+		storeStateStrategy: "cookie",
+		storeAccountCookie: true,
+	},
+	plugins: [
+		genericOAuth({
+			config: [
+				{
+					providerId: "entra-external-id",
+					clientId: process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_ID || "",
+					clientSecret:
+						process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CLIENT_SECRET || "",
+					discoveryUrl: `${loginAuthority}/v2.0/.well-known/openid-configuration`,
+					scopes: (
+						process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_CUSTOM_SCOPES ||
+						"offline_access openid email profile"
+					).split(" "),
+					pkce: true,
+					prompt: "login",
+					getUserInfo: async (tokens) => {
+						// Decode the id_token to get user claims
+						const idToken = tokens.idToken;
+						if (idToken) {
+							const parts = idToken.split(".");
+							if (parts.length === 3) {
+								const payload = JSON.parse(
+									Buffer.from(parts[1], "base64url").toString(),
+								);
+								return {
+									id: payload.oid || payload.sub,
+									name: payload.name,
+									email:
+										payload.email ||
+										payload.preferred_username ||
+										payload.emails?.[0],
+									emailVerified: !!payload.email_verified,
+								};
+							}
+						}
+						return null;
+					},
+				},
+			],
+		}),
+		customSession(async ({ user, session }, ctx) => {
+			let accessToken = "";
+			try {
+				const accounts = await ctx.context.internalAdapter.findAccounts(
+					user.id,
+				);
+				const account = accounts?.find(
+					(a) => a.providerId === "entra-external-id",
+				);
+				// For Entra External ID, use id_token as the access token
+				accessToken = account?.idToken || account?.accessToken || "";
+			} catch {
+				// Account data may not be accessible in all modes
+			}
+			return {
+				user,
+				session: {
+					...session,
+					accessToken,
+				},
+			};
+		}),
+		nextCookies(), // must be last plugin
+	],
+});
+
+export type Session = typeof auth.$Infer.Session;

package/src/auth/signout.ts

@@ -1,42 +1,13 @@
-const fetchCsrfToken = async (): Promise<string> => {
-	try {
-		const response = await fetch("/api/auth/csrf");
-		if (!response.ok) {
-			throw new Error(`Failed to fetch CSRF token: ${response.statusText}`);
-		}
-		const data: { csrfToken: string } = await response.json();
-		return data.csrfToken;
-	} catch (error) {
-		console.error("Error fetching CSRF token:", error);
-		throw error;
-	}
-};
+import { createAuthClient } from "better-auth/react";
+
+const authClient = createAuthClient();
 
 /**
- *  Alternative to signOut from "next-auth/react" - https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/react.tsx
- *  Solution to known next-auth issue - https://github.com/nextauthjs/next-auth/issues/4612
+ * Signs the user out and redirects to the home page.
  */
 const signOut = async (): Promise<void> => {
 	try {
-		const csrfToken = await fetchCsrfToken();
-
-		const formData = new URLSearchParams({
-			csrfToken,
-			json: "true",
-		});
-
-		const response = await fetch("/api/auth/signout", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/x-www-form-urlencoded",
-			},
-			body: formData,
-		});
-
-		if (!response.ok) {
-			throw new Error(`Failed to sign out: ${response.statusText}`);
-		}
-
+		await authClient.signOut();
 		globalThis.location.href = "/";
 	} catch (error) {
 		console.error(error);

package/src/components/header/__tests__/header.test.tsx

@@ -7,8 +7,15 @@ vi.mock("@evenicanpm/storefront-core/src/hooks/use-nextauth-session", () => ({
 	useAppSession: vi.fn(() => ({ session: null })),
 }));
 
-vi.mock("next-auth/react", () => ({
-	useSession: () => ({ data: null, status: "unauthenticated" }),
+vi.mock("better-auth/react", () => ({
+	createAuthClient: () => ({
+		useSession: () => ({ data: null, isPending: false }),
+		signIn: { oauth2: vi.fn() },
+	}),
+}));
+
+vi.mock("better-auth/client/plugins", () => ({
+	genericOAuthClient: () => ({}),
 }));
 
 vi.mock(

package/src/components/header/__tests__/user.test.tsx

@@ -4,6 +4,14 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { NextIntlClientProvider } from "next-intl";
 import { vi } from "vitest";
 
+const { mockMutate, mockHandleRedirectPromise, mockUseSession } = vi.hoisted(
+	() => ({
+		mockMutate: vi.fn().mockResolvedValue({}),
+		mockHandleRedirectPromise: vi.fn().mockResolvedValue(null),
+		mockUseSession: vi.fn(),
+	}),
+);
+
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init",
 	() => ({
@@ -11,10 +19,6 @@ vi.mock(
 	}),
 );
 
-const mockMutate = vi.fn().mockResolvedValue({});
-const mockHandleRedirectPromise = vi.fn().mockResolvedValue(null);
-const mockUseSession = vi.fn();
-
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user",
 	() => ({
@@ -36,9 +40,17 @@ vi.mock("next/navigation", () => ({
 	usePathname: () => "/mock-path",
 }));
 
-vi.doMock("next-auth/react", () => ({
-	useSession: mockUseSession,
-	signIn: vi.fn(),
+vi.mock("better-auth/react", () => {
+	return {
+		createAuthClient: () => ({
+			useSession: mockUseSession,
+			signIn: { oauth2: vi.fn() },
+		}),
+	};
+});
+
+vi.mock("better-auth/client/plugins", () => ({
+	genericOAuthClient: () => ({}),
 }));
 
 vi.mock("@evenicanpm/storefront-core/src/auth/msal", () => ({
@@ -58,7 +70,7 @@ describe.skip("User Component", async () => {
 	it("renders login button when user is not authenticated", () => {
 		mockUseSession.mockReturnValue({
 			data: null,
-			status: "unauthenticated",
+			isPending: false,
 		});
 		render(
 			<NextIntlClientProvider locale="en" messages={messages}>
@@ -75,9 +87,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		render(
@@ -94,10 +106,10 @@ describe.skip("User Component", async () => {
 		expect(userMenuButton).toBeInTheDocument();
 	});
 
-	it("calls signOut when session.error is present", () => {
+	it("calls signOut when session is null after pending", () => {
 		mockUseSession.mockReturnValue({
-			data: { error: "Some auth error" },
-			status: "authenticated",
+			data: null,
+			isPending: false,
 		});
 
 		render(
@@ -113,8 +125,11 @@ describe.skip("User Component", async () => {
 		const mockSignOut = vi.mocked(signOut);
 
 		mockUseSession.mockReturnValue({
-			data: { user: { email: "test@example.com" }, accessToken: "token" },
-			status: "authenticated",
+			data: {
+				user: { email: "test@example.com" },
+				session: { accessToken: "token" },
+			},
+			isPending: false,
 		});
 
 		render(
@@ -139,9 +154,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		vi.mocked(mockHandleRedirectPromise).mockResolvedValue({
@@ -193,9 +208,9 @@ describe.skip("User Component", async () => {
 		mockUseSession.mockReturnValue({
 			data: {
 				user: { email: "test@example.com" },
-				accessToken: "mockAccessToken",
+				session: { accessToken: "mockAccessToken" },
 			},
-			status: "authenticated",
+			isPending: false,
 		});
 
 		vi.mocked(mockHandleRedirectPromise).mockRejectedValue(

package/src/components/header/components/user.tsx

@@ -23,7 +23,13 @@ import {
 } from "@mui/material";
 import { useRouter } from "next/navigation";
 // Auth components
-import { signIn, useSession } from "next-auth/react";
+import { createAuthClient } from "better-auth/react";
+import { genericOAuthClient } from "better-auth/client/plugins";
+
+const authClient = createAuthClient({
+	plugins: [genericOAuthClient()],
+});
+const { useSession: useBetterAuthSession } = authClient;
 import type React from "react";
 import {
 	createContext,
@@ -52,7 +58,7 @@ interface UserContextValue {
 	status: string;
 	menuItems: typeof MENU_ITEMS;
 	handleLogout: () => Promise<void>;
-	signIn: typeof signIn;
+	handleSignIn: () => void;
 	signOut: () => Promise<void>;
 	anchorEl: HTMLButtonElement | null;
 	setAnchorEl: (el: HTMLButtonElement | null) => void;
@@ -66,12 +72,15 @@ interface Props {
 }
 
 const User = ({ children }: Props) => {
-	const { data: session, status } = useSession();
+	const { data: session, isPending } = useBetterAuthSession();
+	const status = isPending
+		? "loading"
+		: session
+			? "authenticated"
+			: "unauthenticated";
 
-	if (session?.error) {
-		// Custom error set in server - /api/auth/[...nextauth]
-		console.warn("Auth Error", session?.error);
-		signOutCustom();
+	if (session === null && !isPending) {
+		// No error handling needed - session is simply null when not authenticated
 	}
 
 	const isAuthenticated = !!session;
@@ -81,12 +90,12 @@ const User = ({ children }: Props) => {
 
 	// session init
 	useEffect(() => {
-		if (isAuthenticated) {
-			const { accessToken, user } = session;
-			const email = user?.email;
-			if (accessToken && email) {
-				sessionInit({ accessToken, email });
-			}
+		if (isAuthenticated && session?.user?.email) {
+			const accessToken =
+				(session.session as { accessToken?: string })?.accessToken || "";
+			sessionInit({ accessToken, email: session.user.email }).catch(
+				console.error,
+			);
 		}
 	}, [isAuthenticated, session, sessionInit]);
 
@@ -124,6 +133,13 @@ const User = ({ children }: Props) => {
 		}
 	};
 
+	const handleSignIn = () => {
+		authClient.signIn.oauth2({
+			providerId: "entra-external-id",
+			callbackURL: "/",
+		});
+	};
+
 	const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 	const open = Boolean(anchorEl);
 
@@ -132,7 +148,7 @@ const User = ({ children }: Props) => {
 		status,
 		menuItems: MENU_ITEMS,
 		handleLogout,
-		signIn,
+		handleSignIn,
 		signOut: signOutCustom,
 		anchorEl,
 		setAnchorEl,
@@ -149,13 +165,13 @@ User.MobileTrigger = function MobileTrigger() {
 	const ctx = useContext(UserContext);
 	const router = useRouter();
 	if (!ctx) return null;
-	const { isAuthenticated, signIn } = ctx;
+	const { isAuthenticated, handleSignIn } = ctx;
 	return (
 		<IconButton
 			aria-label="User Menu"
 			onClick={() => {
 				if (isAuthenticated) router.push("/account/profile");
-				else signIn();
+				else handleSignIn();
 			}}
 		>
 			<MobileUserIcon style={{ fontSize: "1.25rem" }} />
@@ -239,13 +255,13 @@ User.MenuItem = function MenuItem({
 User.LoginButton = function LoginButton() {
 	const ctx = useContext(UserContext);
 	if (!ctx) return null;
-	const { signIn } = ctx;
+	const { handleSignIn } = ctx;
 	return (
 		<Button
 			size="small"
 			variant="contained"
 			color="primary"
-			onClick={() => signIn()}
+			onClick={() => handleSignIn()}
 		>
 			<T path="Account.Menu.btnLogin" />
 		</Button>

package/src/components/wishlist-dialogs/add-to-wishlist/compound/add-to-wishlist-dialog.tsx

@@ -8,9 +8,11 @@ import { AddToWishListDialogContext } from "@evenicanpm/storefront-core/src/comp
 // LOCAL COMPONENTS
 import DialogHeader from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header";
 import { Dialog, DialogContent } from "@mui/material";
-import { useSession } from "next-auth/react";
+import { createAuthClient } from "better-auth/react";
 import type React from "react";
 
+const { useSession } = createAuthClient();
+
 export interface AddToWishlistDialogProps {
 	open: boolean;
 	handleClose: () => void;

package/src/components/wishlist-dialogs/add-to-wishlist/compound/wishlist-dialog-header.tsx

@@ -9,8 +9,10 @@ import { H2 } from "@evenicanpm/storefront-core/src/components/Typography";
 import CreateWishlistButton from "@evenicanpm/storefront-core/src/components/wishlist-dialogs/create-wishlist/create-wishlist-button";
 import { IconButton, styled, type Theme } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useSession } from "next-auth/react";
+import { createAuthClient } from "better-auth/react";
 import { useTranslations } from "next-intl";
+
+const { useSession } = createAuthClient();
 // ICONS
 import { MdFavorite } from "react-icons/md";