Next/Image + Firebase Storage 403 Error on read

user_13112154 0
Viewed 1460

I'm trying to use Image from next/image and am using firebase storage to store the image files.

However I'm getting a 403 (forbidden) error when doing the following:

<Image src={profilePicURL} ...otherProps/>

I've tried using with <img> instead and the url works fine, so I don't think it's a url or permissions issue.

Does anyone know what the issue could be?

next.config.js

module.exports = withBundleAnalyzer({
   distDir: 'dist',
   images: {
      domains: ['firebasestorage.googleapis.com'],
   },
   webpack(config) {
      // config stuff
      return config
   }
})

Firebase Storage Rules

match /profilePicture/{userID}/{fileName} {
   allow read: if request.auth != null;
   allow write: if request.auth.uid == userID;
}
next-images firebase-storage firebase next.js
1 Answers

same here. 403 error is Permission denied error. I accessed url https://firebasestorage.googleapi.com... that is the string after url query with browser and got 403 also.

This caused your Firebase Storage Rules is wrong. Next.js use next/image to optimize and cache image, so request.auth is always null.

So fix it.

match /profilePicture/{userID}/{fileName} {
   allow read: if true;
   allow write: if request.auth.uid == userID;
}
user_111838600
Related