Authorization token fails when using string interpolation in React component

[gueronlj]

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?

[dan.woda]

Hi @gueronlj,

Welcome to the Auth0 Community!

Were you able to figure this out? I would expect string interpolation to work correctly in the code you posted.

Also, you are saying the request has the correct header when you inspect it in dev tools? Can you post an example of what you are seeing when you get the 401?

[gueronlj]

Thank you for your time!

Request Headers:
GET /admin HTTP/1.1
Accept: application/json, text/plain, /
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Authorization: Bearer eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9kZXYtcnFidm11YndjNnhlb2dkbi51cy5hdXRoMC5jb20vIn0…GyXah35kawdrnt9P.Y1WDMHemMYcocSR5we2OvKl3o2cFOpKEqK7_A7i3Gkdb7nOdMfDD484qnvlTAiX-LNbZ8IbuOv28SLhyrD57r4QIqk4GwRNHxeFM4eodQEgrBMKHTgNKGAMlFhTpIJ7VJws-9SJQg43_WmuIaNdJYI56bjgXTW2tQZ4cdoLbYa-p1uagndLPkO47fO61QIpZhgbeSumwQ-E9JRH6N4J70KhtNt_EQ-mz3XIB6PM1xeKXRmXT0W2l_L7ooZlKqI4MfSafFn7JbQD37Jd9a-F0Q1ZlkZXmC_BQr_w7qiFiolOch2HefFLEKiFEKOpwk7sbmhHaMeIOTVZiMJZnPcSP_FYG2Pbm9vM.uZIm-l-ZmmI3cVujT_8vgg
Connection: keep-alive
Host: localhost:3001
If-None-Match: W/“ab2-QsivWkd5sG2uiDS3bEN8Pj4iuTs”
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36
sec-ch-ua: “Google Chrome”;v=“111”, “Not(A:Brand”;v=“8”, “Chromium”;v=“111”
sec-ch-ua-mobile: ?1
sec-ch-ua-platform: “Android”

Response Headers:
HTTP/1.1 401 Unauthorized
X-Powered-By: Express
Access-Control-Allow-Origin: *
WWW-Authenticate: Bearer realm=“api”, error=“invalid_token”, error_description=“Invalid Compact JWS”
Content-Security-Policy: default-src ‘none’
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 594
Date: Fri, 24 Mar 2023 20:13:16 GMT
Connection: keep-alive
Keep-Alive: timeout=5