Firebase with Web Component

[D_M]

Hi @TIMAI2
I've solved all the problems with RealTime Database and now I've switched to Storage.
I've been able to save, retrieve, and delete images in Storage.
Now I'd like to do the same thing by applying the rules in Storage with anonymous authentication.
I set the rule in Storage (and it works well because I tested it with Playground).

INTRODUCTION
I'm following your guide "PART III - Firebase Demo: Secured with Web Component"

QUESTION 1
To display images (described in the "Download a file" section of your guide), I'm using the "World readable" approach (will display image in image component), so I add in blocks "&token=".
Everything works! But my question is: when users of my app will create images, will also be created for each image. How can I retrieve the specific values ​​for each image? (Now, for my tests, I had to copy and paste from the Firebase console from the Storage area... but how will my app do this automatically?)

QUESTION 2
"Upload a file" and "Delete a file" return a 403: permission denied error.
In my blocks, I called the idToken... the same one obtained during signin and used for RealTime DB.

What am I doing wrong?

[TIMAI2]

@D_M

QUESTION 1

Your app will need to capture the response content after a file upload, extract the url, and then store this in the realtime database in the correct place (along with the other associated data...)

@D_M

QUESTION 2

I will need to do some testing to be able to answer your question here. The only thing, after first review, I see that is different is the use of firebasestorage.app after the bucket in your urls.

[TIMAI2]

Ref: QUESTION 2

Not having any issues uploading or downloading/viewing files with secure rules in place, FOLLOWING MY GUIDE. I did not use the firebasestorage.app after the bucket.

You may have more success if you simply set your storage secure rules to {bucket} ?

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

[D_M]

Hi @TIMAI2, I'm working in QUESTION 2 first.
In your guide you put

I have not an "appspot.com", but firebasestorage.app as you can read in Firebase FAQ
"Starting October 30, 2024, all new default Cloud Storage buckets have the name format PROJECT_ID.firebasestorage.app. Any default buckets created before that date have the name format PROJECT_ID.appspot.com."

The structure of my storage is
PROJECT_ID.firebasestorage.app/TEST/... pictures list...

How my rule should be?

In my blocks, what is the token I have to retrieve: idToken or refreshToken?

[TIMAI2]

@D_M

How my rule should be?

Working on this with a firebasestorage.app designated project, but it should look like:

rules_version = '2';

service firebase.storage {
  match /b/myProject.firebasestorage.app/o {
    match /FBDEMO/{allPaths=**} {
      allow read: if request.auth != null
      allow write:  if request.auth != null;
    }
  }
}

.
.

@D_M

In my blocks, what is the token I have to retrieve: idToken or refreshToken?

idToken.

That said, you will need to build in the logic to handle:

The absence of a valid idToken, for which you require the refreshToken.

[TIMAI2]

Now tested with a firebasestorage.app only project (new project that doesn't use appspot)

Used these rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
      match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Uploading, downloading and viewing/displaying files works as expected. Example procedures below:

[D_M]

Hi @TIMAI2... I don't know what I can do...

My blocks to save image with rules are like yours

I tested with and without "file://" in file path...
I har made a copy-past of your rule

rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}

My idToken should be ok because is the same I use in the app with Realtime and it works...

Permission error is still there...

[TIMAI2]

Show the error

[D_M]

This is error I show in a label

I'm testing many possibilities from the web...
I have tested to eliminate "_" from the file name in web1 url... nothing
I have tested to separate the rules write/read in 2 lines... nothing

Very strange!!

[TIMAI2]

Do you have space after Bearer in you headers?

[D_M]

No, there is not a space.

[TIMAI2]

You need a space:

Bearer sdjk;oijggnvn;igj;

instead of:

Bearersdjk;oijggnvn;igj;

[D_M]

As I said in past... YOU ARE A GENIOUS!!!!!!!

Now it works!!!!!!!

Thank you thank you thank you!!!!
Without your help I never would have solved this!