diff --git a/web/media/encrypted-multimedia.react.js b/web/media/encrypted-multimedia.react.js
index 223bb697d..cf83b2bf7 100644
--- a/web/media/encrypted-multimedia.react.js
+++ b/web/media/encrypted-multimedia.react.js
@@ -1,143 +1,145 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import 'react-circular-progressbar/dist/styles.css';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
 
 import type { EncryptedMediaType } from 'lib/types/media-types.js';
 
-import { fetchAndDecryptMedia } from './encryption-utils.js';
+import { useFetchAndDecryptMedia } from './encryption-utils.js';
 import LoadableVideo from './loadable-video.react.js';
 import css from './media.css';
 import LoadingIndicator from '../loading-indicator.react.js';
 import type { CSSStyle } from '../types/styles';
 
 type Props = {
   +blobURI: string,
   +encryptionKey: string,
   +type: EncryptedMediaType,
   +thumbnailBlobURI?: ?string,
   +thumbnailEncryptionKey?: ?string,
   +placeholderSrc?: ?string,
   +multimediaClassName?: string,
   +elementStyle?: ?Partial<CSSStyle>,
   // if provided, this component will be shown instead of the loading indicator
   +loadingIndicatorComponent?: React.Node,
   // if true, the loading indicator will not be shown
   +invisibleLoad?: boolean,
 };
 
 type Source = { +uri: string } | { +error: string };
 
 function EncryptedMultimedia(props: Props): React.Node {
   const {
     blobURI,
     encryptionKey,
     placeholderSrc,
     elementStyle,
     multimediaClassName,
     invisibleLoad,
   } = props;
 
   const [source, setSource] = React.useState<?Source>(null);
   const videoRef = React.useRef<?HTMLVideoElement>(null);
 
+  const fetchAndDecryptMedia = useFetchAndDecryptMedia();
+
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setSource(null);
 
     const loadDecrypted = async () => {
       const { result } = await fetchAndDecryptMedia(blobURI, encryptionKey);
       if (!isMounted) {
         return;
       }
 
       if (result.success) {
         const { uri } = result;
         setSource({ uri });
         uriToDispose = uri;
       } else {
         setSource({ error: result.reason });
       }
     };
 
     void loadDecrypted();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         URL.revokeObjectURL(uriToDispose);
       }
     };
-  }, [blobURI, encryptionKey]);
+  }, [blobURI, encryptionKey, fetchAndDecryptMedia]);
 
   // we need to update the video source when the source changes
   // because re-rendering the <source> element wouldn't reload parent <video>
   React.useEffect(() => {
     if (videoRef.current && source?.uri) {
       videoRef.current.src = source.uri;
       videoRef.current.load();
     }
   }, [source]);
 
   let loadingIndicator, errorIndicator;
 
   if (!source && !invisibleLoad) {
     loadingIndicator = props.loadingIndicatorComponent ?? (
       <div className={css.loadingIndicatorContainer}>
         <LoadingIndicator
           status="loading"
           size="large"
           color="white"
           loadingClassName={css.loadingIndicator}
         />
       </div>
     );
   }
 
   if (source?.error) {
     errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;
   }
 
   let mediaNode;
   if (props.type === 'encrypted_photo') {
     mediaNode = (
       <img
         src={source?.uri ?? placeholderSrc}
         key={blobURI}
         className={multimediaClassName}
         style={elementStyle}
       />
     );
   } else {
     const { thumbnailBlobURI, thumbnailEncryptionKey } = props;
     invariant(
       thumbnailBlobURI && thumbnailEncryptionKey,
       'Thumbnail missing for encrypted video',
     );
 
     mediaNode = (
       <LoadableVideo
         uri={null}
         ref={videoRef}
         key={blobURI}
         thumbnailSource={{ thumbnailBlobURI, thumbnailEncryptionKey }}
         elementStyle={elementStyle}
         thumbHashDataURL={placeholderSrc}
         multimediaClassName={multimediaClassName}
       />
     );
   }
 
   return (
     <>
       {mediaNode}
       {loadingIndicator}
       {errorIndicator}
     </>
   );
 }
 
 export default EncryptedMultimedia;
