Client and Server Side Cookies in Next.js

[@Endrit719]

man, I was having so much trouble to understand authentication, thank you so much, you deserve more views

[@leighhalliday]

Sweet!! That's the best... glad I can "unlock" some difficulties

[@paulcullen5712]

i guess I'm kinda off topic but does anyone know a good place to stream new tv shows online ?

[@azariahdenver3450]

@Paul Cullen i watch on flixzone. You can find it on google =)

[@KT-ut9zg]

Great explanation. I'm coming from PHP to React via Next JS. Was really struggling with storing secure cookies server-side with Next JS and not getting the answers I needed. This was clear and concise. Thanks for that and I am definitely going to buy that course.

[@leighhalliday]

Nice!! I also come from PHP :) Spent a lot of time with CakePHP back in the day. I hope you enjoy the course!

[@magimaartdeveloper7465]

well explained, alot of developers always have difficulties explaining cookies and sessions... well supper well done

[@terrylennon]

Huge thanks for posting this Leigh - video came just as I was beginning to ask questions on this! Thanks for continuing to put out awesome content!

[@leighhalliday]

Thank you Terry! I hope the vid helps :D

[@andrewiandreleonardo1765]

Where have you been all my life :))) thank you so much!!!

[@sthefanocarvalho2823]

Your content is awesome! Most of what I've learned about NextJS was in your channel :) Thank you!

[@leighhalliday]

Thank you Sthefano!! Glad I can help a little bit :)

[@manukyanq]

Actual tutorials, thank you 😍

[@leighhalliday]

You’re very welcome Artsvi!

[@WhiteVanyo]

Thank you, king 🤴

[@trevorkelley5397]

after hours of research this video solved my confusion Thank you for your help!

[@AryanKhan-no8pt]

The best way to SET and REMOVE the cookie on Server Side...Thank you soo much 🤜🤛

[@trustlang_ua]

Hi! I very appreciate you for doing all these tutorials

[@leighhalliday]

You're very welcome Vlad!! Glad you enjoyed the video :)

[@addliam]

I was struggling with cookies-next for almost 2 hours. js-cookie n you saved my like. Ty

[@leandropassos6128]

Thanks a lot dude! I was actually having a problem to delete a httpOnly cookie and your video make it clear to me!

[@leighhalliday]

Sweet! That's awesome :) The key is that it has to be deleted server side... sorta annoying but I guess that's the point to an httpOnly cookie haha.

[@arbabsahid2969]

@@leighhalliday hey , Actually am following some issue in deleting cookie. It gets deleted when I working on my localhost, but once I deployed my website to vercel cookie is not getting deleted. Can you please help me out with it ?

[@igor_cojocaru]

Thank you Leigh

[@leighhalliday]

Thanks Igor!! :) Glad you enjoyed it!

[@hbela1000]

This is exactly what i am looking for.thx.

[@jerviemarquez5192]

Thank you so much Leigh !

[@NorbyWinner]

Thank you. Awesome tutorial 💪

[@leighhalliday]

Thank you Norb! Glad you enjoyed it.

[@Prashantkumar-sz2qk]

man i was stuck on bug from 2 weeks and this video helped me resolve it.

[@leighhalliday]

Nice!! Glad you got it figured out!

[@andrewpham3933]

Explained so well, thank you so much!

[@leighhalliday]

Thanks Andrew!

[@Chinmay_395]

Sir, wonderful explanation, this was very helpful thank you.

[@PROJECTJMUSIC]

Very well explained, thanks!

[@rodolforodrigues648]

awesome content, helped me a lot!! thanks!

[@ginger-viking]

Love the video, thanks!

[@leighhalliday]

Thank you Ginger Viking... great name by the way!

[@pulkitkakar8597]

Thanks for helping 💯

[@rexomiv7352]

Thanks you're a life saver

[@VuthivannYong]

Great explanation, is it possible for the refresh token.?

[@salvadorhernandezlopez953]

Hi. When you talking about the server-side cookies, What means that the browser can't read the cookies? Probably you can't get them from js-client, but we can still read them from the devtools. I think that I didn't get this security part

[@yigitruzgaruzun7289]

thanks leigh

[@vikhyatverma4016]

It worked thankyou so much

[@elisson357]

Thanks for sharing this.

[@leighhalliday]

You're very welcome! :D

[@Nurtylek]

awesome!

[@leighhalliday]

Thanks :)

[@guilhermelopes7939]

Great explanation, I really liked your calm tone and method of teaching. I just have one doubt. How can I read this cookie to make sure that the user does not need to login?

[@davies8183]

Great video man

[@leighhalliday]

Appreciate it!

[@JuanTarallo]

Ty, really helpful.

[@leighhalliday]

Thanks Juan! Glad you enjoyed it!

[@eleukhin]

Thank you so much!

[@leighhalliday]

Glad it helped!

[@dhruvpahwa7602]

