supabase download image bad request headers should have required property 'authorization'-CodePudding

im having trouble downloading an image from supabase. I get this errror

{
"statusCode": "400",
"error": "Bad Request",
"message": "headers should have required property 'authorization'"
}

I've followed the docs https://supabase.io/docs/guides/with-nextjs

here is my code for the request

const myQuote = ({ dataFetch }) => {
  const [avatarUrl, setAvatarUrl] = useState(null);

  async function downloadImage(path) {
    try {
      const { data, error } = await supabase.storage
        .from("job-photo")
        .download(`jobphotos/${path}.jpg`);
      if (error) {
        throw error;
      }
      const url = URL.createObjectURL(data);
      setAvatarUrl(url);
    } catch (error) {
      console.log("Error downloading image: ", error.message);
    }
  }

  return (
    <>
      <Dashboard />
      <QuoteTable tableData={dataFetch} downloadImg={downloadImage} />
    </>
  );
};

export default myQuote;

CodePudding user response：

Managed to get it working by adding public/ to from

 const { data, error } = await supabase.storage
        .from("public/job-photo")
        .download(`jobphotos/${path}.jpg`);

CodePudding user response：

do you have the following code?

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)