@evenicanpm/storefront-core 2.3.1 → 2.4.1

package/src/auth/better-auth.ts

@@ -1,19 +1,231 @@
+import type { Auth, BetterAuthOptions } from "better-auth";
 import { betterAuth } from "better-auth";
 import { nextCookies } from "better-auth/next-js";
+import { decryptOAuthToken, setTokenUtil } from "better-auth/oauth2";
 import { customSession, genericOAuth } from "better-auth/plugins";
+import { Pool } from "pg";
+
+function toValidDate(dateLike: unknown): Date | null {
+	if (dateLike instanceof Date) {
+		return Number.isNaN(dateLike.getTime()) ? null : dateLike;
+	}
+
+	if (typeof dateLike === "string" || typeof dateLike === "number") {
+		const date = new Date(dateLike);
+		return Number.isNaN(date.getTime()) ? null : date;
+	}
+
+	return null;
+}
+
+/**
+ * Check if a date/timestamp has already passed (expired).
+ */
+function isPast(dateLike: unknown): boolean {
+	if (!dateLike) return false;
+	const date = toValidDate(dateLike);
+	if (!date) return false;
+	return date.getTime() <= Date.now();
+}
+
+/**
+ * Check if a date/timestamp is within a specified number of milliseconds from now.
+ * Useful for detecting tokens approaching expiry.
+ */
+function isWithinMs(dateLike: unknown, windowMs: number): boolean {
+	if (!dateLike) return false;
+	const date = toValidDate(dateLike);
+	if (!date) return false;
+	return date.getTime() - Date.now() <= windowMs;
+}
+
+/**
+ * Proactive refresh window: refresh access tokens 5 minutes before expiry.
+ * Prevents users from being signed out when their token expires.
+ * Better Auth's default is only ~5 seconds, which is too late.
+ */
+const ACCESS_TOKEN_REFRESH_WINDOW_MS = 5 * 60 * 1000;
+
+type EntraAccount = {
+	id?: string;
+	providerId?: string;
+	idToken?: string | null;
+	accessToken?: string | null;
+	refreshToken?: string | null;
+	accessTokenExpiresAt?: Date | null;
+	refreshTokenExpiresAt?: Date | null;
+	scope?: string | null;
+};
+
+async function decryptStoredOAuthToken(
+	token: string | null | undefined,
+	context: Parameters<typeof decryptOAuthToken>[1],
+): Promise<string> {
+	if (!token) return "";
+
+	try {
+		return await decryptOAuthToken(token, context);
+	} catch {
+		return "";
+	}
+}
+
+async function resolveEntraRefreshProvider(
+	socialProvidersSource: unknown,
+): Promise<{
+	id?: string;
+	refreshAccessToken?: (token: string) => Promise<{
+		accessToken?: string;
+		refreshToken?: string;
+		accessTokenExpiresAt?: Date | null;
+		refreshTokenExpiresAt?: Date | null;
+		idToken?: string;
+		scopes?: string[];
+	} | null>;
+} | null> {
+	const socialProviders =
+		typeof socialProvidersSource === "function"
+			? await socialProvidersSource()
+			: await Promise.resolve(socialProvidersSource);
+
+	if (Array.isArray(socialProviders)) {
+		return (
+			socialProviders.find(
+				(provider: { id?: string }) => provider?.id === "entra-external-id",
+			) || null
+		);
+	}
+
+	if (socialProviders && typeof socialProviders === "object") {
+		return (
+			(
+				socialProviders as Record<
+					string,
+					{
+						id?: string;
+						refreshAccessToken?: (token: string) => Promise<{
+							accessToken?: string;
+							refreshToken?: string;
+							accessTokenExpiresAt?: Date | null;
+							refreshTokenExpiresAt?: Date | null;
+							idToken?: string;
+							scopes?: string[];
+						} | null>;
+					}
+				>
+			)["entra-external-id"] || null
+		);
+	}
+
+	return null;
+}
+
+async function updateStoredEntraTokens(
+	account: EntraAccount,
+	refreshed: {
+		accessToken?: string;
+		refreshToken?: string;
+		accessTokenExpiresAt?: Date | null;
+		refreshTokenExpiresAt?: Date | null;
+		idToken?: string;
+		scopes?: string[];
+	} | null,
+	context: Parameters<typeof decryptOAuthToken>[1] & {
+		internalAdapter: {
+			updateAccount: (
+				accountId: string,
+				data: Record<string, unknown>,
+			) => Promise<unknown>;
+		};
+	},
+): Promise<void> {
+	if (!account.id || !refreshed) return;
+
+	const updatedAccessToken = refreshed.accessToken
+		? await setTokenUtil(refreshed.accessToken, context)
+		: account.accessToken;
+	const updatedRefreshToken = refreshed.refreshToken
+		? await setTokenUtil(refreshed.refreshToken, context)
+		: account.refreshToken;
+
+	await context.internalAdapter.updateAccount(account.id, {
+		accessToken: updatedAccessToken,
+		refreshToken: updatedRefreshToken,
+		accessTokenExpiresAt:
+			refreshed.accessTokenExpiresAt || account.accessTokenExpiresAt,
+		refreshTokenExpiresAt:
+			refreshed.refreshTokenExpiresAt || account.refreshTokenExpiresAt,
+		idToken: refreshed.idToken || account.idToken,
+		scope: refreshed.scopes?.join(",") || account.scope,
+	});
+}
+
+async function refreshEntraTokens(
+	account: EntraAccount,
+	context: Parameters<typeof decryptOAuthToken>[1] & {
+		socialProviders: unknown;
+		internalAdapter: {
+			updateAccount: (
+				accountId: string,
+				data: Record<string, unknown>,
+			) => Promise<unknown>;
+		};
+	},
+): Promise<{
+	accessToken?: string;
+	refreshToken?: string;
+	accessTokenExpiresAt?: Date | null;
+	refreshTokenExpiresAt?: Date | null;
+	idToken?: string;
+	scopes?: string[];
+} | null> {
+	const provider = await resolveEntraRefreshProvider(context.socialProviders);
+	if (!provider?.refreshAccessToken) {
+		console.warn(
+			"[better-auth] proactive refresh skipped: provider not resolvable",
+		);
+		return null;
+	}
+
+	const refreshToken = await decryptOAuthToken(
+		account.refreshToken || "",
+		context,
+	);
+	const refreshed = await provider.refreshAccessToken(refreshToken);
+	await updateStoredEntraTokens(account, refreshed, context);
+	return refreshed;
+}
 
 const tenantName = process.env.NEXT_PUBLIC_ENTRA_EXTERNAL_ID_TENANT_NAME || "";
 const loginAuthority = `https://${tenantName}.ciamlogin.com/${tenantName}.onmicrosoft.com`;
 
