title: How to pass Token of the first request response to the second request header, using Axios in an Ionic React app (2 Post Requests)
body: <p>I want to register a user and save his partner's data at the same time. The first axios request creates the user and returns a token. I need the token as a header of the second request.
  I have implemented as following 'doCreateAccount' but it is not working. It performs only the first request .post(&quot;xx/register&quot;, userData)</p>
  <p><strong>Can someone tell me how to make two axios requests, where the second one uses the token taken from the response of the first one?</strong></p>
  <p>The component:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useHistory } from &quot;react-router-dom&quot;;
  import { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const CreateAccount: React.FC = () =&gt; {
    
    const history = useHistory();
  
    const doCreateAccount = () =&gt; {
  
      const userData = {
        eMail: getValues(&quot;email&quot;),
        password: getValues(&quot;password&quot;),
      };
  
      const partnerData = {
        cardType: &quot;6&quot;,
        firstName: getValues(&quot;partnerFirstName&quot;),
        lastName: getValues(&quot;partnerLastName&quot;),
      };
  
      axios
        .post(&quot;/xx/register&quot;, userData)
        .then((firstResponse) =&gt; {
          localStorage.setItem(&quot;user&quot;, JSON.stringify(firstResponse.data));
          axios
            .post(&quot;/xx/cards&quot;, partnerData, {
              headers: firstResponse.data.token,
            })
            .then((secondResponse) =&gt; {
              history.push(&quot;/homePage&quot;);
              return secondResponse.data;
            })
            .catch((error) =&gt; {
              console.log(&quot;sth happened in cards request&quot;);
              setIserror(true);
            });
        })
        .catch((error) =&gt; {
          console.log(&quot;sth happened in register&quot;);
          setIserror(true);
        });
    };
  
    return (
      &lt;IonPage&gt;
        &lt;IonHeader&gt;
          &lt;IonToolbar&gt;
            &lt;IonTitle&gt;Online Registration&lt;/IonTitle&gt;
          &lt;/IonToolbar&gt;
        &lt;/IonHeader&gt;
        &lt;IonContent className=&quot;ion-padding&quot;&gt;
        &lt;form&gt;
              &lt;h1&gt;User Data&lt;/h1&gt;
              &lt;IonItem&gt;
                &lt;IonLabel position=&quot;floating&quot;&gt;E-Mail *&lt;/IonLabel&gt;
                &lt;IonInput type=&quot;email&quot; {...register(&quot;email&quot;)} /&gt;
              &lt;/IonItem&gt;
              {errors.email &amp;&amp; &lt;p&gt;{errors.email.message}&lt;/p&gt;}
          
                &lt;IonLabel position=&quot;floating&quot;&gt;
                  Passwort *
                &lt;/IonLabel&gt;
                &lt;IonInput type=&quot;password&quot; {...register(&quot;password&quot;)} /&gt;
              &lt;/IonItem&gt;
              {errors.password &amp;&amp; &lt;p&gt;{errors.password.message}&lt;/p&gt;}
             
              &lt;h1&gt;Partner card data&lt;/h1&gt;
  
              &lt;IonItem&gt;
                &lt;IonLabel position=&quot;floating&quot;&gt;First Name *&lt;/IonLabel&gt;
                &lt;IonInput
                  value={partnerFirstName}
                  {...register(&quot;partnerFirstName&quot;}
                &gt;&lt;/IonInput&gt;
              &lt;/IonItem&gt;
              &lt;IonItem&gt;
                &lt;IonLabel position=&quot;floating&quot;&gt;Last Name *&lt;/IonLabel&gt;
                &lt;IonInput
                  value={partnerLastName}
                  {...register(&quot;partnerLastName&quot;}
                &gt;&lt;/IonInput&gt;
              &lt;/IonItem&gt;
              
              &lt;IonButton type=&quot;submit&quot;&gt;Send&lt;/IonButton&gt;
              &lt;IonButton onClick={() =&gt; history.goBack()} color=&quot;danger&quot;&gt;
                CANCEL
              &lt;/IonButton&gt;
            &lt;/form&gt;
          &lt;/IonGrid&gt;
        &lt;/IonContent&gt;
      &lt;/IonPage&gt;
    );
  };
  
  export default CreateAccount;
  </code></pre>
  <pre><code>&quot;@hookform/resolvers&quot;: &quot;^2.4.0&quot;,
  &quot;react-hook-form&quot;: &quot;^7.1.1&quot;,
  &quot;yup&quot;: &quot;^0.32.9&quot;
  </code></pre>