Serving images when Payload app is behind Google Cloud IAP

bitammer3 months ago

7

• 

  wkd10793 months ago

  your read on the problem sounds correct. is it possible to authenticate to IAP with a service account on the server? i assume your frontend is hosted on vercel

  
  
  

  alternatively you can configure payload to return your raw GCS urls directly instead of the

  /api/media

  proxy URL. you lose access control etc in this scenario but that's a quick and easy solution

  
  
  

  first option seems possible

  
  
  https://cloud.google.com/iap/docs/service-accounts-external-identities
  
  https://cloud.google.com/iap/docs/authentication-howto
• 

  bitammer3 months ago

  Access control is a none issue in this case so having Payload return the raw GCS urls is perfect. I had tried finding how to do that before bug couldn't - is this an option in the cloud storage plugin or elsewhere?

  
  
  

  Looks like this can be done with an afterRead hook to rewrite the URL.

• 

  dracoblue233 months ago

  I like this approach.

  
  
  

  I did it in such way to add a custom route.ts to deliver the file (thumbnails in my case) and call it with the give file.

  
  
  https://gist.github.com/DracoBlue/d62b281dae26ce57f0a709fc971fced7
  
  

  I hope this helps if you need another approach.

• 

  wkd10793 months ago

  In v2 there’s a first class way to do this by just specifying “disablePayloadAccessControl: true” in your adapter config. Then the file prop just points directly to the external asset. Not sure how to do it in v3

• 

  samuelkblast month

  hey

  @923344261477457920

  I have a similar issue, also storing my images in GCS, but my website is in Cloud Run. Images all load and show perfectly fine in admin. But return 400 in the frontend request. Im using v3 of payload, did you find out the solution? did it require to write custom Media components?

  
  

  Curious if you could share the afterRead hook

  
  

  thnaks in advance for helping!

• 

  bitammerlast month

  No solution found here I'm afraid. We just decided to not use IAP but instead just use IP filtering to keep it private while we develop.

• 

  samuelkblast month

  I see, thanks

  @923344261477457920

  , I did a workaround to "fix" the 400, modifying the website example's Image media component, from assembling the src:

  
  

  src = `${getClientSideURL()}${url}?cache=${cacheTag}`

  
  
  

  to

  
  

  src = `${url}?cache=${cacheTag}`

  
  

  I havent seen yet implications of that change, but my website is pretty small, so anyways, I do some stuff in GCP, happy to find someone else using that one.