Use access token from first fetch in a second fetch API in React JS

Question

As a newbie to React I have been stuck for awhile on how to get my access token to be put to use in a second fetch API. In the first fetch (Get token), I am able to successfully print my access token to the console. My issue is how to then use this token as the Bearer authorization in the second fetch (Get data). Any direction is appreciated.

Update 3/5/2022: I was able to get the data to log to the console in JSON format with the key of access_token. Still cannot get to use in the second fetch though.

App.js (with some private data redacted):

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      airData: []
    }
   }

componentDidMount(){

//Get token
var urlencoded = new URLSearchParams();
urlencoded.append("code", "MY_API_KEY");

var requestOptions = {
  method: 'POST',
  body: urlencoded,
  redirect: 'follow'
};

fetch("API_URL_FOR_TOKEN", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));



  //Get Data
  var myHeaders = new Headers();
      myHeaders.append("Authorization", "Bearer xxxxxxxxx");

      var urlencoded = new URLSearchParams();
      urlencoded.append("macAddress", "xxxxxxxxx");
      urlencoded.append("mode", "minute");

      var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: urlencoded,
      redirect: 'follow'
      };

  fetch("MAIN_API_URL", requestOptions)
   .then(response => response.json())
   .then(res => {
     console.log(res)
     this.setState({
       airData: res.data
     })
   });
  }


  
  render () {
        return (
          <div className="app">
             <header className="header">
                <div>
                <img src={logo} alt="Logo" className="logo" />
                    <div className="temperature">
                    
                        <FaTemperatureHigh /> 78°
                        
                    </div>
                </div>
            </header>
            <div className="spacer"></div>
            <OverallStatus />
            {this.state.airData.map(res => (
                  <div>
                    <div className='qualityFactor'>
                      <h1><img src={iconHumidity} alt="Logo" className="iconSmall" />Humidity <span className="right-justify">{res.humidity}%</span></h1>
                      <ProgressBar completed={res.humidity}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconAirPressure} alt="Logo" className="iconSmall" />Air Pressure <span className="right-justify">{res.airPressure} hPa</span></h1>
                      <ProgressBar completed={res.airPressure}
                      maxCompleted={1030} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonDioxide} alt="Logo" className="iconSmall" />Carbon Dioxide <span className="right-justify">{res.co2} ppm</span></h1>
                      <ProgressBar completed={res.co2}
                      maxCompleted={2000} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconVOCs} alt="Logo" className="iconSmall" />Chemicals <span className="right-justify">{res.tvoc} ppb</span></h1>
                      <ProgressBar completed={res.tvoc}
                      maxCompleted={1000} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconParticulateMatter} alt="Logo" className="iconSmall" />Particles <span className="right-justify">{res.pm25} ug/m3</span></h1>
                      <ProgressBar completed={res.pm25}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconCarbonMonoxide} alt="Logo" className="iconSmall" />Carbon Monoxide <span className="right-justify">{res.co} ppm</span></h1>
                      <ProgressBar completed={res.co}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconNitrogenDioxide} alt="Logo" className="iconSmall" />Nitrogen Dioxide <span className="right-justify">{res.no2} ppb</span></h1>
                      <ProgressBar completed={res.no2}
                      maxCompleted={200} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                    <div className='qualityFactor'>
                      <h1><img src={iconOzone} alt="Logo" className="iconSmall" />Ozone <span className="right-justify">{res.ozone} ppb</span></h1>
                      <ProgressBar completed={res.ozone}
                      maxCompleted={100} className="statusBar" height="40px" baseBgColor="#8BC34A" isLabelVisible="true" customLabel="•" labelSize="240px" />
                    </div>
                  </div>
            ))}
          </div>
        )
    }
  }
  
  

export default App;

Answer 1

Me too new to Reactjs and if I well understand you, I manage that like this:

I'm using axios but I think the steps are the same.

1. first I declare a state variable in my component (AxiosRequestHeaders I added this type since I'm using reactjs with typescript)

const [headers, setHeaders] = React.useState<AxiosRequestHeaders>({ 
        'Authorization':  ``,
        'My-Custom-Header': ''
       });

2. I call my api that authenticate users, I have export keyword in this method because I put my apis in a separate file api.tsx ( or api.js if you're using react with js)

export const authenticate = async () => {  
    try {
        const response =  await axios.post(`${baseUrl}/authenticate`, { "username": "user", "password": "user"})     
         return { 
            'Authorization':  `Bearer ${response.data.id_token}`,
            'My-Custom-Header': 'foobar'
           };
           
    } catch(e) {
        console.log(e);
        return 0;
    }
}

3. back to my component, in useEffect I get the headers (with the token)

import { authenticate } from './../api';
//..
useEffect(() => {
    (async () => {
      const userHeaders = await authenticate();
      setHeaders(userHeaders as AxiosRequestHeaders)
    })();
  }, []);

so in this useEffect I gave my state variable headers its value. So you can use headers variable in any other api method in your component.