[next-urql] Is it possible to share context data from server-side to client-side?

[nghiepdev]

Hi,

I am building the Authentication for my application with JWT.

Currently, the access_token store in the cookie without HttpOnly. I want to store access_token with httpOnly: true option to more security.
But, for now

ctx is only available on the initial server-side render and not on client-side navigation.

Current my code example:

// pages/index.js
 withUrqlClient((ssrExchange, ctx) => {
    const cookieHeader = process.browser
      ? document.cookie
      : ctx.req.headers.cookie ?? '';
    const {access_token} = cookieParse(cookieHeader);

    return {
      url: 'my-url',
      fetchOptions: {
        headers: {
          ...(access_token && {Authorization: `Bearer ${access_token}`}),
        },
      },
      exchanges: ['my-exchange'],
    };
  })

How can I receive the cookieHeader on server-side and share to client-side?
I don't have any idea.
Maybe the ctx should be available both on the client-side and can share context from the server-side.

if(process.browser) {
   cookieHeader = ctx.cookieHeader;
} else {
   cookieHeader = ctx.cookieHeader = ctx.req.headers.cookie;
}
console.log(cookieHeader); // should works

[JoviDeCroock]

Document.cookie should contain the same cookies as you are using on the server so you should be able to parse them on the client like that. I’ve personally used nookies for this before

[nghiepdev]

document.cookie is my problem. For more security, I want to store the cookie value with httpOnly: true option.
So, my question. How to share context data from the server-side?

[JoviDeCroock]

Well for that you'll have to parse the cookies on the server receiving your GraphQL request, duplicating that context would also become unsafe since that would require an HTML embed.