How to get authenticated requests to Google Cloud Storage from NextJS app?

Question

I'm using a Cloud Storage instance to store images on my NextJS web app.

I refer to the images like so:

... some code
image="https://storage.cloud.google.com/{my-project}/myimage.jpg"
... some more code 

I get an error as such:

GET http://localhost:3000/_next/image?url=https%3A%2F%2Fstorage.cloud.google.com{image link to Cloud Storage} 400 (Bad Request) 

After some reading of docs I found that I have my Firestore settings to non-public so only certain authenticated users can access cloud content.

I can't specify a user since my local developer environment is running on localhost and I don't know how Firebase will see my requests since I'm already logged in with gcloud auth login on my local machine.

I have configured and restarted my server with the added next.config.js :

module.exports = {
    images: {
        domains: ["storage.cloud.google.com"]
    }
}

I see there's an answer Frontend Authenticated request Google Cloud Storage which explains using a token but I'd like to not have another token to manage. Is there a solution where I can manage the access using a Service Account?

I'd like to avoid making all the images public with this solution .

I do not want to download the image as mentioned inthe docs .

Answer 1

I found that the bucket could be restricted but if the link with the access token is used, then the image will be accessed.

https://firebasestorage.googleapis.com/v0/b/{project-id}/o/{image path}?alt=media&token={token}

This is not the ideal way I want since the token can be viewed on the source code and makes the image bucket accessible virtually publicly.