access-sensitive-information.js

const [message, setMessage] = useState(false);
const accessSensitiveInformation = useCallback(async () => {
  try {
    if (!auth.isLoading) {
      const accessToken = auth.userData?.id_token;
      const sensitiveInformationURL = `${process.env.REACT_APP_API_ORIGIN}/api/protected`;
      const sensitiveDataResponse = await fetch(sensitiveInformationURL, {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });
      try {
        const res = await sensitiveDataResponse.json();
        setMessage(res.secretMessage);
      } catch (e) {
        //In case no access is given, the response will return 403 and not return a JSON response
        setMessage(sensitiveDataResponse.status);
      }
    }
  } catch (e) {
    console.log(e.message);
  }
}, [auth.isLoading, auth.userData?.id_token]);