How to access a private image stored in Google Cloud Storage bucket? A React application is the one accessing to be used in image tag

user_14398181 0
Viewed 561

Goal: To have a long-lived private/secure URL to which the backend (node) can give to a frontend (react) for the image tag. This means that only from that React app can the URL be accessed to display in the image tag.

Issue: The image is stored in a Google Cloud Storage bucket. The image is not set to public, so when the React app accesses the URL (mediaLink) of the image, it gets 403 error because the react app doesn't have an access to the bucket. Only the backend (node) has the Service Account to have an access to the Google Cloud Storage bucket.

Other info:

  • The image file has a counterpart entity in MongoDB. The entity has a field of URL. The React app is using the URL field of the image entity to display it using the image.
  • We are not using Firebase.
  • Signed URL is not an option because it can only live for a max of 7 days. This is not a good solution because, let's say we have 1000 images, it's a waste of resource/operation when you want to update the URL field of those images in the database with the newly generated Signed URL. This will be repeated after 7 days expiration of previous Signed URL.
google-cloud-storage reactjs node.js google-cloud-platform
1 Answers

Signed URLs would be the best fitting solution for the problem you are describing, but if it's not an option for other reasons I would say that you will have to create a backend endpoint that retrieves that image impersonating a Service Account which will an access that does not expire.

In summary, you are going to have to choose were to are going to compromise, either creating extra calls to your backend or extra operations to retrieve new Signed URLs after 7 days.

user_128577030
Related