-export const auth = betterAuth({
+const globalForAuthDb = globalThis as typeof globalThis & {
+	storefrontAuthDbPool?: Pool;
+};
+
+const authDbPool =
+	globalForAuthDb.storefrontAuthDbPool ||
+	new Pool({
+		connectionString: process.env.AUTH_DB_URL,
+	});
+
+if (process.env.NODE_ENV !== "production") {
+	globalForAuthDb.storefrontAuthDbPool = authDbPool;
+}
+
+const authConfig = {
 	secret: process.env.BETTER_AUTH_SECRET,
-	baseURL: process.env.BETTER_AUTH_URL || process.env.NEXTAUTH_URL,
+	baseURL: process.env.BETTER_AUTH_URL,
+	database: authDbPool,
+	// Required for native screen login: Entra ROPC validates the password,
+	// Better Auth uses email/password internally only to create a session.
+	// The entra-external-id account with real OAuth tokens is upserted separately.
+	emailAndPassword: {
+		enabled: true,
+	},
 	session: {
 		cookieCache: {
-			enabled: true,
-			maxAge: 60 * 60, // 1 hour
-			strategy: "jwe",
-			refreshCache: true,
+			enabled: false,
 		},
 	},
 	account: {
@@ -24,10 +236,10 @@ export const auth = betterAuth({
 		genericOAuth({
 			config: [
 				{
+					// Entra External ID is configured as public client.
+					// No client secret is sent during refresh (Entra rejects it).
 					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 ||
@@ -60,30 +272,85 @@ export const auth = betterAuth({
 				},
 			],
 		}),
+		// Custom session plugin that:
+		// 1. Reads Entra account tokens from public.account table
+		// 2. Attempts proactive refresh 5 minutes before expiry
+		// 3. Prevents unexpected signout by keeping current token until truly expired
 		customSession(async ({ user, session }, ctx) => {
 			let accessToken = "";
+			let graphAccessToken = "";
 			try {
-				const accounts = await ctx.context.internalAdapter.findAccounts(
+				const accounts = (await ctx.context.internalAdapter.findAccounts(
 					user.id,
-				);
+				)) as EntraAccount[] | undefined;
 				const account = accounts?.find(
-					(a) => a.providerId === "entra-external-id",
+					(storedAccount) => storedAccount.providerId === "entra-external-id",
 				);
-				// For Entra External ID, use id_token as the access token
-				accessToken = account?.idToken || account?.accessToken || "";
+				if (!account) {
+					return {
+						user,
+						session: {
+							...session,
+							accessToken,
+							graphAccessToken,
+						},
+					};
+				}
+
+				const tokenExpired = isPast(account.accessTokenExpiresAt);
+				const shouldRefreshUpfront = isWithinMs(
+					account.accessTokenExpiresAt,
+					ACCESS_TOKEN_REFRESH_WINDOW_MS,
+				);
+				const currentIdToken = account.idToken || "";
+				const currentGraphToken = await decryptStoredOAuthToken(
+					account.accessToken,
+					ctx.context,
+				);
+
+				// Keep ID token for D365 and access token for Graph while valid.
+				accessToken = tokenExpired ? "" : currentIdToken;
+				graphAccessToken = tokenExpired ? "" : currentGraphToken;
+
+				// Attempt proactive refresh if token is within 5-minute window and a refresh token exists.
+				// This ensures users stay signed in without waiting until token expires.
+				if (account.refreshToken && shouldRefreshUpfront) {
+					try {
+						const refreshed = await refreshEntraTokens(account, ctx.context);
+						if (refreshed) {
+							// Keep ID token for D365 and access token for Graph APIs.
+							accessToken = refreshed.idToken || account.idToken || accessToken;
+							graphAccessToken = refreshed.accessToken || graphAccessToken;
+						}
+					} catch (error) {
+						// Preserve the current token and avoid signing out early on refresh failures.
+						console.warn(
+							"[better-auth] proactive refresh failed for entra-external-id",
+							error,
+						);
+					}
+				}
 			} catch {
-				// Account data may not be accessible in all modes
+				// Account data may not be accessible in all modes.
+				// Keep existing empty default if we cannot read account data.
 			}
 			return {
 				user,
 				session: {
 					...session,
 					accessToken,
+					graphAccessToken,
 				},
 			};
 		}),
 		nextCookies(), // must be last plugin
 	],
-});
+} satisfies Parameters<typeof betterAuth>[0];
+
+const auth: Auth<BetterAuthOptions> = betterAuth(
+	authConfig as BetterAuthOptions,
+);
+
+export { auth };
 
 export type Session = typeof auth.$Infer.Session;

package/src/cms/blocks/block-manager.tsx

@@ -41,7 +41,7 @@ const componentMap = {
 const getBlockComponent: <B extends Block>(
 	block: B,
 	idx: number,
-) => JSX.Element | null = (block: Block) => {
+) => React.JSX.Element | null = (block: Block) => {
 	const Component = componentMap[
 		block.__component as keyof typeof componentMap
 	] as React.ComponentType<Block> | undefined;

package/src/cms/blocks/components/product-section-fullwidth/index.tsx

@@ -31,7 +31,9 @@ export default async function ProductSectionFullWidth(
 
 	const skus = data?.ProductWrapper?.map((element) => element?.product?.sku);
 
-	const e4Products = await getProductByIds.fetchData(queryClient, { id: skus });
+	const e4Products = (await getProductByIds.fetchData(queryClient, {
+		id: skus,
+	})) as SimpleProduct[] | undefined;
 
 	if (!e4Products?.length) {
 		return null;

package/src/cms/endpoints.ts

@@ -1,5 +1,3 @@
-import type { Formats } from "@/cms/interfaces/product-data";
-
 const apiKeys = {
 	pages: "/cms/pages",
 	blogs: "/cms/blogs",
@@ -42,6 +40,13 @@ export const extendCmsEndpoints = (
 
 export type sizes = "small" | "medium" | "large" | "thumbnail";
 
+interface Formats {
+	small?: { url: string };
+	medium?: { url: string };
+	large?: { url: string };
+	thumbnail?: { url: string };
+}
+
 /**
  * @param formats formats array from CMS data
  * @param size size of the image

package/src/components/BazaarMenu.tsx

@@ -34,7 +34,7 @@ export default function BazaarMenu({
 			{handler ? handler(handleClick) : null}
 
 			<Menu
-				elevation={0}
+				slotProps={{ paper: { elevation: 0 } }}
 				anchorEl={anchorEl}
 				onClose={handleClose}
 				open={open ?? Boolean(anchorEl)}

package/src/components/Typography.tsx

@@ -6,9 +6,11 @@ import clsx from "clsx";
 
 // ==============================================================
 type Ellipsis = { ellipsis: number };
-export interface EllipsisProps extends BoxProps {
+export type EllipsisProps = BoxProps & {
 	ellipsis?: boolean;
-}
+	children?: React.ReactNode;
+	className?: string;
+};
 // ==============================================================
 
 const StyledBox = styled(Box, {

package/src/components/carousel-cards/carousel-card-1/CarouselCard1.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import CarouselCard1 from "./index";
 
 const meta: Meta<typeof CarouselCard1> = {

package/src/components/categories/category-list/category-list.tsx

@@ -40,7 +40,12 @@ const CategoryList = ({
 	children,
 }: RootProps) => {
 	const { data: fetchedCategories } = getCategories.useSuspenseData();
-	const cats = categories ?? fetchedCategories ?? [];
+	let cats: typeof categories = [];
+	if (Array.isArray(categories)) {
+		cats = categories;
+	} else if (Array.isArray(fetchedCategories)) {
+		cats = fetchedCategories;
+	}
 
 	const megaMenuRenderers: Record<
 		MegaMenuType,
@@ -69,7 +74,8 @@ CategoryList.Item = ({ category }: ItemProps) => {
 	if (!ctx) return null;
 	const { megaMenuRenderers } = ctx;
 	const { RecordId, Name, Url, Children } = category;
-	const hasChildren = !!Children?.length;
+	const childCategories = Array.isArray(Children) ? Children : [];
+	const hasChildren = childCategories.length > 0;
 
 	// Sub menu can also be "categories/mega-menu/mega-menu-1" or "mega-menu-2",
 	// Mega menus have submenu items listed in columns and also have option to show banners(offers).
@@ -83,9 +89,7 @@ CategoryList.Item = ({ category }: ItemProps) => {
 			title={Name ?? ""}
 			caret={hasChildren}
 			render={
-				Children && Children.length > 0
-					? megaMenuRenderers[menuType]?.(Children)
-					: null
+				hasChildren ? megaMenuRenderers[menuType]?.(childCategories) : null
 			}
 		/>
 	);

package/src/components/categories/category-menu.tsx

@@ -24,7 +24,7 @@ const Wrapper = styled("div", {
 type Props = {
 	render: (
 		handler: (e: React.MouseEvent<HTMLButtonElement>) => void,
-	) => JSX.Element;
+	) => React.ReactElement;
 };
 
 // CategoryMenu is acting purely as a configuration/wiring component,

package/src/components/countries-input.tsx

@@ -57,6 +57,10 @@ export default function CountryInput({
 			fullWidth
 			value={selectedCountry}
 			options={countries}
+			getOptionKey={(option) => option.CountryRegionId}
+			isOptionEqualToValue={(option, value) =>
+				option.CountryRegionId === value?.CountryRegionId
+			}
 			onChange={(_event, newValue) => {
 				setSelectedCountry(newValue);
 			}}

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

@@ -1,16 +1,13 @@
 import signOut from "@evenicanpm/storefront-core/src/auth/signout";
 import Header from "@evenicanpm/storefront-core/src/components/header/header";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen } 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(),
-	}),
-);
+const { mockUseSession } = vi.hoisted(() => ({
+	mockMutate: vi.fn().mockResolvedValue({}),
+	mockUseSession: vi.fn(),
+}));
 
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-init",
@@ -19,13 +16,6 @@ vi.mock(
 	}),
 );
 
-vi.mock(
-	"@evenicanpm/storefront-core/src/api-manager/services/user/mutations/update-user",
-	() => ({
-		default: () => ({ mutateAsync: mockMutate }),
-	}),
-);
-
 vi.mock(
 	"@evenicanpm/storefront-core/src/api-manager/services/session/mutations/session-logout",
 	() => ({
@@ -53,13 +43,6 @@ vi.mock("better-auth/client/plugins", () => ({
 	genericOAuthClient: () => ({}),
 }));
 
-vi.mock("@evenicanpm/storefront-core/src/auth/msal", () => ({
-	getMsalInstance: () => ({
-		handleRedirectPromise: mockHandleRedirectPromise,
-	}),
-	initializeMsal: vi.fn().mockResolvedValue(undefined),
-}));
-
 vi.mock("@evenicanpm/storefront-core/src/auth/signout", () => ({
 	default: vi.fn(),
 }));
@@ -149,89 +132,4 @@ describe.skip("User Component", async () => {
 		fireEvent.click(logoutButton);
 		expect(mockSignOut).toHaveBeenCalled();
 	});
-
-	it("handles MSAL redirect and updates user on success", async () => {
-		mockUseSession.mockReturnValue({
-			data: {
-				user: { email: "test@example.com" },
-				session: { accessToken: "mockAccessToken" },
-			},
-			isPending: false,
-		});
-
-		vi.mocked(mockHandleRedirectPromise).mockResolvedValue({
-			authority: "https://login.microsoftonline.com/some_authority",
-			uniqueId: "some_unique_id",
-			tenantId: "some_tenant_id",
-			tokenType: "id_token",
-			correlationId: "some_correlation_id",
-			idToken: "some_id_token",
-			accessToken: "some_access_token",
-			fromCache: false,
-			expiresOn: new Date(Date.now() + 3600000),
-			scopes: ["some_scope"],
-			account: {
-				homeAccountId: "some_home_account_id",
-				username: "some_username",
-				localAccountId: "some_local_account_id",
-				environment: "some_environment",
-				tenantId: "some_tenant_id",
-			},
-			idTokenClaims: {
-				given_name: "John",
-				family_name: "Doe",
-			},
-		});
-
-		render(
-			<NextIntlClientProvider locale="en" messages={messages}>
-				<Header>
-					<Header.User />
-				</Header>
-			</NextIntlClientProvider>,
-		);
-
-		await waitFor(() =>
-			expect(mockMutate).toHaveBeenCalledWith({
-				AccountNumber: "",
-				FirstName: "John",
-				LastName: "Doe",
-			}),
-		);
-	});
-
-	it("handles error in MSAL redirect", async () => {
-		const consoleErrorSpy = vi
-			.spyOn(console, "error")
-			.mockImplementation(vi.fn());
-
-		mockUseSession.mockReturnValue({
-			data: {
-				user: { email: "test@example.com" },
-				session: { accessToken: "mockAccessToken" },
-			},
-			isPending: false,
-		});
-
-		vi.mocked(mockHandleRedirectPromise).mockRejectedValue(
-			new Error("MSAL Error"),
-		);
-
-		render(
-			<NextIntlClientProvider locale="en" messages={messages}>
-				<Header>
-					<Header.User />
-				</Header>
-			</NextIntlClientProvider>,
-		);
-
-		await waitFor(() =>
-			expect(consoleErrorSpy).toHaveBeenCalledWith(
-				"MSAL redirect error:",
-				expect.any(Error),
-			),
-		);
-
-		consoleErrorSpy.mockRestore();
-	});
 });