diff --git a/dotcom-rendering/package.json b/dotcom-rendering/package.json
index c45dc366190..e85954f5110 100644
--- a/dotcom-rendering/package.json
+++ b/dotcom-rendering/package.json
@@ -37,7 +37,7 @@
 		"@guardian/core-web-vitals": "7.0.0",
 		"@guardian/eslint-config": "catalog:",
 		"@guardian/identity-auth": "6.0.1",
-		"@guardian/identity-auth-frontend": "8.1.0",
+		"@guardian/identity-auth-frontend": "0.0.0-canary-20260722105844",
 		"@guardian/libs": "32.0.0",
 		"@guardian/ophan-tracker-js": "4.0.2",
 		"@guardian/react-crossword": "19.0.1",
diff --git a/dotcom-rendering/src/components/FeastContextualNudge.island.tsx b/dotcom-rendering/src/components/FeastContextualNudge.island.tsx
index 7e77b4b5cfe..c4c346eb140 100644
--- a/dotcom-rendering/src/components/FeastContextualNudge.island.tsx
+++ b/dotcom-rendering/src/components/FeastContextualNudge.island.tsx
@@ -13,6 +13,8 @@ import {
 	BrazeBannersSystemPlacementId,
 	isPlacementStale,
 } from '../lib/braze/BrazeBannersSystem';
+import { getFeastSavedFromTheWebRecipes } from '../lib/feast/savedFromWeb';
+import { useAuthStatus } from '../lib/useAuthStatus';
 import { useBraze } from '../lib/useBraze';
 import type { StageType } from '../types/config';
 import type { RecipeBlockElement } from '../types/content';
@@ -116,6 +118,27 @@ const nudgeMinHeightStyles = css`
 	}
 `;
 
