Nextjs & custom Express server - cannot access cookie set with `http: true` in the express server

Question

I am trying to parse a cookie which was set by including the property httpOnly: true on my custom express server

Now in my NextJs app I can fetch the cookie in the server side method getServerSideProps and access the cookie in ctx.req.cookies from there. But when I make a fetch api call (from the server side method) to the custom server, the cookie does not seem to be accessible in the custom server api call.

Here is my express configuration in server.ts:

    // Express Configuration
    app.set('port', process.env.PORT || 3000)
    app.use(cors({ credentials: true, origin: true }))
    app.use(cookieParser())
    app.use(passport.initialize())
    app.use(express.json())
    app.use(express.urlencoded({ extended: true }))

This is how I set the cookie on custom express server:

res.cookie('rtk', refreshTokenJWT.token, {
    httpOnly: true,
})

This is the fetch api call from getServerSideProps method:

const response = await fetch('http://localhost:3000/refresh_token', {
    credentials: 'include',
    method: 'POST',
})

Perhaps it is because of the fact that I have to make the api call with absolute url, when I try to do fetch('/refresh_token', ...) I get the error: TypeError: Only absolute URLs are supported

I could possibly send the payload from the server side method in the request body and handle it in the custom express server, but this does not seem like the best solution.

pls elp, thanks in advance.

Edit: To clarify, the await fetch() is happening in the server side method getServerSideProps of nextjs.

Sending the cookie as a header in the fetch api call as suggested by @O. Jones works, but I was under the impression that this wouldn't work since I had set httpOnly: true.

Answer 1

You have to, and are allowed to, parse that server response header despite the httponly attribute being present.

Why? Because HttpOnly (owasp link) is only an instruction to the browser that it should enforce that isolation; when your client code is just another node.js process, it's just a response header.

Here's the regurgitation I'm doing in my auth's unit testing that sounds very similar to your needs; I'm always getting exactly two cookies in comma-delimited one liner format, as emitted by my Koa RESTful app (your Express setup could be comma-delimited like this one, or send two Set-Cookies, so you may need a minor alteration if you have the latter case.)

// raw's format is `koa.sess=YA5N/yI1KhKc/qyylgNduj8vK3e2; path=/; expires=Sun, 09 May 2021 05:17:19 GMT; secure; httponly, koa.sess.sig=8x1BraqjAvKryLx1fvgc0DBu5D4; path=/; expires=Sun, 09 May 2021 05:17:19 GMT; secure; httponly`;
const scp = require('set-cookie-parser');
const cookies = scp.parse(scp.splitCookiesString(headers['set-cookie']));
const next_request_headers = {
    cookie: cookies.map(cookie => cookie.name + '=' + cookie.value).join('; ')
};

I'm using npm:set-cookie-parser because cookies are jank and I got fed up with handling commas in both expirations and delimiters.

side issue: abs URLs

TypeError: Only absolute URLs are supported

Cookie domain rules are applied after relative URLs are normalized to absolute URLs, so it sounds to me like this side-issue is only about node-style fetches not having the implicit server/path needed for a browser-style relative ajax URL, and not blocking on anything to do with cookies.

Answer 2

getServerSideProps, by it's name, means it's generated server side

When you do a fetch in getServerSideProps, you do not have any default cookies.