Set-Cookies Header and withCredentials

I have been working on a little app recently to understand authentication both from the Frontend and also the Backend. On the backend I am using Nestjs and on the Frontend I am using Nextjs.

If you interested in seeing the code you can check out the Github repos below (WIP btw)

Github Repo — Backend

Github Repo — Frontend

One new thing I learnt during the process of learning about authentication was the Set-Cookie Http response header. It can be used when generating cookies for auth tokens on the backend and then setting headers for ‘Set-Cookie’ on the response and sending them through to the Frontend.

It can be used when generating cookies for auth tokens on the backend and then setting headers for ‘Set-Cookie’ on the response and sending them through to the Frontend.

You can see an example function on the backend used to generate and sign an auth token and return a string ready to be sent back in the response:

Nestjs code to generate and sign a token on the backend.

I couldn’t work it out for a while. So I did what any good dev does… I started googling it.

A Problem I ran into

One problem I ran into though was when this response was being sent back to the client the Cookie was not being set in the browser! I couldn’t work it out for a while. So I did what any good dev does… I started googling it. I found a couple of useful stack overflow questions:

From reading both questions it was pretty likely that my problem lay with some CORS setting.

My Frontend was running on http://localhost:3000 and my backend was running on http://localhost:3003. Therefore there was a couple of adjustments I had to make on both the Backend AND the Frontend:

Backend CORS settings

But I also had to make some update on the axios request on the Frontend:

Adding withCredentials: true on axios call on Frontend

XMLHttpRequest.withCredentials

After reading a bit more I understood why this was the case. This withCredentials property is a boolean that indicates whether or not a cross-site Access-Control requests should be made using credentials such as cookies. For more info see the mozilla docs and also this Stack Overflow question.

Once these CORS updates were done the cookies started to be set in the browser and my requests from the Frontend could be properly authenticated by the backend! Woohoo!

Conclusion

I love making small apps to focus on specific skills and then learning these little nuggets of information along the way. I am pretty sure without continually developing and trying new things I wouldn’t know about this particular property and would continue to live in ignorance.

I hope you enjoyed the article and please let me know any comments or questions!

--

--

--

Father. Husband. Music Lover. Avid Reader. Spiritual Seeker. Czech — Prague. Constantly Failing. But remember… don’t take yourself too seriously.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Basic Setup for React application without CRA

Pic Courtesy — Google Images with some self-editing

Node.js vs Java for the Enterprise Web Applications Development

Becoming more reactive with RxJS flatMap and switchMap

Day 2 : Changes for components in Winter 21 #TexeiAdventCalendar

[Action required] Your RSS.app Trial has Expired — Mon Feb 21 2022

The Map Object For JavaScript

Map by Buster Bluth, Age: 36

React and Redux Basic Setup

Top JavaScript Animation Libraries in 2022

Top JavaScript Animation Libraries in 2022

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Drake

Adam Drake

Father. Husband. Music Lover. Avid Reader. Spiritual Seeker. Czech — Prague. Constantly Failing. But remember… don’t take yourself too seriously.

More from Medium

Handle Refresh Tokens with Axios

HTTP Error handling in React.js with an Interceptor

Access tailwind colors in TypeScript

Sass Custom Functions