How to force credentials to every Axios request

Apr 30, 2020

Learn how to send credentials and cookies with every Axios request by setting withCredentials: true, and how to apply it globally with axios.create().

~~~

I was using Axios to interact with an API that set a JWT token.

The API returned the token in a cookie and I quickly figured I needed to set withCredentials: true in the Axios options:

import axios from 'axios'

axios.post(API_SERVER + '/login', { email, password }, { withCredentials: true })

Otherwise the cookie would not be saved.

I also needed to set it for every other request I made, to send the JWT token to the server:

axios.get(API_SERVER + '/todos', { withCredentials: true })

Now, it’s ok for a few requests, but for many, you’d probably like to use a general configuration.

You can do it using the create() method to create a new Axios instance you’ll then use it in your requests:

import axios from 'axios'

const instance = axios.create({
  withCredentials: true
})

instance.get(API_SERVER + '/todos')

It’s also common to add a baseURL property:

import axios from 'axios'

const instance = axios.create({
  withCredentials: true,
  baseURL: API_SERVER
})

instance.get('todos')

In React I used axios-hooks, and to configure withCredentials I used this code:

import axios from 'axios'
import useAxios, { configure } from 'axios-hooks'

const instance = axios.create({
  withCredentials: true,
  baseURL: API_SERVER,
})

configure({ instance })

const [{ data, loading, error }, refetch] = useAxios('todos')

Tagged: JavaScript · All topics

~~~