Missing key when requesting video in Safari on iOS 13.6

I'm requesting videos from Cloudfront that require cookie authentication.

This works perfectly on iOS usually but I've run into a problem on iPad on 13.6,

S3 is returning the following error:

<?xml version="1.0" encoding="UTF-8"?><Error><Code>MissingKey</Code><Message>Missing Key-Pair-Id query parameter or cookie value</Message></Error>  

The video source is set as such

   const source = document.createElement('source')          source.setAttribute('src', updateFilename(filename, asset.isPublic, asset.organisationId))          source.setAttribute('id', asset.id)          source.setAttribute('preload', true)          source.setAttribute('type', 'video/mp4')          //source.setAttribute('crossorigin', 'use-credentials')  

I've tried with or without setting the crossorigin.

How do I fix this on iOS 13.6 ?

Thanks

https://stackoverflow.com/questions/65895756/missing-key-when-requesting-video-in-safari-on-ios-13-6 January 26, 2021 at 12:05PM