How to force credentials to every Axios request
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')
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025