diff --git a/web/media/encryption-utils.js b/web/media/encryption-utils.js
index 8ced2b0c4..338ca731c 100644
--- a/web/media/encryption-utils.js
+++ b/web/media/encryption-utils.js
@@ -1,254 +1,289 @@
 // @flow
 
 import invariant from 'invariant';
+import * as React from 'react';
 import { thumbHashToDataURL } from 'thumbhash';
 
 import * as AES from 'lib/media/aes-crypto-utils-common.js';
 import { hexToUintArray, uintArrayToHexString } from 'lib/media/data-utils.js';
 import { fileInfoFromData } from 'lib/media/file-utils.js';
 import { fetchableMediaURI } from 'lib/media/media-utils.js';
+import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
+import type { AuthMetadata } from 'lib/shared/identity-client-context.js';
 import type {
   MediaMissionFailure,
   MediaMissionStep,
 } from 'lib/types/media-types.js';
+import { isBlobServiceURI } from 'lib/utils/blob-service.js';
 import { getMessageForException } from 'lib/utils/errors.js';
 import { calculatePaddedLength, pad, unpad } from 'lib/utils/pkcs7-padding.js';
+import { createDefaultHTTPRequestHeaders } from 'lib/utils/services-utils.js';
 
 import { base64DecodeBuffer } from '../utils/base64-utils.js';
 
 const PADDING_THRESHOLD = 5000000; // 5MB
 
 type EncryptFileResult = {
   +success: true,
   +file: File,
   +uri: string,
   +encryptionKey: string,
   +sha256Hash: string,
 };
 
 async function encryptFile(input: File): Promise<{
   steps: $ReadOnlyArray<MediaMissionStep>,
   result: EncryptFileResult | MediaMissionFailure,
 }> {
   const steps = [];
   let success = true,
     exceptionMessage;
 
   // Step 1: Read the file into an ArrayBuffer
   let data;
   const arrayBufferStart = Date.now();
   try {
     const inputBuffer = await input.arrayBuffer();
     data = new Uint8Array(inputBuffer);
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'array_buffer_from_blob',
     success,
     exceptionMessage,
     time: Date.now() - arrayBufferStart,
   });
   if (!success || !data) {
     return { steps, result: { success: false, reason: 'array_buffer_failed' } };
   }
 
   // Step 2: Encrypt the data
   const startEncrypt = Date.now();
   const paddedLength = calculatePaddedLength(data.length);
   const shouldPad = paddedLength <= PADDING_THRESHOLD;
   let key, encryptedData, sha256;
   try {
     const plaintextData = shouldPad ? pad(data) : data;
     key = await AES.generateKeyCommon(crypto);
     encryptedData = await AES.encryptCommon(crypto, key, plaintextData);
 
     const hashBytes = await crypto.subtle.digest('SHA-256', encryptedData);
     sha256 = btoa(String.fromCharCode(...new Uint8Array(hashBytes)));
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'encrypt_data',
     dataSize: encryptedData?.byteLength ?? -1,
     isPadded: shouldPad,
     time: Date.now() - startEncrypt,
     sha256,
     success,
     exceptionMessage,
   });
   if (encryptedData && !sha256) {
     return { steps, result: { success: false, reason: 'digest_failed' } };
   }
   if (!success || !encryptedData || !key || !sha256) {
     return { steps, result: { success: false, reason: 'encryption_failed' } };
   }
 
   // Step 3: Create a File from the encrypted data
   const output = new File([encryptedData], input.name, { type: input.type });
   return {
     steps,
     result: {
       success: true,
       file: output,
       uri: URL.createObjectURL(output),
       encryptionKey: uintArrayToHexString(key),
       sha256Hash: sha256,
     },
   };
 }
 
 type DecryptFileStep =
   | {
       +step: 'fetch_buffer',
       +url: string,
       +time: number,
       +success: boolean,
       +exceptionMessage: ?string,
     }
   | {
       +step: 'decrypt_data',
       +dataSize: number,
       +time: number,
       +isPadded: boolean,
       +success: boolean,
       +exceptionMessage: ?string,
     }
   | {
       +step: 'save_blob',
       +objectURL: ?string,
       +mimeType: string,
       +time: number,
       +success: boolean,
       +exceptionMessage: ?string,
     };
 type DecryptionFailure =
   | MediaMissionFailure
   | {
       +success: false,
       +reason: 'decrypt_data_failed' | 'save_blob_failed',
     };
 