+/**
+ * Extra vertical margin applied around the reserved-height box, matching
+ * `showcaseCardStyles`' own margin so the placeholder shown while the
+ * "Saved from web" status is loading (see `isRecipeSaved` below) takes up
+ * exactly the same space as whichever of the Braze banner or native card
+ * replaces it, keeping the CLS mitigation consistent across all three
+ * states.
+ */
+const nudgeSpacingStyles = css`
+	margin: ${space[2]}px 0;
+`;
+
+/**
+ * Upper bound on how long to wait for `getFeastSavedFromTheWebRecipes` (see
+ * below) before giving up and treating the recipe as not-saved. Prevents an
+ * unusually slow/hanging request from blocking the nudge from rendering at
+ * all. Mirrors the timeout pattern used for `fetchEmail` in
+ * `BrazeBannersSystem.tsx`.
+ */
+const SAVED_FROM_WEB_TIMEOUT_MS = 2_000;
+
 // ── Card styles ───────────────────────────────────────────────────────────────
 
 const showcaseCardStyles = css`
@@ -163,6 +186,14 @@ type FeastContextualNudgeProps = {
 	isDev: boolean;
 	nudgeIndex: number;
 	idApiUrl: string | undefined;
+	/**
+	 * Every recipe id that will get a nudge on this page (at most 5). Shared
+	 * across all FeastContextualNudge instances so that whichever one
+	 * hydrates first fetches the reader's "Saved from web" state for the
+	 * whole batch in a single request, rather than each nudge querying just
+	 * its own recipe id separately.
+	 */
+	allNudgeRecipeIds: string[];
 };
 
 /**
@@ -185,9 +216,9 @@ export const FeastContextualNudge = ({
 	isDev,
 	nudgeIndex,
 	idApiUrl,
+	allNudgeRecipeIds,
 }: FeastContextualNudgeProps) => {
 	const { darkModeAvailable, renderingTarget } = useConfig();
-
 	const { braze } = useBraze(idApiUrl ?? '', renderingTarget);
 
 	const [isStorybook, setIsStorybook] = useState(false);
@@ -229,6 +260,70 @@ export const FeastContextualNudge = ({
 		}
 	}, [feastId, title, pageId, isDev]);
 
+	// Whether this recipe is already in the reader's "Saved from web" list.
+	// `getFeastSavedFromTheWebRecipes` caches by user id + recipe ids, so no
+	// matter how many FeastContextualNudge islands on this page call it as
+	// they hydrate (each is deferred `until: 'visible'`), only one network
+	// request for the batch of recipe ids on this page is ever made.
+	//
+	// `undefined` specifically means "not yet known" (auth status still
+	// pending, or the saved-from-web request is still in flight) as opposed
+	// to `false`, which means "known to not be saved". The Braze banner
+	// iframe reads `isRecipeSaved` from `context` only once, when it asks for
+	// context on load (see `GetContext` in `BrazeBannersSystem.tsx`) — so the
+	// banner must not be rendered until the real value is known, otherwise it
+	// would be permanently stuck showing the wrong saved state. See the
+	// render gate below, which holds off rendering anything (Braze banner
+	// *or* native fallback) until this resolves.
+	const authStatus = useAuthStatus();
+	const [isRecipeSaved, setIsRecipeSaved] = useState<boolean | undefined>(
+		undefined,
+	);
+	useEffect(() => {
+		if (authStatus.kind === 'Pending') return;
+		if (authStatus.kind !== 'SignedIn') {
+			setIsRecipeSaved(false);
+			return;
+		}
+
+		let cancelled = false;
+		const timeout = new Promise<Set<string>>((resolve) => {
+			setTimeout(() => resolve(new Set()), SAVED_FROM_WEB_TIMEOUT_MS);
+		});
+		void Promise.race([
+			getFeastSavedFromTheWebRecipes(
+				authStatus.idToken.claims.sub,
+				authStatus.accessToken.accessToken,
+				allNudgeRecipeIds,
+			),
+			timeout,
+		]).then((savedRecipeIds) => {
+			if (!cancelled) setIsRecipeSaved(savedRecipeIds.has(feastId));
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [authStatus, feastId, allNudgeRecipeIds]);
+
+	// Only the native fallback renders `isRecipeSaved`-free, so it's safe to
+	// show straight away when there's no Braze placement to wait on. When a
+	// Braze placement is possible, hold off on rendering anything until the
+	// saved-from-web status is known, so the native card never flashes before
+	// the Braze banner is ready to show with the correct context, and so the
+	// banner is never shown with a stale/incorrect `isRecipeSaved`. The
+	// reserved height/margin (`nudgeMinHeightStyles` + `nudgeSpacingStyles`)
+	// matches the Braze/native cards below, so this causes no layout shift
+	// once real content replaces it.
+	if (idApiUrl !== undefined && isRecipeSaved === undefined) {
+		return (
+			<div
+				data-component="feast-contextual-nudge"
+				aria-hidden="true"
+				css={[nudgeMinHeightStyles, nudgeSpacingStyles]}
+			/>
+		);
+	}
+
 	// If idApiUrl is defined and Braze has a banner for this placement slot,
 	// render the Braze banner instead of the native nudge.
 	if (idApiUrl !== undefined) {
@@ -254,12 +349,7 @@ export const FeastContextualNudge = ({
 				<div
 					aria-description={`Open the recipe ${title} in the Feast app`}
 					data-component="feast-contextual-nudge"
-					css={[
-						nudgeMinHeightStyles,
-						css`
-							margin: ${space[2]}px 0;
-						`,
-					]}
+					css={[nudgeMinHeightStyles, nudgeSpacingStyles]}
 				>
 					<BrazeBannersSystemDisplay
 						meta={{
@@ -277,6 +367,7 @@ export const FeastContextualNudge = ({
 							nudgeIndex,
 							darkMode: darkModeAvailable,
 							adjustToken: getAdjustToken(stage),
+							isRecipeSaved,
 						}}
 					/>
 				</div>
diff --git a/dotcom-rendering/src/components/FeastContextualNudge.stories.tsx b/dotcom-rendering/src/components/FeastContextualNudge.stories.tsx
index 34858a77ea9..5f225b5e5d8 100644
--- a/dotcom-rendering/src/components/FeastContextualNudge.stories.tsx
+++ b/dotcom-rendering/src/components/FeastContextualNudge.stories.tsx
@@ -33,6 +33,7 @@ const meta = {
 		isDev: true,
 		nudgeIndex: 1,
 		idApiUrl: undefined,
+		allNudgeRecipeIds: [mockRecipe.id],
 	},
 	parameters: {
 		chromatic: { viewports: [375, 740, 980] },
diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx
index d7fd529642a..7ef2c13fccd 100644
--- a/dotcom-rendering/src/lib/ArticleRenderer.tsx
+++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx
@@ -168,11 +168,29 @@ export const ArticleRenderer = ({
 		const MAX_NUDGES = 5;
 		const interval = Math.ceil(sections.length / MAX_NUDGES);
 
-		for (const section of sections) {
+		const sectionsWithNudgeIndex = sections.map((section) => {
 			const position = section.index + 1; // 1-based
 			const nudgeIndex =
 				position % interval === 0 ? position / interval : null;
+			return { section, nudgeIndex };
+		});
 
+		/**
+		 * Every recipe id that will get a nudge on this page, known upfront
+		 * (at most MAX_NUDGES). Passed to every FeastContextualNudge
+		 * instance so that whichever one hydrates first can fetch the
+		 * reader's "Saved from web" state for the whole batch in a single
+		 * request (see `getFeastSavedFromTheWebRecipes`), rather than each
+		 * nudge querying just its own recipe id separately.
+		 */
+		const allNudgeRecipeIds = sectionsWithNudgeIndex
+			.filter(
+				({ section, nudgeIndex }) =>
+					section.recipe !== undefined && nudgeIndex !== null,
+			)
+			.map(({ section }) => section.recipe!.id);
+
+		for (const { section, nudgeIndex } of sectionsWithNudgeIndex) {
 			result.push(
 				<Fragment key={`recipe-section-${section.index}`}>
 					{section.subheadingEl}
@@ -189,6 +207,7 @@ export const ArticleRenderer = ({
 								recipeArticleTitle={section.recipeArticleTitle}
 								nudgeIndex={nudgeIndex}
 								idApiUrl={idApiUrl}
+								allNudgeRecipeIds={allNudgeRecipeIds}
 							/>
 						</Island>
 					)}
diff --git a/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx b/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
index b7871958656..bb3d1692cfc 100644
--- a/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
+++ b/dotcom-rendering/src/lib/braze/BrazeBannersSystem.tsx
@@ -12,6 +12,7 @@ import { useConfig } from '../../components/ConfigContext';
 import { isProd } from '../../components/marketing/lib/stage';
 import type { StageType } from '../../types/config';
 import type { TagType } from '../../types/tag';
+import { addFeastRecipeToSavedFromWebList } from '../feast/savedFromWeb';
 import { getAuthState, getOptionsHeaders } from '../identity';
 import type { CandidateConfig, CanShowResult } from '../messagePicker';
 import { useAuthStatus } from '../useAuthStatus';
@@ -504,6 +505,7 @@ enum BrazeBannersSystemMessageType {
 	NavigateToUrl = 'BRAZE_BANNERS_SYSTEM:NAVIGATE_TO_URL',
 	DismissBanner = 'BRAZE_BANNERS_SYSTEM:DISMISS_BANNER',
 	GetContext = 'BRAZE_BANNERS_SYSTEM:GET_CONTEXT',
+	SaveFeastRecipeById = 'BRAZE_BANNERS_SYSTEM:SAVE_FEAST_RECIPE_BY_ID',
 }
 
 /**
@@ -675,6 +677,41 @@ export const BrazeBannersSystemDisplay = ({
 		threshold: 0,
 	});
 
+	/**
+	 * Save a Feast recipe by its Id on the "Saved from the Web" recipes list on the App.
+	 * Proxied through Frontend's own server (`/api/feast-saved-recipes/:recipeId`),
+	 * which forwards the reader's bearer token to the Feast API. Idempotent:
+	 * saving the same recipe id twice has no extra effect.
+	 * @param feastRecipeId The ID of the Feast recipe to save
+	 * @returns A promise that resolves to true if the add process was successful, or false if it failed or the user is not signed in
+	 */
+	const saveFeastRecipeById = useCallback(
+		async (feastRecipeId: string): Promise<boolean> => {
+			if (authStatus.kind === 'SignedIn') {
+				const success = await addFeastRecipeToSavedFromWebList(
+					authStatus.accessToken.accessToken,
+					feastRecipeId,
+				);
+
+				if (success) {
+					brazeBannersSystemLogger.info(
+						'Successfully saved recipe to the "Saved from web" list:',
+						feastRecipeId,
+					);
+				} else {
+					brazeBannersSystemLogger.warn(
+						'Failed to save recipe to the "Saved from web" list:',
+						feastRecipeId,
+					);
+				}
+
+				return success;
+			}
+			return false;
+		},
+		[authStatus],
+	);
+
 	/**
 	 * Subscribes the user to a newsletter via the Identity API.
 	 * Only attempts to subscribe if the user is signed in and a newsletter ID is provided.
@@ -968,6 +1005,10 @@ export const BrazeBannersSystemDisplay = ({
 				| {
 						type: BrazeBannersSystemMessageType.GetContext;
 				  }
+				| {
+						type: BrazeBannersSystemMessageType.SaveFeastRecipeById;
+						feastRecipeId?: string;
+				  }
 			>,
 		) => {
 			if (
@@ -1118,6 +1159,34 @@ export const BrazeBannersSystemDisplay = ({
 						},
 					);
 					break;
+				case BrazeBannersSystemMessageType.SaveFeastRecipeById: {
+					meta.braze.logBannerClick(
+						meta.banner,
+						'save_feast_recipe_button',
+					);
+					const { feastRecipeId } = event.data;
+					if (feastRecipeId !== undefined) {
+						void saveFeastRecipeById(feastRecipeId).then(
+							(success) => {
+								postMessageToBrazeBanner(
+									BrazeBannersSystemMessageType.SaveFeastRecipeById,
+									{
+										success,
+									},
+								);
+								meta.braze.logCustomEvent(
+									'braze_banner_save_feast_recipe',
+									{
+										placementId: meta.banner.placementId,
+										feastRecipeId,
+										success,
+									},
+								);
+							},
+						);
+					}
+					break;
+				}
 			}
 		};
 
@@ -1136,6 +1205,7 @@ export const BrazeBannersSystemDisplay = ({
 		logNavigateToUrlClick,
 		postMessageToBrazeBanner,
 		context,
+		saveFeastRecipeById,
 	]);
 
 	// Log Impressions when the banner is seen, using the hasBeenSeen value from the useIsInView hook
diff --git a/dotcom-rendering/src/lib/feast/savedFromWeb.test.ts b/dotcom-rendering/src/lib/feast/savedFromWeb.test.ts
new file mode 100644
index 00000000000..6edffcd8350
--- /dev/null
+++ b/dotcom-rendering/src/lib/feast/savedFromWeb.test.ts
@@ -0,0 +1,268 @@
+import {
+	addFeastRecipeToSavedFromWebList,
+	getFeastSavedFromTheWebRecipes,
+} from './savedFromWeb';
+
+describe('savedFromWeb', () => {
+	const originalFetch = global.fetch;
+
+	beforeEach(() => {
+		global.fetch = jest.fn();
+		jest.spyOn(console, 'error').mockImplementation(() => undefined);
+		window.guardian = {
+			config: { stage: 'CODE' },
+		} as unknown as typeof window.guardian;
+	});
+
+	afterEach(() => {
+		global.fetch = originalFetch;
+		jest.restoreAllMocks();
+	});
+
+	describe('getFeastSavedFromTheWebRecipes', () => {
+		it('calls the Feast API directly using the CODE host when not on PROD', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await getFeastSavedFromTheWebRecipes('user-a', 'token-a', [
+				'recipe-1',
+			]);
+
+			const [url]: [string] = (global.fetch as jest.Mock).mock.calls[0];
+			expect(
+				url.startsWith(
+					'https://recipes.code.dev-guardianapis.com/persist/v2/saved-from-web',
+				),
+			).toBe(true);
+		});
+
+		it('calls the Feast API directly using the PROD host on PROD', async () => {
+			window.guardian = {
+				config: { stage: 'PROD' },
+			} as unknown as typeof window.guardian;
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await getFeastSavedFromTheWebRecipes('user-a2', 'token-a2', [
+				'recipe-1',
+			]);
+
+			const [url]: [string] = (global.fetch as jest.Mock).mock.calls[0];
+			expect(
+				url.startsWith(
+					'https://recipes.guardianapis.com/persist/v2/saved-from-web',
+				),
+			).toBe(true);
+		});
+
+		it('sends the ids as a deduped, sorted, comma-separated query param', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await getFeastSavedFromTheWebRecipes('user-b', 'token-b', [
+				'recipe-b',
+				'recipe-a',
+				'recipe-b',
+			]);
+
+			const [url]: [string] = (global.fetch as jest.Mock).mock.calls[0];
+			expect(url).toBe(
+				'https://recipes.code.dev-guardianapis.com/persist/v2/saved-from-web?ids=recipe-a%2Crecipe-b',
+			);
+		});
+
+		it('sends the Authorization bearer header', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await getFeastSavedFromTheWebRecipes('user-c', 'token-c', [
+				'recipe-1',
+			]);
+
+			const [, requestInit]: [string, RequestInit | undefined] = (
+				global.fetch as jest.Mock
+			).mock.calls[0];
+			const headers = (requestInit?.headers ?? {}) as Record<
+				string,
+				string
+			>;
+			expect(headers.Authorization).toBe('Bearer token-c');
+		});
+
+		it('returns the recipe ids present in the response', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [
+					{ recipeId: 'recipe-1', lastModified: '2026-01-01' },
+				],
+			});
+
+			const result = await getFeastSavedFromTheWebRecipes(
+				'user-d',
+				'token-d',
+				['recipe-1', 'recipe-2'],
+			);
+
+			expect(result).toEqual(new Set(['recipe-1']));
+		});
+
+		it('returns an empty set when the response is not ok', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: false,
+				status: 500,
+				statusText: 'Internal Server Error',
+			});
+
+			const result = await getFeastSavedFromTheWebRecipes(
+				'user-e',
+				'token-e',
+				['recipe-1'],
+			);
+
+			expect(result).toEqual(new Set());
+		});
+
+		it('returns an empty set and does not throw when fetch rejects', async () => {
+			(global.fetch as jest.Mock).mockRejectedValue(
+				new Error('network error'),
+			);
+
+			const result = await getFeastSavedFromTheWebRecipes(
+				'user-f',
+				'token-f',
+				['recipe-1'],
+			);
+
+			expect(result).toEqual(new Set());
+		});
+
+		it('returns an empty set immediately, without fetching, for an empty recipeIds array', async () => {
+			const result = await getFeastSavedFromTheWebRecipes(
+				'user-g',
+				'token-g',
+				[],
+			);
+
+			expect(result).toEqual(new Set());
+			expect(global.fetch).not.toHaveBeenCalled();
+		});
+
+		it('truncates to the max allowed ids (5)', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await getFeastSavedFromTheWebRecipes('user-h', 'token-h', [
+				'r1',
+				'r2',
+				'r3',
+				'r4',
+				'r5',
+				'r6',
+			]);
+
+			const [url]: [string] = (global.fetch as jest.Mock).mock.calls[0];
+			const idsParam = new URL(url, 'http://localhost').searchParams.get(
+				'ids',
+			);
+			expect(idsParam?.split(',')).toHaveLength(5);
+		});
+
+		it('caches concurrent calls for the same user and ids, making only one request', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: true,
+				json: async () => [],
+			});
+
+			await Promise.all([
+				getFeastSavedFromTheWebRecipes('user-i', 'token-i', [
+					'recipe-1',
+				]),
+				getFeastSavedFromTheWebRecipes('user-i', 'token-i', [
+					'recipe-1',
+				]),
+			]);
+
+			expect(global.fetch).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	describe('addFeastRecipeToSavedFromWebList', () => {
+		it('calls the Feast API directly with PUT', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({ ok: true });
+
+			await addFeastRecipeToSavedFromWebList('token-j', 'recipe-1');
+
+			const [url, requestInit]: [string, RequestInit | undefined] = (
+				global.fetch as jest.Mock
+			).mock.calls[0];
+			expect(url).toBe(
+				'https://recipes.code.dev-guardianapis.com/persist/v2/saved-from-web/recipe-1',
+			);
+			expect(requestInit?.method).toBe('PUT');
+		});
+
+		it('sends the Authorization bearer header', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({ ok: true });
+
+			await addFeastRecipeToSavedFromWebList('token-k', 'recipe-1');
+
+			const [, requestInit]: [string, RequestInit | undefined] = (
+				global.fetch as jest.Mock
+			).mock.calls[0];
+			const headers = (requestInit?.headers ?? {}) as Record<
+				string,
+				string
+			>;
+			expect(headers.Authorization).toBe('Bearer token-k');
+		});
+
+		it('returns true when the response is ok', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({ ok: true });
+
+			const result = await addFeastRecipeToSavedFromWebList(
+				'token-l',
+				'recipe-1',
+			);
+
+			expect(result).toBe(true);
+		});
+
+		it('returns false when the response is not ok', async () => {
+			(global.fetch as jest.Mock).mockResolvedValue({
+				ok: false,
+				status: 400,
+				statusText: 'Bad Request',
+			});
+
+			const result = await addFeastRecipeToSavedFromWebList(
+				'token-m',
+				'recipe-1',
+			);
+
+			expect(result).toBe(false);
+		});
+
+		it('returns false and does not throw when fetch rejects', async () => {
+			(global.fetch as jest.Mock).mockRejectedValue(
+				new Error('network error'),
+			);
+
+			const result = await addFeastRecipeToSavedFromWebList(
+				'token-n',
+				'recipe-1',
+			);
+
+			expect(result).toBe(false);
+		});
+	});
+});
diff --git a/dotcom-rendering/src/lib/feast/savedFromWeb.ts b/dotcom-rendering/src/lib/feast/savedFromWeb.ts
new file mode 100644
index 00000000000..4d7de21d99f
--- /dev/null
+++ b/dotcom-rendering/src/lib/feast/savedFromWeb.ts
@@ -0,0 +1,178 @@
+/**
+ * Direct client for the Feast API's "Saved from web" endpoints
+ * (`/v2/saved-from-web`). The browser calls the Feast API directly, sending
+ * the reader's bearer token straight through, rather than going via a
+ * Frontend-hosted proxy.
+ */
+const FEAST_API_BASE_URL_PROD = 'https://recipes.guardianapis.com';
+const FEAST_API_BASE_URL_CODE = 'https://recipes.code.dev-guardianapis.com';
+
+const FEAST_SAVED_RECIPES_PATH = '/persist/v2/saved-from-web';
+
+const getFeastApiBaseUrl = (): string =>
+	window.guardian.config.stage === 'PROD'
+		? FEAST_API_BASE_URL_PROD
+		: FEAST_API_BASE_URL_CODE;
+
+/**
+ * Upper bound on how many recipe ids can be requested in one call. Mirrors
+ * the Feast API's own `MaxSavedFromWebIdsPerRequest` limit (currently 5,
+ * which also happens to match DCR's own `MAX_NUDGES` cap on how many
+ * FeastContextualNudge placements can appear on a single article).
+ */
+const MAX_SAVED_FROM_WEB_IDS_PER_REQUEST = 5;
+
+/**
+ * In-flight/resolved request cache, keyed by `userId:sortedRecipeIds`.
+ *
+ * Deliberately keyed by the reader's user id, not their access token: the
+ * token is only ever used transiently to make the one underlying fetch and
+ * is not retained here, which keeps it out of any long-lived module-level
+ * state. This is module-level state that resets on every full page
+ * load — DCR has no SPA navigation, so a page refresh always starts with an
+ * empty cache, same as `stalePlacements` in `BrazeBannersSystem.tsx`.
+ */
+const savedFromWebCache = new Map<string, Promise<Set<string>>>();
+
+type SavedFromWebItem = { recipeId: string; lastModified: string };
+
+/**
+ * Performs (and caches) the underlying request for a given cache key. The
+ * cache entry is written synchronously, before the fetch resolves, so
+ * concurrent callers in the same tick share the one in-flight promise
+ * rather than each triggering their own request.
+ */
+const fetchSavedFromWebRecipes = (
+	cacheKey: string,
+	accessToken: string,
+	idsParam: string,
+): Promise<Set<string>> => {
+	const cached = savedFromWebCache.get(cacheKey);
+	if (cached) {
+		return cached;
+	}
+
+	const promise = (async (): Promise<Set<string>> => {
+		try {
+			const response = await fetch(
+				`${getFeastApiBaseUrl()}${FEAST_SAVED_RECIPES_PATH}?ids=${encodeURIComponent(idsParam)}`,
+				{
+					headers: {
+						Authorization: `Bearer ${accessToken}`,
+						'X-GU-IS-OAUTH': 'true',
+					},
+				},
+			);
+
+			if (!response.ok) {
+				console.error(
+					'[getFeastSavedFromTheWebRecipes] Failed to fetch saved recipes:',
+					response.status,
+					response.statusText,
+				);
+				return new Set();
+			}
+
+			const data: unknown = await response.json();
+			if (!Array.isArray(data)) {
+				console.error(
+					'[getFeastSavedFromTheWebRecipes] Unexpected response shape:',
+					data,
+				);
+				return new Set();
+			}
+
+			return new Set(
+				(data as SavedFromWebItem[])
+					.filter((item) => typeof item.recipeId === 'string')
+					.map((item) => item.recipeId),
+			);
+		} catch (error) {
+			console.error(
+				'[getFeastSavedFromTheWebRecipes] Error fetching saved recipes:',
+				error,
+			);
+			return new Set();
+		}
+	})();
+
+	savedFromWebCache.set(cacheKey, promise);
+	return promise;
+};
+
+/**
+ * Checks which of the given recipe ids are already saved to the reader's
+ * "Saved from web" list. See `fetchSavedFromWebRecipes` for the caching
+ * behaviour that keeps this to one network request per page.
+ * @param userId The reader's user id (`idToken.claims.sub`), used only as the cache key
+ * @param accessToken The reader's Okta access token, used only to make the request
+ * @param recipeIds The recipe ids to check (capped at `MaxSavedFromWebIdsPerRequest` on the Feast API; longer lists are truncated)
+ */
+export const getFeastSavedFromTheWebRecipes = (
+	userId: string,
+	accessToken: string,
+	recipeIds: string[],
+): Promise<Set<string>> => {
+	if (recipeIds.length === 0) {
+		return Promise.resolve(new Set());
+	}
+
+	const cappedRecipeIds =
+		recipeIds.length > MAX_SAVED_FROM_WEB_IDS_PER_REQUEST
+			? recipeIds.slice(0, MAX_SAVED_FROM_WEB_IDS_PER_REQUEST)
+			: recipeIds;
+
+	if (cappedRecipeIds.length !== recipeIds.length) {
+		console.error(
+			`[getFeastSavedFromTheWebRecipes] Too many recipe ids requested (${recipeIds.length}), truncating to ${MAX_SAVED_FROM_WEB_IDS_PER_REQUEST}`,
+		);
+	}
+
+	const idsParam = Array.from(new Set(cappedRecipeIds)).sort().join(',');
+	const cacheKey = `${userId}:${idsParam}`;
+
+	return fetchSavedFromWebRecipes(cacheKey, accessToken, idsParam);
+};
+
+/**
+ * Adds a recipe to the reader's "Saved from web" list, creating the list on
+ * first use. Idempotent: adding the same recipe id twice has no extra
+ * effect.
+ *
+ * Not memoized: each call is a distinct write, not an idempotent read to
+ * dedupe.
+ */
+export const addFeastRecipeToSavedFromWebList = async (
+	accessToken: string,
+	recipeId: string,
+): Promise<boolean> => {
+	try {
+		const response = await fetch(
+			`${getFeastApiBaseUrl()}${FEAST_SAVED_RECIPES_PATH}/${encodeURIComponent(recipeId)}`,
+			{
+				method: 'PUT',
+				headers: {
+					Authorization: `Bearer ${accessToken}`,
+					'X-GU-IS-OAUTH': 'true',
+				},
+			},
+		);
+
+		if (!response.ok) {
+			console.error(
+				'[addFeastRecipeToSavedFromWebList] Failed to save recipe:',
+				response.status,
+				response.statusText,
+			);
+			return false;
+		}
+
+		return true;
+	} catch (error) {
+		console.error(
+			'[addFeastRecipeToSavedFromWebList] Error saving recipe:',
+			error,
+		);
+		return false;
+	}
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b9e89d895a..f2b84fd9217 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -342,8 +342,8 @@ importers:
         specifier: 6.0.1
         version: 6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)
       '@guardian/identity-auth-frontend':
-        specifier: 8.1.0
-        version: 8.1.0(@guardian/identity-auth@6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3))(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)
+        specifier: 0.0.0-canary-20260722105844
+        version: 0.0.0-canary-20260722105844(@guardian/identity-auth@6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3))(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)
       '@guardian/libs':
         specifier: 32.0.0
         version: 32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3)
@@ -2562,13 +2562,13 @@ packages:
       eslint-plugin-storybook:
         optional: true
 
-  '@guardian/identity-auth-frontend@8.1.0':
-    resolution: {integrity: sha512-2GzIsUBp8uiP+fRsKUpMrqJYSqokUCDo4q9WByi143CN0LRRWj2tVt23Y/+cZxWUuwDfRBxp1qbRnsy4QSMVLQ==}
+  '@guardian/identity-auth-frontend@0.0.0-canary-20260722105844':
+    resolution: {integrity: sha512-7DN0YSfffew3HBbfjB34PUb9lD1HDLBGWTt5+Lr16d8uKJ90rVKGU1E467UjFsb0gLsNBAs3nN2qMftOPcMGEA==}
     peerDependencies:
-      '@guardian/identity-auth': ^6.0.0
-      '@guardian/libs': ^21.0.0
-      tslib: ^2.6.2
-      typescript: ~5.5.2
+      '@guardian/identity-auth': ^18.0.0
+      '@guardian/libs': ^33.0.0
+      tslib: ^2.8.1
+      typescript: ~6.0.3
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -11943,7 +11943,7 @@ snapshots:
       - supports-color
       - typescript
 
-  '@guardian/identity-auth-frontend@8.1.0(@guardian/identity-auth@6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3))(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)':
+  '@guardian/identity-auth-frontend@0.0.0-canary-20260722105844(@guardian/identity-auth@6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3))(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)':
     dependencies:
       '@guardian/identity-auth': 6.0.1(@guardian/libs@32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3))(tslib@2.6.2)(typescript@6.0.3)
       '@guardian/libs': 32.0.0(@guardian/ophan-tracker-js@4.0.2)(tslib@2.6.2)(typescript@6.0.3)