Problem Uploading large Files to Firebase Storage with NextJS

[Alex Alber]

Hi! At Fuxam, we are currently using NextJS API routes to upload files to our firebase storage bucket, but the serverless functions unfortunately have a 4.5mb limit. Vercel recommends uploading files directly from the frontend, which can easily be done with presigned URLs but since firebase (correct me if I’m wrong) doesn’t offer this feature, we are a bit lost.

We have set up CORS, but our bucket rules currently still allow all operations to all paths. We do not use firebase authentication because we have implemented one with a separate service (Clerk.com ). When trying to send our own request.auth header along with our requests, we couldn’t access any files at all anymore. What would be the right way to restrict access to certain paths in our bucket in this case? Also how can we ensure that nobody can intercept and modify the request headers if they are being sent directly from the frontend? Thanks a lot for your help!

[jamesd...@google.com]

While the Firebase SDK doesn't offer a mechanism for this—instead leaning on Authentication and security rules—Cloud Storage for Firebase is backend by Google Cloud Storage.  The ability to upload to a Cloud Storage signed url is documented here https://cloud.google.com/storage/docs/access-control/signed-urls#string-components and a solution presented in this blog post https://cloud.google.com/blog/products/storage-data-transfer/uploading-images-directly-to-cloud-storage-by-using-signed-url