How to manage and send httpOnly stored jwt cookies within React and Axios

Question

I'm actively trying to gain knowledge on httpOnly cookie and found out lots of article on it that why should we use it.

But I haven't seen any practical example of how to work with it. From few trial and error, I came to knew that we can't set httpOnly flag in browser and needed to be done on server. So I, used cookie-parser library accordingly:

const express = require('express');
var cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());

app.post('/generateToken', (req, res) => {
    res.cookie('AccessToken', JWT_AUTH_TOKEN, {
        expires: new Date(new Date().getTime() + 30 * 1000),
        sameSite: 'strict',
        httpOnly: true,
        
    })
    res.cookie('RefreshToken', JWT_REFRESH_TOKEN, {
        expires: new Date(new Date().getTime() + 31557600000),
        sameSite: 'strict',
        httpOnly: true,
    }).send("hello")
    
});

app.listen(process.env.PORT || 5050);

By this I successfully get the cookie stored in my browser with all the property like sameSite, HttpOnly except secure:true as I'm on local host. But the problem is as we cant access these httpOnly token with javascript, How do I send it to particular routes with proper header like below

let token = req.headers['authorization'];

and send httpOnly cookie refreshToken to lets say /refresh Route to get new accessTokens with Axios or whats the way of doing it?

Sem · Accepted Answer · 2020-11-09 01:20:46Z

1

When you have set the cookies with HttpOnly flag, the cookies will be automatically sent via HTTP request from the browser to the server. You don't have to explicitly set it in HTTP Header.

With cors installed at the server, you can access the cookie with req.cookies.

I am not sure with axios, but if using fetch API, we will need to add credential:'include' option in the fetch API, so that the HttpOnly cookies can be set.

Take a look at this post.

answered Nov 9, 2020 at 1:20

Sem

1,4172 gold badges19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cyprien · Accepted Answer · 2022-08-25 22:32:29Z

0

The property withCredentials can help you, its work with axios and send the cookie

const instance = axios.create({
   withCredentials: true,
   baseURL: BASE_URL
})
instance.get('/todos')

see the doc and this topic topic

edited Aug 25, 2022 at 22:32

answered Aug 25, 2022 at 22:31

Cyprien

12 bronze badges

Collectives™ on Stack Overflow

How to manage and send httpOnly stored jwt cookies within React and Axios

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related