How to use a token with axios?

Help
15

Thanks for confirming. I’ve played around with this a bit and I think because useAxios is a hook, it would be challenging to use this with getAccessTokenSilently since you can’t use a hook within useEffect. You may need to use Axios alone within useEffect so that you can get the accessToken before making the request:

import React, { useEffect, useState } from "react";
import { Container, Row, Col } from "reactstrap";

import Highlight from "../components/Highlight";
import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
import Axios from "axios";

export const ProfileComponent = () => {
  const { user, getAccessTokenSilently } = useAuth0();
  const [groups, setGroupsData] = useState(null);

  useEffect(() => {
    const getUserMetadata = async () => {
      try {
        const accessToken = await getAccessTokenSilently();
        const groupData = await Axios.get(`https://jsonplaceholder.typicode.com/users`, {
          headers: {
            Authorization: `bearer ${accessToken}`
          }
        });
        setGroupsData(groupData);
      } catch (e) {
        console.log(e.message);
      }
    };
  
    getUserMetadata();
  }, []);

  return (
    <Container className="mb-5">
      <Row>
        <Highlight>{JSON.stringify(groups, null, 2)}</Highlight>
      </Row>
      <Row>
        <Highlight>{JSON.stringify(user, null, 2)}</Highlight>
      </Row>
    </Container>
  );
};

export default withAuthenticationRequired(ProfileComponent);