+type FetchAndDecryptMediaOutput = {
+  steps: $ReadOnlyArray<DecryptFileStep>,
+  result: { success: true, uri: string } | DecryptionFailure,
+};
+
 /**
  * Fetches the encrypted media for given {@link blobURI}, decrypts it,
  * and stores it in a blob. Returns the object URL of the blob.
  *
  * The returned object URL should be revoked when the media is no longer needed.
  */
 async function fetchAndDecryptMedia(
   blobURI: string,
   encryptionKey: string,
-): Promise<{
-  steps: $ReadOnlyArray<DecryptFileStep>,
-  result: { success: true, uri: string } | DecryptionFailure,
-}> {
+  authMetadata: AuthMetadata,
+): Promise<FetchAndDecryptMediaOutput> {
   let success = true;
   let exceptionMessage;
   const steps: DecryptFileStep[] = [];
 
   // Step 1 - Fetch the encrypted media and convert it to a Uint8Array
+  let headers;
+  if (isBlobServiceURI(blobURI)) {
+    headers = createDefaultHTTPRequestHeaders(authMetadata);
+  }
+
   let data;
   const fetchStartTime = Date.now();
   const url = fetchableMediaURI(blobURI);
   try {
-    const response = await fetch(url);
+    const response = await fetch(url, { headers });
     if (!response.ok) {
       throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
     }
     const buffer = await response.arrayBuffer();
     data = new Uint8Array(buffer);
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'fetch_buffer',
     url,
     time: Date.now() - fetchStartTime,
     success,
     exceptionMessage,
   });
   if (!success || !data) {
     return {
       steps,
       result: { success: false, reason: 'fetch_failed' },
     };
   }
 
   // Step 2 - Decrypt the data
   let decryptedData;
   const decryptStartTime = Date.now();
   try {
     const keyBytes = hexToUintArray(encryptionKey);
     const plaintext = await AES.decryptCommon(crypto, keyBytes, data);
     decryptedData =
       plaintext.byteLength > PADDING_THRESHOLD ? plaintext : unpad(plaintext);
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'decrypt_data',
     dataSize: decryptedData?.byteLength ?? -1,
     time: Date.now() - decryptStartTime,
     isPadded: data.byteLength > PADDING_THRESHOLD,
     success,
     exceptionMessage,
   });
   if (!success || !decryptedData) {
     return { steps, result: { success: false, reason: 'decrypt_data_failed' } };
   }
 
   // Step 3 - Create a blob from the decrypted data and return it
   const saveStartTime = Date.now();
   const { mime } = fileInfoFromData(decryptedData);
   if (!mime) {
     return {
       steps,
       result: { success: false, reason: 'mime_check_failed', mime },
     };
   }
 
   let objectURL;
   try {
     invariant(mime, 'mime type should be defined');
     const decryptedBlob = new Blob([decryptedData], { type: mime });
     objectURL = URL.createObjectURL(decryptedBlob);
   } catch (e) {
     success = false;
     exceptionMessage = getMessageForException(e);
   }
   steps.push({
     step: 'save_blob',
     objectURL,
     mimeType: mime,
     time: Date.now() - saveStartTime,
     success,
     exceptionMessage,
   });
   if (!success || !objectURL) {
     return {
       steps,
       result: { success: false, reason: 'save_blob_failed' },
     };
   }
 
   return { steps, result: { success: true, uri: objectURL } };
 }
 
