Incompatibility with Updated Firebase Storage Bucket Naming Convention

[yelang-moon]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

FlutterFlow attempts to upload images to Firebase Storage using the previous default bucket URL format (https://firebasestorage.googleapis.com/v0/b/nextlife-dev.appspot.com). This results in CORS errors when interacting with newly created storage buckets that follow Firebase's updated naming convention (*.firebasestorage.app).

Expected Behavior

FlutterFlow should detect and adapt to the current default bucket naming convention used by Firebase. Additionally, it should provide users with the ability to specify a custom storage bucket name within FlutterFlow settings to accommodate various project requirements.

Steps to Reproduce

1. Create a new Firebase project after October 30, 2024.
2. Set up Firebase Storage, noting the default bucket name follows the *.firebasestorage.app format.
3. In FlutterFlow, attempt to upload an image to Firebase Storage.
4. Observe the CORS error due to the mismatch in bucket naming conventions.

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFfivHq4c9OseFd7q6JK8FWmSk4QlMcTeU30+thcw4bI+PtB4lzZuPOT1VDWOqHf1A2M2CbgkUF7vDsvdnxLccCIk+cbbpAyKphUxDvVl2mRZfXBpeNPXF9O/FMCHax0pi02AolJs5uLnNh20+QIfOQa3qCf9qOYwx5e6fDbOY=

Visual documentation

Environment

- FlutterFlow version: any
- Platform: any
- Browser name and version: any
- Operating system and version affected: any

Additional Information

No response

[Alezanello]

Hello!!

This is not a FlutterFlow issue. To resolve this, you'll need to configure CORS (Cross-Origin Resource Sharing) for your newly created Firebase Storage Bucket. There are several ways to accomplish this, and you may find this helpful: StackOverflow discussion and possible solution.

[yelang-moon]

Hello,

Thank you for your response. I understand that you've provided a link to address CORS issues; however, the problem I'm encountering is related to a recent change in Firebase's default bucket naming convention, not CORS.

Issue Overview:

As of October 30, 2024, Firebase has updated the default naming convention for Cloud Storage buckets. Previously, the format was PROJECT_ID.appspot.com, but it has now changed to PROJECT_ID.firebasestorage.app. This change is documented in Firebase's official Get Started with Cloud Storage on Web guide.

Impact on FlutterFlow:

In FlutterFlow, when utilizing the image upload functionality, the system attempts to send HTTP requests to https://firebasestorage.googleapis.com/v0/b/[PROJECT_NAME].appspot.com. Due to Firebase's updated naming convention, this results in errors for projects created after October 30, 2024, as the expected bucket name now ends with .firebasestorage.app. (It has to request to https://firebasestorage.googleapis.com/v0/b/[PROJECT_NAME].firebasestorage.app)

For example below curl request works (Note, I requested to https://.....firebasestorage.app)

curl 'https://firebasestorage.googleapis.com/v0/b/nextlife-dev.firebasestorage.app/o?name=users%2FQh3M6QJ7FfXhc76T16fsnHvQbdd2%2Fuploads%2F1731202861126000.txt' \ -H 'X-Firebase-Storage-Version: webjs/10.11.1' \ -H 'Authorization: Firebase {AUTH}' \ -H 'sec-ch-ua-platform: "macOS"' \ -H 'Referer: https://ff-debug-service-frontend-free-ygxkweukma-uc.a.run.app/' \ -H 'sec-ch-ua: "Google Chrome";v="129", "Not=A?Brand";v="8", "Chromium";v="129"' \ -H 'sec-ch-ua-mobile: ?0' \ Chrome/129.0.0.0 Safari/537.36' \ -H 'Content-Type: application/json' \ --data-raw '{ "asdfasdfasdf" :"asdfadsfa"}

But this is not working (Note, I requested to https://.....appspot.com)

curl 'https://firebasestorage.googleapis.com/v0/b/nextlife-dev.appspot.com/o?name=users%2FQh3M6QJ7FfXhc76T16fsnHvQbdd2%2Fuploads%2F1731202861126000.txt' \ -H 'X-Firebase-Storage-Version: webjs/10.11.1' \ -H 'Authorization: Firebase {AUTH}' \ -H 'sec-ch-ua-platform: "macOS"' \ -H 'Referer: https://ff-debug-service-frontend-free-ygxkweukma-uc.a.run.app/' \ -H 'sec-ch-ua: "Google Chrome";v="129", "Not=A?Brand";v="8", "Chromium";v="129"' \ -H 'sec-ch-ua-mobile: ?0' \ Chrome/129.0.0.0 Safari/537.36' \ -H 'Content-Type: application/json' \ --data-raw '{ "asdfasdfasdf" :"asdfadsfa"}

Request for Resolution:

To address this issue, I recommend updating FlutterFlow's image upload functionality to accommodate Firebase's new bucket naming convention. This adjustment will ensure compatibility for all users, especially those who have created projects after the naming convention change.

Thank you for your attention to this matter. @Alezanello

[yelang-moon]

Would you please check my comment, please? @Alezanello

[FFX3]

I have the exact same issue

[yelang-moon]

It seems my report might have been overlooked. This should be a straightforward fix, and I hope it gets addressed soon

[FFX3]

Hello!!

This is not a FlutterFlow issue. To resolve this, you'll need to configure CORS (Cross-Origin Resource Sharing) for your newly created Firebase Storage Bucket. There are several ways to accomplish this, and you may find this helpful: StackOverflow discussion and possible solution.

He's getting a CORS error because the bucket doesn't exist, not because it's an actual CORS issue, because google changed how they name the buckets and there's seemingly no way to change the name of the bucket through FlutterFlow.

[yelang-moon]

@Alezanello Last reminder. It's not CORS;

[yelang-moon]

@FFX3 FYI I gave up and switched to Supabase. And it works. And make sure to create the bucket as public. It only works in public. because uploadedImageUrl in the widget state will be saved as a public url path.

[yelang-moon]

@FFX3 Check this out~ https://community.flutterflow.io/ask-the-community/post/firebase-default-naming-convention-changed-it-conflicts-with-image-pHcnFOwjHyGK11K just Regenerate the Config Files! It will fix the problem