Here is my code
import { useEffect, useState } from "react"
import { useAuth0 } from '@auth0/auth0-react';
import axios from 'axios'
const useAxiosRequest = async (url) => {
const { getAccessTokenSilently } = useAuth0();
const [data, setData] = useState(null);
const [error, setError] = useState("");
useEffect(() => {
console.log(url);
async function fetchData(url){
try {
const token = await getAccessTokenSilently({
authorizationParams: {
audience: url,
scope: 'user:admin',
}
})
console.log(token);
const options = {
method: "get",
url: url,
headers: {
Authorization: `Bearer ${token}`
}
}
const response = await axios(options)
console.log(response.data);
setData(response.data);
} catch (e) {
console.log(e)
setError(e)
}
}
fetchData(url)
}, [url]);
return { data, error};
}
export default useAxiosRequest
getAccessTokenSilently() retrieves the right token as seen by my console.log. But when i try to interpolate the token variable, i get a 401 (unauthorized) response. If i hardcode my token, I get my data from my API. I inspected the request in chrome dev tools and it is sending the right authorization object. Am I crazy?