Flutter web : I am getting 403 permission denied error after implementing Firebase app check

Question

Flutter Firebase - App Check

Flutter Web

Before hand, I uploaded the images to bucket manually. I need help to fetch the data from firebase storage bucket.

I was trying to fetch images stored as jpeg format in 1920x1080p resolution.

Future<String> imageData = FirebaseStorage.instance
    .ref()
    .child('images')
    .child('panda_16x9.jpeg')
    .getDownloadURL();

Then i am passing imageData to FutureBuilder

FutureBuilder<String>(
future: imageData,
builder: (context, imageUrl) {
  if(imageUrl.hasError) {
    return __(widget saying error)__
  }
  if(imageUrl.hasData) {
    return Image.network(imageUrl.data!);
  }
  return __(loading widget)__
});

I also tried getting data is Uint8List but no success because the main issue is Permission Denied from server

Issues

initially was getting cors error
- no "access-control-origin-access" on the Request Response header.
- fixed it by going to GCP and opening the cloud shell and adding the cors rules.
- Open Google Cloud Console
- Select the project same as firebase project
- open the cloud shell
- The create a file touch cors.json
- use vim to edit vim cors.json
```
[
 {
  "origin":["*"], // In production we will replace it with original domain name
  "method":["GET","POST","UPDATE","DELETE"],
  "header":["Access-Control-Allow-Origin"],
  "maxAgeSeconds":3600,
 }
]
```
- run command gsutil cors set cors.json gs://<your-bucker>
You can find the bucket url from firebase storage section
After i fixed the cors issue, i starting getting Invalid App Check token
- It was an easy fix. Just needed to follow as per guide
- I am now getting error "Permission Denied" 403 Status Code

App check invalid token is gone	but, getting Permission Denied 403 Error Code

what do you want to achieve actually? Can your share any image or link of your expected result? — Diwyansh, Nov 23 '21 at 15:40
Can you clarify the question by including `DescriptionCard` and what is `media`? — Md. Yeasin Sheikh, Nov 23 '21 at 15:45
`'Part A', width: media.size.width,` is already having maxwidth, rebuild the app, it will fix the UI view and share the issue — Md. Yeasin Sheikh, Nov 23 '21 at 15:55
please check the question, that is what i am trying to achieve — Dishank Jindal, Nov 23 '21 at 16:36
Does your rules on Firebase Storage allow you to access the resource?. Does it require login?, does the default time to access it has been reached?, etc. — Cavitedev, Nov 29 '21 at 08:13
Have you added recaptcha-v3-site-key in code? ```await FirebaseAppCheck.instance.activate(webRecaptchaSiteKey: 'recaptcha-v3-site-key');``` Where 'recaptcha-v3-site-key' should be replaced with your key — Shatanik Mahanty, Nov 29 '21 at 13:25

Ben Butterworth · Accepted Answer · 2021-12-02T07:21:44.237

You haven't mentioned if you set up reCAPTCHA or configured WebApp in your Firebase project.

Register your website for reCAPTCHA

You can register your website on the Admin page. If you want to develop your website locally, you need to visit 127.0.0.1 or add localhost to the domains. See Using reCAPTCHA on localhost.

Then, configure the app in your firebase project.

Go to Project Settings > App Check > And add the reCAPTCHA secret key.

Then enter the key:

Once App Check is configured correctly, then storage could potentially work.