Using async/await inside a React functional component

You will have to make sure two things

useEffect is similar to componentDidMount and componentDidUpdate, so if you use setState here then you need to restrict the code execution at some point when used as componentDidUpdate as shown below:

function Dashboard() {
  const [token, setToken] = useState('');

  useEffect(() => {
    // You need to restrict it at some point
    // This is just dummy code and should be replaced by actual
    if (!token) {
        getToken();
    }
  }, []);

  const getToken = async () => {
    const headers = {
      Authorization: authProps.idToken // using Cognito authorizer
    };
    const response = await axios.post(
      "https://MY_ENDPOINT.execute-api.us-east-1.amazonaws.com/v1/",
      API_GATEWAY_POST_PAYLOAD_TEMPLATE,
      { headers }
    );
    const data = await response.json();
    setToken(data.access_token);
  };

  return (
    ... rest of the functional component's code
  );
}

With React Hooks, you can now achieve the same thing as Class component in functional component now.

import { useState, useEffect } from 'react';

const Dashboard = props => {
  const classes = useStyles();
  const [token, setToken] = useState(null);
  useEffect(() => {
     async function getToken() {
         const token = await fetchKey(props.auth);
         setToken(token);
     }
     getToken();
  }, [])


  return (
  ... rest of the functional component's code
  // Remember to handle the first render when token is null

Also take a look at this: Using Async await in react component

Component might unmount or re-render with different props.auth before fetchKey is resolved:

const Dashboard = props => {
  const classes = useStyles();

  const [token, setToken] = useState();
  const [error, setError] = useState();
  
  const unmountedRef = useRef(false);
  useEffect(()=>()=>(unmountedRef.current = true), []);

  useEffect(() => {
    const effectStale = false; // Don't forget ; on the line before self-invoking functions
    (async function() {
      const response = await fetchKey(props.auth);

      /* Component has been unmounted. Stop to avoid
         "Warning: Can't perform a React state update on an unmounted component." */
      if(unmountedRef.current) return;

        /* Component has re-rendered with different someId value
         Stop to avoid updating state with stale response */
      if(effectStale) return;

      if(response instanceof Error)
        setError(response)
      else
        setToken(response);
    })();
    return ()=>(effectStale = true);
  }, [props.auth]);

  if( error )
    return <>Error fetching token...{error.toString()}</>
  if( ! token )
    return <>Fetching token...</>

  return //... rest of the functional component's code

An alternative is using Suspense and ErrorBoundary:

// render Dashboard with <DashboardSuspend>

const Dashboard = props => {
  const classes = useStyles();
  
  const [token, idToken] = props.tokenRef.current || [];

  // Fetch token on first render or when props.auth.idToken has changed
  if(token === void 0 || idToken !== props.auth.idToken){
    /* The thrown promise will be caught by <React.Suspense> which will render
       it's fallback until the promise is resolved, then it will attempt
       to render the Dashboard again */
    throw (async()=>{
      const initRef = props.tokenRef.current;
      const response = await fetchKey(props.auth);
      /* Stop if tokenRef has been updated by another <Dashboard> render,
         example with props.auth changed causing a re-render of 
         <DashboardSuspend> and the first request is slower than the second */
      if(initRef !== props.tokenRef.current) return;
      props.tokenRef.current = [response, props.auth.idToken];
    })()
  }

  if(props.tokenRef.current instanceof Error){
    /* await fetchKey() resolved to an Error, throwing it will be caught by 
       <ErrorBoundary> which will render it's fallback */ 
    throw props.tokenRef.current
  }

  return //... rest of the functional component's code
}

const DashboardSuspend = props => {

  /* The tokenRef.current will reset to void 0 each time this component is
     mounted/re-mounted. To keep the value move useRef higher up in the 
     hierarchy and pass it down with props or useContext. An alternative
     is using an external storage object such as Redux. */
  const tokenRef = useRef();

  const errorFallback = (error, handleRetry)=>{
    const onRetry = ()=>{
      // Clear tokenRef otherwise <Dashboard> will throw same error again
      tokenRef.current = void 0;
      handleRetry();
    }
    return <>
      Error fetching token...{error.toString()}
      <Button onClick={onRetry}>Retry</Button>
    </>
  }

  const suspenseFallback = <>Fetching token...</>

  return <ErrorBoundary fallback={errorFallback}>
    <React.Suspense fallback={suspenseFallback}>
      <Dashboard {...props} tokenRef={tokenRef} />
    </React.Suspense>
  </ErrorBoundary>
}

// Original ErrorBoundary class: https://reactjs.org/docs/error-boundaries.html
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }
    static getDerivedStateFromError(error) {
        // Update state so the next render will show the fallback UI.
        return { error };
    }
    componentDidCatch(error, errorInfo) {
        // You can also log the error to an error reporting service
        console.log(error, errorInfo);
    }
    render() {
        if (this.state.error) {
            // You can render any custom fallback UI
            const handleRetry = () => this.setState({ error: null });
            return typeof this.props.fallback === 'function' ? this.props.fallback(this.state.error, handleRetry) : this.props.fallback
        }
        return this.props.children;
    }
}

const token = fetchKey(props.auth);

This returns a promise. To get the data from it, this is one way to do it:

let token = null;
fetchKey(props.auth).then(result => {
  console.log(result)
  token = result;
}).catch(e => {
  console.log(e)
})

Let me know if that works.

I recreated a similar example: https://codesandbox.io/embed/quiet-wood-bbygk