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')
→ Download my free JavaScript Handbook!
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X