title: Axios - extracting http cookies and setting them as authorization headers
body: <p>I am building authentication for my application and I am using access and refresh tokens.</p>
  <p>Upon user login, the API issues 3 things</p>
  <ul>
  <li>refresh token</li>
  <li>access token string with headers and payload</li>
  <li>access token string with signature</li>
  </ul>
  <p>These tokens are all <code>jwt</code> tokens.</p>
  <p><a href="https://medium.com/lightrail/getting-token-authentication-right-in-a-stateless-single-page-application-57d0c6474e3" rel="nofollow noreferrer">This</a> article discusses why access tokens should be split.</p>
  <p>using express, I send the tokens back to the browser in my controller like so:</p>
  <pre><code>res.cookie(
        ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD,
        headerAndPayload,
        COOKIE_OPTIONS,
      )
      res.cookie(
        ACCESS_TOKEN_COOKIE_SIGNATURE,
        signature,
        COOKIE_OPTIONS_HTTP_ONLY,
      )
      res.cookie(REFRESH_TOKEN_COOKIE, refreshToken, COOKIE_OPTIONS)
  
      return res.json({ username, uid })
  </code></pre>
  <p><strong>auth.constants.ts</strong></p>
  <pre><code>export const COOKIE_OPTIONS: CookieOptions = {
    secure: true,
    sameSite: 'lax',
  }
  
  export const COOKIE_OPTIONS_HTTP_ONLY: CookieOptions = {
    httpOnly: true,
    secure: true,
    sameSite: 'lax',
  }
  
  export const ACCESS_TOKEN_COOKIE_HEADER_PAYLOAD = 'access_token_header_payload'
  export const ACCESS_TOKEN_COOKIE_SIGNATURE = 'access_token_signature'
  export const REFRESH_TOKEN_COOKIE = 'refresh_token'
  </code></pre>
  <p>In the ui (react) I go into Chrome devtools -&gt; application -&gt; storage -&gt; cookeis and I can see that they are updated everytime I login. This is the behavior I want so that's good so far.</p>
  <p><a href="https://i.stack.imgur.com/6ZJy5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6ZJy5.png" alt="devtools cookies" /></a></p>
  <p>Now when I want to send a request to my API to create something (let's say I am creating a new blog post), I want to grab those cookies and pass them as an <code>Authorization</code> Header.</p>
  <p>I am following <a href="https://stackoverflow.com/a/43052288/8518207">this</a> person's suggestion except I noticed he is using <code>store</code> which I am guessing is some form of state. Since I am not doing that and multiple sources (<a href="https://stackoverflow.com/a/61106253/8518207">source 1</a>, <a href="https://hasura.io/blog/best-practices-of-using-jwt-with-graphql/#refresh_token_persistance" rel="nofollow noreferrer">source 2</a>) point to the fact that the standard for sending tokens to the API for authentication is using <code>Authorization</code> header, I would like to follow that.</p>
  <p>Currently, when I make an API request using axios, I console log the express <code>request</code> object and can see my tokens in cookies like so:</p>
  <pre><code>headers: {
      host: 'localhost:3001',
      connection: 'keep-alive',
      'content-length': '0',
      accept: 'application/json, text/plain, */*',
      'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36',
      origin: 'http://localhost:3000',
      'sec-fetch-site': 'same-site',
      'sec-fetch-mode': 'cors',
      'sec-fetch-dest': 'empty',
      referer: 'http://localhost:3000/',
      'accept-encoding': 'gzip, deflate, br',
      'accept-language': 'en-US,en;q=0.9',
      cookie: 'access_token_header_payload=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTY4MzQwODB9; access_token_signature=3pUbxjWgly9xmYSJObOvTgps9qwjOIrHWWE4LPYidmQ; refresh_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InJvc3R5cG9vIiwiaWF0IjoxNTk2ODM0MDIwLCJleHAiOjE1OTc0Mzg4MjB9.IKdRsaTTgAeUfwicLcBpRvw89WgYXy_rCRN5o2BJFqY'
    },
  </code></pre>
  <p>but I want to send these cookies as <code>Authorization: Bearer &lt;tokens&gt;</code> instead. How would I do that in axios? Or is what I am doing <strong>secure</strong>?</p>
  <p>this is my axios interceptor</p>
  <pre><code>import axios from 'axios'
  
  const service = axios.create({
    withCredentials: true,
    baseURL: process.env.REACT_APP_API_BASE_URL,
    timeout: 5000,
  })
  
  // Request interceptors
  service.interceptors.request.use(
    config =&gt; {
      return config
    },
    error =&gt; {
      return Promise.reject(error)
    },
  )
  
  // Response interceptors
  service.interceptors.response.use(
    response =&gt; {
      console.log('response', response)
  
      return response.data
    },
    error =&gt; {
      return Promise.reject({ ...error })
    },
  )
  
  export default service
  
  </code></pre>