How do I use an HttpOnly jwt cookie on the frontend - express

Question

How do I use an HttpOnly JWT cookie on the frontend since I can't read from an HttpOnly cookie?
What's the best practice for storing the JWT after grabbing it from the HttpOnly cookie? Do I even need to store it somewhere since I already have the cookie passed from the backend?
I know local storage is not secure.
I don't know if it matters, but I'm serving my Vue app on http://localhost:8080/, and I'm running my backend app on http://localhost:3000 using Node/Express.

Answer 1

httpOnly cookies by design are not accessible by your browser.
You have to include credentials with your request with whatever http client you are using:
fetch.js
// with axios
axios.post(url, formData, {
withCredentials: true
})
// or with fetch
fetch(url, {
credentials: 'include'
});
And inside your express entrypoint:
app.js
const cors = require("cors");
const cookieParser = require("cookie-parser");
const COOKIE_SECRET = "veryLongString";
const corsOptions = {
credentials: true,
... other cors options ...
};
app.use(cookieParser(COOKIE_SECRET));
app.use(cors(corsOptions));
These configurations will automatically pass your httpOnly cookie along with your requests, and you can access them from your server
If the cookie is signed:
const { tokenName } = req.signedCookies;
or else:
const { tokenName } = req.cookies;