title: Error 401 when trying to download a file after using Google Picker API
body: <p>I have a react app that allows user to pipe in a particular Google Doc that we then analyze the content of. For step 1, picking the document, I'm using <a href="https://www.npmjs.com/package/react-google-picker" rel="nofollow noreferrer">this nifty npm package</a>, which also returns to me an &quot;OAuth token&quot;, which I presume to be an <code>access_token</code> I can use to make API calls. I set the returned token and the data returned by the Picker API as state variables in my component, as seen below</p>
  <pre><code>&lt;GooglePicker clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
    developerKey={process.env.REACT_APP_GOOGLE_API_KEY}
    scope={SCOPES}
    onAuthenticate={(token: any) =&gt; {
      setGoogleToken(token)
    }}
    onChange={(data: any) =&gt; {
      setGoogleData(data);
      nextOnboardingStage();
    }}
    onAuthFailed={(data: any) =&gt; console.log('on auth failed:', data)}
    multiselect={true}
    navHidden={true}
    authImmediate={false}
    mimeTypes={['application/vnd.google-apps.document']}
    viewId={'DOCS'}&gt;
    &lt;MyCustomButton /&gt;
  &lt;/GooglePicker&gt;
  </code></pre>
  <p>I then try to call the <a href="https://developers.google.com/drive/api/v3/reference/files/export" rel="nofollow noreferrer">Drive API export function</a> to download said file in this function</p>
  <pre><code>const downloadGoogleDoc = async (authToken: string, fileID: string) =&gt; {
    const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
      headers: {
        'Authorization': `token ${authToken}`
      }
    });
    console.log(res);
  };
  </code></pre>
  <p>However, I'm getting a 401 error when doing this. Can someone point out where I'm losing the auth? Thanks so much</p>
  <hr />
  <p>Edit My entire component is below</p>
  <pre><code>const SCOPES = ['https://www.googleapis.com/auth/drive.readonly'];
  
  const Project: React.FC&lt;ProjectInput&gt; = () =&gt; {
    const [googleToken, setGoogleToken] = useState&lt;string&gt;();
    const [googleData, setGoogleData] = useState&lt;any&gt;({});
  
    const [documentData, setDocumentData] = useState();
  
    const downloadGoogleDoc = async (authToken: string, fileID: string) =&gt; {
      try {
        const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
          headers: {
            'Authorization': `Bearer ${authToken}`
          }
        });
        console.log(res);
      } catch(e) {
        console.log(e);
        console.log(e.message);
      }
    };
  
    console.log(googleToken);
    console.log(googleData);
  
    const MyCustomButton = () =&gt; {
      return (
        &lt;button className=&quot;mx-8 my-2 p-2 rounded bg-blue-500 text-white&quot;&gt;
          Select From Google Drive
        &lt;/button&gt;
      )
    }
  
    if (googleToken &amp;&amp; googleData.docs) {
      downloadGoogleDoc(googleToken, googleData.docs[0].id);
    }
  
    return (
      &lt;div className={`ml-${sideBarWidth}`}&gt;
          &lt;FadeIn&gt;
            &lt;div className=&quot;flex flex-col min-h-screen bg-gray-500 py-6 justify-center sm:py-12&quot;&gt;
              &lt;div className=&quot;py-3 sm:max-w-xl sm:mx-auto&quot;&gt;
                &lt;div className=&quot;bg-white min-w-1xl flex flex-col rounded-xl shadow-lg&quot;&gt;
                  &lt;div className=&quot;flex&quot;&gt;
                    &lt;div&gt;
                      &lt;div&gt;
                        &lt;div className=&quot;px-8 py-5&quot;&gt;
                          &lt;h2 className=&quot;text-gray-800 text-3xl font-semibold&quot;&gt;Great! Select the document you'd like us to scan&lt;/h2&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;GooglePicker clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                        developerKey={process.env.REACT_APP_GOOGLE_API_KEY}
                        scope={SCOPES}
                        onAuthenticate={(token: any) =&gt; {
                          setGoogleToken(token)
                        }}
                        onChange={(data: any) =&gt; {
                          setGoogleData(data);
                          nextOnboardingStage();
                        }}
                        onAuthFailed={(data: any) =&gt; console.log('on auth failed:', data)}
                        multiselect={true}
                        navHidden={true}
                        authImmediate={false}
                        mimeTypes={['application/vnd.google-apps.document']}
                        viewId={'DOCS'}&gt;
                        &lt;MyCustomButton /&gt;
                      &lt;/GooglePicker&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/FadeIn&gt;
      &lt;/div&gt;
    );
  };
  
  export default Project;
  </code></pre>
  <hr />
  <p>EDIT</p>
  <p>As @Tanaike said, I needed to include MimeType in my request, working function is below</p>
  <pre><code>  const downloadGoogleDoc = async (authToken: string, fileID: string) =&gt; {
      try {
        const params = new URLSearchParams([['mimeType', 'text/html']]);
        const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
          params,
          headers: {
            'Authorization': `Bearer ${authToken}`
          }
        });
        console.log(res);
      } catch(e) {
        console.log(e);
        console.log(e.message);
      }
    };
  </code></pre>