+function useFetchAndDecryptMedia(): (
+  blobURI: string,
+  encryptionKey: string,
+) => Promise<FetchAndDecryptMediaOutput> {
+  const identityContext = React.useContext(IdentityClientContext);
+  invariant(identityContext, 'Identity context should be set');
+  const { getAuthMetadata } = identityContext;
+
+  return React.useCallback(
+    async (blobURI, encryptionKey) => {
+      const authMetadata = await getAuthMetadata();
+      return fetchAndDecryptMedia(blobURI, encryptionKey, authMetadata);
+    },
+    [getAuthMetadata],
+  );
+}
+
 async function decryptThumbhashToDataURL(
   encryptedThumbHash: string,
   keyHex: string,
 ): Promise<string> {
   const encryptedData = base64DecodeBuffer(encryptedThumbHash);
   const thumbhashBytes = await AES.decryptCommon(
     crypto,
     hexToUintArray(keyHex),
     encryptedData,
   );
   return thumbHashToDataURL(thumbhashBytes);
 }
 
-export { encryptFile, fetchAndDecryptMedia, decryptThumbhashToDataURL };
+export {
+  encryptFile,
+  fetchAndDecryptMedia,
+  useFetchAndDecryptMedia,
+  decryptThumbhashToDataURL,
+};
diff --git a/web/media/loadable-video.react.js b/web/media/loadable-video.react.js
index a6c53f696..c46038881 100644
--- a/web/media/loadable-video.react.js
+++ b/web/media/loadable-video.react.js
@@ -1,98 +1,105 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
-import { fetchAndDecryptMedia } from './encryption-utils.js';
+import { useFetchAndDecryptMedia } from './encryption-utils.js';
 import { preloadImage } from './media-utils.js';
 import type { CSSStyle } from '../types/styles';
 
 type ThumbnailSource =
   | {
       +thumbnailURI: string,
     }
   | {
       +thumbnailBlobURI: string,
       +thumbnailEncryptionKey: string,
     };
 type Props = {
   +uri: ?string,
   +thumbnailSource: ThumbnailSource,
   +thumbHashDataURL?: ?string,
   +elementStyle?: ?Partial<CSSStyle>,
   +multimediaClassName?: string,
 };
 
 function LoadableVideo(props: Props, videoRef: React.Ref<'video'>): React.Node {
   const {
     uri,
     thumbHashDataURL,
     thumbnailSource,
     elementStyle,
     multimediaClassName,
   } = props;
   const { thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey } =
     thumbnailSource;
 
   const [thumbnailImage, setThumbnailImage] = React.useState<?string>(null);
 
+  const fetchAndDecryptMedia = useFetchAndDecryptMedia();
+
   React.useEffect(() => {
     let isMounted = true,
       uriToDispose;
     setThumbnailImage(null);
 
     void (async () => {
       if (thumbnailURI) {
         await preloadImage(thumbnailURI);
         if (isMounted) {
           setThumbnailImage(thumbnailURI);
         }
         return;
       }
 
       invariant(
         thumbnailBlobURI && thumbnailEncryptionKey,
         'invalid encrypted thumbnail source',
       );
       const { result } = await fetchAndDecryptMedia(
         thumbnailBlobURI,
         thumbnailEncryptionKey,
       );
       if (isMounted && result.success) {
         setThumbnailImage(result.uri);
         uriToDispose = result.uri;
       }
     })();
 
     return () => {
       isMounted = false;
       if (uriToDispose) {
         URL.revokeObjectURL(uriToDispose);
       }
     };
-  }, [thumbnailURI, thumbnailBlobURI, thumbnailEncryptionKey]);
+  }, [
+    thumbnailURI,
+    thumbnailBlobURI,
+    thumbnailEncryptionKey,
+    fetchAndDecryptMedia,
+  ]);
 
   let videoSource;
   if (uri) {
     videoSource = <source src={uri} />;
   }
   const poster = thumbnailImage ?? thumbHashDataURL;
   return (
     <video
       controls
       poster={poster}
       className={multimediaClassName}
       style={elementStyle}
       ref={videoRef}
     >
       {videoSource}
     </video>
   );
 }
 
 const MemoizedLoadableVideo: React.AbstractComponent<Props, HTMLVideoElement> =
   React.memo<Props, HTMLVideoElement>(
     React.forwardRef<Props, HTMLVideoElement>(LoadableVideo),
   );
 
 export default MemoizedLoadableVideo;