How can I protect it from CSRF Attack? Please reply

[@GnomePuntTrainerYT]

You're an absolute boss, Leigh! Quick question, when you checked out the api calls in the dev tools you could see the value of the token. Is that not a problem because the value was set on the server instead of set on the client (aka h4ck3rs can't manipulate your code on the server so it didn't matter that they could read the token)?

[@leighhalliday]

Hey OAMP! It's not a problem because that's between the browser and the server, won't be visible to anyone else, especially if it's transmitted over HTTPS.

[@MaksymMinenko]

I feel like a cookie master now! Well, almost. ;)

[@leighhalliday]

I'm also craving a cookie haha... white chocolate chip macademia nut

[@anvui95]

Hello, great video I would like to know why are you defining the cookie in the front instead of the api/login.js ?

[@mimikiticat4949]

Thanks for the example. Does this still apply now or theres a better way.

[@mydisk2859]

How to use it with express-session and witgout nextjs api routes ?

[@leighhalliday]

Hey! Sorry... I don't have an answer for you :) No clue! I have only used express with Next.js one time and it didn't have any sessions.

[@mydisk2859]

@@leighhalliday Sir actually i am running express an next.js on different servers even if you could refer any idea how i could save cookie from api to next.js or any reference would be helpful...

[@siosaiafonua9286]

Which cases would you just want to use local storage?

[@mohamedsba4185]

thank you for the explanation im wondering how i can pass that cookie back to the server for authorazation checking (i mean the secure way)

[@hazemsaeed6372]

Thank you for your explanation. But I have a questions, can I use the same API endpoint with a mobile app? Because I'm used to use tokens in local storage.

[@apollomacabodbod6329]

Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup this? the frontend will just received the secure token to store directly to the cookies?

[@Mike-xr1fk]

Hi Leigh!, thank you for making this amazing course! I just have a question. I make a request to the login API and I receive the refresh token that is in the cookie and the access token that is in the response body. Now how should I handle the access token on the client side(next js)? If I store this in a global state like context API, then I don't have access to that state in the getServerSideProps function, and I can't set it in the request.header.authorization because getServerSideProps run on the server side and the state is on the client side! what is the right flow for this kind of case?

[@phinnahuang6147]

I really like the way you explained. I wanted to buy your course through the "Get Access" button, but the button didn't work.

[@justfun591]

After setting token from Server side, how can I use token to check whether a client is login or not ?

[@uusa35]

thank you

[@flo_dev]

Hi, how would you do to use js-cookie from the _app file since I need to set the cookie and check in any page of the app and then need to use getInitialProps instead of getServerSideProps

[@satyamchourey6120]

Is there a size limit on server side cookies?

[@manjicoder3049]

Thanks

[@leanprogrammer]

Great vid! PS: How does this work with a pre-rendered page where I don't have access to the req object?? SSR is not the fastest for most apps

[@blackbeans3112]

Beginner here bro, the backend usually will setup the httponly: true? not the frontend will setup the httponly: true? the frontend will just received the secure token with httponly: true attached already to store directly to the cookies?

[@sayantankarmakar4191]

Hey Leigh, I had a question. Even if Javascript on the frontend won't be able to read the http-only cookies, we can still see its value on the browser's Developers Tools, so how does that make it safer? For example, would it be safe to store JWT Authentication tokens as http-only cookies?

[@leighhalliday]

Hey Sayantan! It's safer because that is you, the owner of that auth cookie looking at your own cookie value. This is opposed to a random piece of javascript executing on your page being able to access the value of this cookie.

[@sayantankarmakar4191]

@@leighhalliday So does that mean once I deploy my application, the users wont be able to see the set cookies?

[@tuananhdo1870]

@@sayantankarmakar4191 The only person can see it is you, or anyone can use your laptop

[@sushantkumar3861]

I am unable to get the cookies in _app.js. How can I get it there?

[@berlino5563]

Thank you Leigh!. A stupid question: i'm working on a Next js auth session. In a real scenario my cookie http only (jwt) must be visible always in my Storage_Inspector/Cookies? Or my http only cookies must NEVER be visible in the browser? I don't know if I've made myself clear

[@leighhalliday]

Hey Berlino! HTTP only cookies aren't visible in JavaScript, but they get sent to the server with each request.

[@berlino5563]

@@leighhalliday thank you

[@6365bharath]

We load our app inside an under third party sites. Third party cookies are automatically blocked inside an . Does that mean i can never use frameworks like nextjs or Remix?

[@Dartsbreckx]

i do this , but in production i have problems

[@programmingplanet3249]

thank's alot

[@henryho952]

hello, i just wondering how can I apply this if the API is from the django and, I cant get the token from cookie when I fetching get API from django saying unauthorized, it seems that the bearer token not set properly, but when i refresh the browser the cookie is accessible and the get API works. how can i achieved to handle token from cookie without refreshing the browser.

