Skip to content

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')

→ Here's my latest YouTube video

→ Get my JavaScript Beginner's Handbook

→ 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

Bootcamp 2025

Join the waiting list