Add Authorization header to Reader Revenue /header request

dotcom-rendering/.storybook/main.ts

@@ -103,24 +103,38 @@ const webpackConfig = (config: Configuration) => {
 	const rules = config.module?.rules ?? [];
 
 	config.resolve ??= {};
-	config.resolve.alias ??= {};
 
-	// Mock JSDOM for storybook - it relies on native node.js packages
-	// Allows us to use enhancers in stories for better testing of components & full articles
-	config.resolve.alias['jsdom$'] = path.resolve(
-		__dirname,
-		'./mocks/jsdom.ts',
-	);
+	config.resolve.alias = {
+		...config.resolve?.alias,
 
-	// log4js tries to call "fs" in storybook -- we can ignore it
-	config.resolve.alias[
-		`${path.resolve(__dirname, '../src/server/lib/logging')}$`
-	] = path.resolve(__dirname, './mocks/log4js.ts');
+		Buffer: 'buffer',
+		react: 'react',
+		'react-dom': 'react-dom',
 
-	// Mock BridgetApi for storybook
-	config.resolve.alias[
-		`${path.resolve(__dirname, '../src/lib/bridgetApi')}$`
-	] = path.resolve(__dirname, './mocks/bridgetApi.ts');
+		// Mock JSDOM for storybook - it relies on native node.js packages
+		// Allows us to use enhancers in stories for better testing of components & full articles
+		jsdom$: path.resolve(__dirname, './mocks/jsdom.ts'),
+
+		// log4js tries to call "fs" in storybook -- we can ignore it
+		[`${path.resolve(__dirname, '../src/server/lib/logging')}$`]:
+			path.resolve(__dirname, './mocks/log4js.ts'),
+
+		// Mock BridgetApi for storybook
+		[`${path.resolve(__dirname, '../src/lib/bridgetApi')}$`]: path.resolve(
+			__dirname,
+			'./mocks/bridgetApi.ts',
+		),
+
+		// Mock contributions API so getAuthHeaders does not hang on consent state in Storybook
+		[`${path.resolve(__dirname, '../src/lib/contributions')}$`]:
+			path.resolve(__dirname, './mocks/contributions.ts'),
+
+		// Mock identity auth frontend to prevent Storybook components from hanging in Pending
+		'@guardian/identity-auth-frontend': path.resolve(
+			__dirname,
+			'./mocks/identityAuthFrontend.ts',
+		),
+	};
 
 	const webpackLoaders = getLoaders('client.web');
 
@@ -149,12 +163,7 @@ const webpackConfig = (config: Configuration) => {
 	config.resolve.modules = [
 		...((config && config.resolve && config.resolve.modules) || []),
 	];
-	config.resolve.alias = {
-		...config.resolve.alias,
-		Buffer: 'buffer',
-		react: 'react',
-		'react-dom': 'react-dom',
-	};
+
 	return config;
 };
 

dotcom-rendering/.storybook/mocks/contributions.ts

@@ -0,0 +1,29 @@
+/**
+ * Mock for use in Storybook
+ * Avoids circular dependencies from the Webpack alias by explicitly mocking
+ * only the functions required by the components.
+ */
+
+export const getAuthHeaders = (): Promise<HeadersInit | undefined> => {
+	console.log('[Storybook Mock] getAuthHeaders returning undefined');
+	return Promise.resolve(undefined);
+};
+
+export const getPurchaseInfo = (): any => undefined;
+
+export const shouldHideSupportMessaging = (): boolean | 'Pending' => false;
+
+// Additional missing exports required by other components in Storybook
+export const useHasOptedOutOfArticleCount = (): boolean | 'Pending' => false;
+export const hasOptedOutOfArticleCount = async (): Promise<boolean> => false;
+export const hasOptedOutOfWeeklyArticleCount = async (): Promise<boolean> =>
+	false;
+export const hasCmpConsentForWeeklyArticleCount = async (): Promise<boolean> =>
+	false;
+export const recentlyClosedBanner = (): boolean => false;
+export const withinLocalNoBannerCachePeriod = (): boolean => false;
+export const setLocalNoBannerCachePeriod = (): void => {};
+export const getContributionsServiceUrl = (): string => '';
+export const hasCmpConsentForBrowserId = async (): Promise<boolean> => false;
+export const SUPPORT_ONE_OFF_CONTRIBUTION_COOKIE =
+	'gu.contributions.contrib-timestamp';

dotcom-rendering/.storybook/mocks/identityAuthFrontend.ts

@@ -0,0 +1,8 @@
+export const getIdentityAuth = () => ({
+	isSignedInWithAuthState: () =>
+		Promise.resolve({
+			isAuthenticated: false,
+			accessToken: undefined,
+			idToken: undefined,
+		}),
+});

dotcom-rendering/src/components/TopBarSupport.importable.tsx

@@ -5,7 +5,6 @@
 import { css } from '@emotion/react';
 import { getCookie, isUndefined } from '@guardian/libs';
 import type { ComponentEvent } from '@guardian/ophan-tracker-js';
-import { getHeader } from '@guardian/support-dotcom-components';
 import type {
 	HeaderPayload,
 	ModuleData,
@@ -18,11 +17,14 @@ import type {
 import { useEffect, useState } from 'react';
 import { submitComponentEvent } from '../client/ophan/ophan';
 import {
+	getAuthHeaders,
 	getPurchaseInfo,
 	shouldHideSupportMessaging,
 } from '../lib/contributions';
+import { getOptionsHeaders } from '../lib/identity';
+import { getHeader } from '../lib/sdcRequests';
 import { useBetaAB } from '../lib/useAB';
-import { useIsSignedIn } from '../lib/useAuthStatus';
+import { useAuthStatus, useIsSignedIn } from '../lib/useAuthStatus';
 import { useCountryCode } from '../lib/useCountryCode';
 import { usePageViewId } from '../lib/usePageViewId';
 import { useConfig } from './ConfigContext';
@@ -56,18 +58,31 @@ const ReaderRevenueLinksRemote = ({
 		useState<ModuleData<HeaderProps> | null>(null);
 	const [SupportHeader, setSupportHeader] =
 		useState<React.ElementType<HeaderProps> | null>(null);
+	const authStatus = useAuthStatus();
 	const isSignedIn = useIsSignedIn();
 
 	const { renderingTarget } = useConfig();
 	const abTests = useBetaAB();
 
+	const reportError = (error: unknown, context: string) => {
+		const msg = `Error importing RR header links for ${context}: ${String(
+			error,
+		)}`;
+		console.log(msg);
+		window.guardian.modules.sentry.reportError(
+			new Error(msg),
+			'rr-header-links',
+		);
+	};
+
 	useEffect((): void => {
 		if (isUndefined(countryCode) || isSignedIn === 'Pending') {
 			return;
 		}
 
 		const hideSupportMessagingForUser =
 			shouldHideSupportMessaging(isSignedIn);
+
 		if (hideSupportMessagingForUser === 'Pending') {
 			// We don't yet know the user's supporter status
 			return;
@@ -90,7 +105,36 @@ const ReaderRevenueLinksRemote = ({
 			},
 		};
 
-		getHeader(contributionsServiceUrl, requestData)
+		const fallbackHeaders =
+			authStatus.kind === 'SignedIn'
+				? getOptionsHeaders(authStatus).headers
+				: undefined;
+
+		const fetchAuthHeadersWithTimeout = () => {
+			return Promise.race([
+				getAuthHeaders(),
+				new Promise<undefined>((resolve) => {
+					setTimeout(() => {
+						resolve(undefined);
+					}, 2000);
+				}),
+			]);
+		};
+
+		void fetchAuthHeadersWithTimeout()
+			.catch((error: unknown) => {
+				// Catch any errors from getAuthHeaders itself or the timeout
+				reportError(error, 'getAuthHeaders');
+				return undefined;
+			})
+			.then((headers) =>
+				// Fallback to fallbackHeaders if headers are not present
+				getHeader(
+					contributionsServiceUrl,
+					requestData,
+					headers ?? fallbackHeaders,
+				),
+			)
 			.then((response: ModuleDataResponse<HeaderProps>) => {
 				if (!response.data) {
 					return null;
@@ -102,9 +146,9 @@ const ReaderRevenueLinksRemote = ({
 				return (
 					module.name === 'SignInPromptHeader'
 						? /* webpackChunkName: "sign-in-prompt-header" */
-						  import(`./marketing/header/SignInPromptHeader`)
+						  import('./marketing/header/SignInPromptHeader')
 						: /* webpackChunkName: "header" */
-						  import(`./marketing/header/Header`)
+						  import('./marketing/header/Header')
 				).then(
 					(headerModule: {
 						[key: string]: React.ElementType<HeaderProps>;
@@ -116,13 +160,7 @@ const ReaderRevenueLinksRemote = ({
 				);
 			})
 			.catch((error) => {
-				const msg = `Error importing RR header links: ${String(error)}`;
-
-				console.log(msg);
-				window.guardian.modules.sentry.reportError(
-					new Error(msg),
-					'rr-header-links',
-				);
+				reportError(error, 'fetching headers or importing component');
 			});
 	}, [
 		countryCode,
@@ -131,6 +169,7 @@ const ReaderRevenueLinksRemote = ({
 		pageViewId,
 		pageUrl,
 		abTests,
+		authStatus,
 	]);
 
 	if (SupportHeader !== null && supportHeaderResponse) {

dotcom-rendering/src/lib/mockRESTCalls.ts

@@ -202,15 +202,14 @@ export const mockFetch: typeof global.fetch = (
 			url,
 		):
 			return createMockResponse(200, discussion);
-		case /.*contributions\.(code\.dev-)?guardianapis\.com\/header/.test(
-			url,
-		) && requestInit?.method === 'POST':
-			return createMockResponse(200, contributionsHeaderResponse);
-		// Get contributions header
-		case /.*contributions\.(code\.dev-)?guardianapis\.com\/header/.test(
-			url,
-		):
+		// Get contributions header or local Storybook header fetches
+		case /.*\/header/.test(url):
 			return createMockResponse(200, contributionsHeaderResponse);
+		// Catch local Storybook epic fetches
+		case /.*\/epic/.test(url):
+			return createMockResponse(200, {
+				data: { module: { url: '', name: 'Epic', props: {} } },
+			});
 		// Get Ophan
 		case /.*ophan\.theguardian\.com\/img\/.*/.test(url):
 			return createMockResponse(200);

dotcom-rendering/src/lib/sdcRequests.ts

@@ -112,5 +112,6 @@ export const getGutterLiveblog = (
 export const getHeader = (
 	baseUrl: string,
 	payload: HeaderPayload,
+	headers?: HeadersInit,
 ): Promise<ModuleDataResponse<HeaderProps>> =>
-	getModuleData('header', baseUrl, payload);
+	getModuleData('header', baseUrl, payload, headers);

dotcom-rendering/webpack/webpack.config.server.js

@@ -2,6 +2,7 @@
 const nodeExternals = require('webpack-node-externals');
 const swcConfig = require('./.swcrc.json');
 const { svgr } = require('./svg.cjs');
+const { transpileExclude } = require('./webpack.config.client.js');
 
 const DEV = process.env.NODE_ENV === 'development';
 const nodeVersion = process.versions.node;
@@ -77,6 +78,7 @@ module.exports = {
 		rules: [
 			{
 				test: /(\.tsx|\.js|\.ts)$/,
+				exclude: transpileExclude,
 				use: swcLoader,
 			},
 			svgr,