Display Firebase Storage images on a website while enforcing security rules?

We are going to build Angular app that displays some images from our Firebase database to the user.

From Firebase documentation I understand the way to do this is getting download link and use it as src of img html tag:

const storageRef = firebase.storage().ref()
const uid = firebase.auth().currentUser.uid
const imageRef = storageRef.child(`images/${uid}/photo.png`)
const downloadLink = imageRef.getDownloadURL()

Content of downloadLink is then passed to src of img tag.

The problem is that .getDownloadURL() seems to generate public download link that does not enforce Firebase Storage Security Rules. So not only currently signed in user (who has permissions to access that image) can follow this link but anybody with the link can. Even if the authorized user just copy the image link and post it on their Facebook, any of their friends will be able to see the image. We do not want to user to be able to share image links - there might even be legal trouble with that.

These are our Storage Security Rules:

service firebase.storage {
  match /b/XXXXXXXXX.appspot.com/o {
    match /images/{uid}/{allPaths=**} {
      allow read, write: if request.auth.uid == uid;

Is there a way how to enforce user based security rules with Firebase Storage when displaying images on web?