In my usual experience all single page apps I worked on used JWT as authentication mechanism. I came across api that uses httpOnly cookies for this.

Since we can't access such cookie via javascript to know if it is present or not, how does one handle this in react app?

My initial idea was to track this by setting some sessionStorage upon successful sign in and removing it if I receive an error related to authentication.

But this doesn't work well with next.js server side rendering I believe? We have it set up with apollo client which allows setting custom headers and cache.

Is there a mon way to handle this authentication process with set up above?

In my usual experience all single page apps I worked on used JWT as authentication mechanism. I came across api that uses httpOnly cookies for this.

Since we can't access such cookie via javascript to know if it is present or not, how does one handle this in react app?

My initial idea was to track this by setting some sessionStorage upon successful sign in and removing it if I receive an error related to authentication.

But this doesn't work well with next.js server side rendering I believe? We have it set up with apollo client which allows setting custom headers and cache.

Is there a mon way to handle this authentication process with set up above?

• javascript
• reactjs
• graphql
• apollo
• next.js

1 Answer 1

httpOnly just means that the value can't be read by JavaScript.

So you make an HTTP request to the server and it will return a response with a Set-Cookie header.

Then any future requests will automatically include the cookie.

(Just make sure that you set withCredentials or the equivalent.)