[@LuisVazquez-ky7yb]

So i am using axios on frontend and I see you are returning the session token with getServerSideProps. Now my question is how do i send this to axios do i need to pass this token with all the children which will be hell for me. Can i store this token on a context or is also a bad way of doing? or can I create a function to fetch the token and then call axios. Please let me know which is the best way of doing this

[@hungtranlam8419]

Thank you, but can it work if I deploy nextjs app and expressjs app to different domain?

[@ArunJenson-r5u]

how to set the cookie in serverside in next 13 app router

[@tahafurkanislek7091]

did you find the answer ?

[@alexkey9372]

Great tutorial! how would you authenticate though certain routes? (without next-auth). I'm trying to do the authentication with wordpress and its rest api but really struggle.. id like also to avoid serversideprops as it would make my whole project slow again

[@leighhalliday]

Hey Alex! Hmm... I suppose you could add a client side check that confirms you have access before anything at all is rendered... but I think either way adding validation adds a slight slowdown. If you can use a cookie with confidence, I don't think getServerSideProps would slow you down too much... we're probably talking < 100ms.

[@alexkey9372]

@@leighhalliday em.. having seen the difference, I'd say def it does slows down significantly. I mean right, now I'm authenticating user with user credentials generating a jwt (having the jwt plugin there) and when credential match on wordpress then storing the jwt info on httponly cookie. But how to access this on the client without serverprops? Also, not sure if this is the best approach.. what would you recommend? :) was thinking about passport library etc but not sure.

[@sk-uv5fm]

Great! I have a question about getServerSideProps. if router.push to the page with getServerSideProps, Is the page SSR?

[@leighhalliday]

Hey! Hmmm... I think so! I think Next.js handles that for us. I'm only 95% sure though :D

[@Emraan-Shaikh]

Quick question, incase of isomorphic application development after login cookies set at client-side and API used for login is not belongs to same domain, how to cover this scenario please advise

[@leighhalliday]

I don't think you can have HttpOnly cookies across multiple domains unfortunately... unless I'm wrong?

[@kurniawanhendra2683]

Hi Hall, this is hendra from Indonesia. Is your course available on Udemy ? Your course is looks great, covered lots of stuff...

[@leighhalliday]

Hey Kurniawan! No, it's not on Udemy but you can get a purchasing power parity code here to make the price more reasonable for you next.leighhalliday.com/ppp

[@bakbak1830]

Hi, i setup the cookie using login api route as shown in the video. I want to send the jwt token from client end to do some queries and mutations on the server. The cookie is not available on client end to do that operation. One way is to get the cookie on getServerSideProps and pass it onto the component or the other way is to store it locally using local storage or client side cookie. What will be your suggestion? Is there any other way out?

[@leighhalliday]

Hey Bak! If the server is on the same domain it'll be passed automatically to the backend with the request. If it's a different domain, I think you'll have to store the token somewhere client-side so you can add it in as a header.

[@bakbak1830]

@@leighhalliday thanks for the reply. It is clear; will test it out.

[@pedroapfilho]

What if you want to fetch data on the server with these cookies? How would it work?

[@leighhalliday]

Hey Pedro! That’s exactly what I did in getServerSideProps, that runs server side. You’d access cookies in the exact same way in an API page function

[@AllahomAnsorGaza]

how read token from _app to setUser Login

[@dennist5778]

I'm new in Next.js. I have this .ts file that detects some redirects. In other words detects some special urls in må app. Lets say I it's detects /hello-world in the url. I then want to delete a cookie on the SSR side. How would I do this. I dont know where to get the res from on the page.

[@leighhalliday]

Hey Dennis! Hmm from your comment I’m not sure what to recommend… if you’re new to nextjs, you may enjoy my course! next.leighhalliday.com we cover server side cookies in it.

[@dhruvpahwa7602]

I'm getting this error on logout: Cannot set headers after they are sent to the client

[@leighhalliday]

Hmm... double check to ensure your backend doesn't have any errors... that's something I've noticed can cause it.

[@dhruvpahwa7602]

@@leighhalliday Yeah, I was sending res.json without retuning it

[@mohammaddh8655]

bro you saved my ass thanks

[@VikashLaBrainer]

Can anyone manipulate server side cookies.

[@leighhalliday]

If you have it as an http only cookie, nope

[@Julia_Berrrlin]

I'm so confused how the node server works in next.js. it's all single files for any route? What about secret routes? Watching the entire app to help you :)

[@leighhalliday]

Hey Julia! Each one runs as a serverless function when it's deployed. You'd have to write code to guard access if certain routes are to be "secret"... by secret you mean authorized users only, right?

[@aladesanmiemmanuel7663]

js-cookis return undefin

[@scottamolinari]

I think you should comment in your video that this is not how a login or logout should work and to be honest, I think using login and logout as the example was suboptimal. Someone new to all this might get a totally wrong impression. Good video otherwise.