Calling flask api from react spa returns 403 /url forbidden-

Help
, ,
1

Hey there,
I’m testing a logged in user make an api call to delete a product item against a flask api. I see the console and network tab return Delete 403 forbidden even tho I’m passing the right product id to the url in the fetch call. The login works fine and i get the needed token bearer to access the resource. I’ve also checked the jwt.io and it has the proper scopes, delete:products in this case.
I tried to wrap fetch call in a useEffect hook but couldn’t make it work, something about not being a custom hook. Until can figure it out the issue, I decided to use plain fetch function.
What’s missing on this call?
Thanks in advance.

const ProductPreview = ({id, title, release_date, onRemove}) => {

const {getTokenSilently} = useAuth0()

const handleRemoveProduct = async () => {
const token = await getTokenSilently()
console.log('token log: ', token)
console.log('id log ', id)

const confirm = window.confirm(`Are you sure you want to delete ${title}?`)

if (confirm){
    fetch(`https://mysite.herokuapp.com/products/${id}`, {
        method:'DELETE',
        headers:{
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json;charset=UTF-8'                  
        }
    })
    .then(() => {
        onRemove(id)
    })
    .catch(error => console.error('error============:', error));

}

2

Never mind I’ve solved the issue. Yet, still working to refactor the fetch call into a useeffect hook. :+1: