My man, thank you very much for this perfect tutorial, I was stuck with the part of getting back the cookie but with this "serialize cookie" all of the errors disappeared . Big hug from Argentina!
I'm trying to understand the NextResponse and cookies and api's from long time for authentication setup. this clarified my doubt. Thank you so much for sharing 😊
This is exactly what I was looking for, could you make a video where we fetch the data and auth from Strapi? Thanks and congrats for your content. Really useful.
so inside of api/auth/login/route.ts where you had the if statement checking to make sure it was admin admin, that is where you would make a POST request to the database you are using? and then pass through the body to it as the values?
Great tutorial thank you! I just have one question, how would you send the cookies from server side components? What occurred tp me is each time I make the request from the server, I get the cookie manually and add it to the 'Cookie' header on each request, is there a better way to do it? ( I saved the cookie using cookies().set(...) from 'next/headers' after my login request) I would appreciate your input, thank you :)
Backend is ready in Spring Boot , only i wantt that , how , ! Login page will be created !, and token how it is going to manage and stored, and how navigations will work , this is my first time seeing next i did even learn this just started coding , i am Angular developer !. Now as per ssr , i learn here many things , here need gaurd on routing , if loged in then dashbaord else login page , ! this is simple but getting the errors now for the storing cookies etc.. now will see your idea, hope i will be able to implement it with middleware lets see ,
How can the client pass a token in the cookie if it's http only ? I thought this prevents the client JavaScript from being able to see and this pass the access tokens to the API calls ?
so to protect every page and route we have to write that long ass code? isnt there a way to write middlewares like in a normal express way? Or is it the only work around to have a layout for every view and componenet?
Im having a hard time trying to figure out how you would do this if the API you are trying to hit requires an API_KEY. From my experiences whenever i tried to do a fetch the fetch would fail becasue the key would be read as undefined within the client component?
is there no way to do this apart from making my layout.tsx a client component. Because i want my layout.tsx to be a server component so that i can set the metadata object on that route.
Good video! but I have a doubt :( According to what I have read httponly cookies are the most secure way to do user authentication, can you explain me what is the reason in the context of the video implementation please, this topic has me a bit confused.
Great video, one question, is there a way that I can fetch data with cookie in server component and than update cookie on server side if it is wrong. I tried lot of things but it is imposible to set new cookie (with new access and refresh token) from server side component.
hey im using express as backend.... how do i validate the cookie in middleware.... help me out so how do i protect my route, when i login/register i get the cookie... but i dont have validation logic in next.js so without that how can i do please help out
not long ago cookies were disengouraged to use for vital session info because it's easy to steal the session information. but i've seen an increase in tutorials implementing cookies for authentication, is there a reason why?
I have a question: `verify` should return the username, right? So, I can response with that in /api/auth/me and get it back in the getUser() function in layout.tsx. But how can I pass the username to the page.tsx? Could I call the the endpoint /api/auth/me again from page.tsx since it will be deduplicated using fetch? Or what should I do in order to get the username in page.tsx?
Hey man, thank you, for great video. I have a question: I'm using t3 and in all examples I found they use Authorization: Bearer ... what do you think? Because I couldn't find the way to set-cookie httponly iwth tRPC and I thinking what is the difference ? thank you! If you will answer my question, let's do it step by step: - Authorization: Bearer vs headers set-cookie httponly - tRPC - not possible to set cookie httonly if it is true
Thank you! Check the timeout of the cookie, maybe it's set to `-1`. Double check it, if it's still not working see if you're blocking anything on your side of the browser. I hope you find a solution!
Good video thanks, but I got a doubt: If I delete the cookie from the browser and I visit the /dashboard or /settings page doing click with the mouse, I can continue browsing when the cookie does not exist. Only when I reload the page with F5 is when it detects that I have no cookie and redirects me to the login screen. How we should fix this? It's because the cache, I know, but how can we fix this?
I am developing a React frontend and I have backend lambdas basically that handle all the auth part. I get the httpOnly cookie and I see it correctly set. If I have let's say 10 private routes on my app ( /component1, /component2 etc), does it mean that every time the user tries to navigate to a page, we need to reach out to the server and validate the token? I don't want to use localStorage so I am trying to get my head around what is the most efficient way to reflect that a user is authenticated across the app once the httpOnly cookie is set. (I use react-redux also). Thanks for any tips
NextResponse is from next.js for your own backend you have to return the appropriate response. You can set the json data and the headers and anything else you need.
Making layout a client component is nothing wrong and its commonly used to making transitions. Many people think that making layout client will make every page and component that is passed thru also client by default, wich is not true. Also what in that tutorial is outdated? Settings cookies in route handlers or reading them? And about server actions - good luck using experimental features in production.
Hi I have made my APIs in node.js and saving token in localstorage. This is causing problem in calling API on server coz localstorage not supported in server components
Bro just saved me from getting frustrated.
Exaclty what I needed to learn, all in one video. Thank you!
My man, thank you very much for this perfect tutorial, I was stuck with the part of getting back the cookie but with this "serialize cookie" all of the errors disappeared .
Big hug from Argentina!
Love to hear it! Big hug for you too!
I'm trying to understand the NextResponse and cookies and api's from long time for authentication setup. this clarified my doubt. Thank you so much for sharing 😊
No problem, I'm glad it helped you out!
As a beginner in nextjs I learned a lot more from this video, than any other one I've watched. Thank you!
Love to hear that, thank you!
Bro... This tutorial is fantastic, straight to the point and very clear, thanks!.
Great! You NEED to add in Refresh tokens next :)
It takes genius to make it simple :)
thanks! that’s a lot of help for my school project 👍
that's what i was looking for thanks so much keep it up
Thank you, it means a lot to me that it has helped you!
This is exactly what I was looking for, could you make a video where we fetch the data and auth from Strapi? Thanks and congrats for your content. Really useful.
Jesus Christ man. You are amazing
Thank you! It means a lot!
Excellent, worked first time ... thank you, I've been pulling my hair out all day
Thank you so much bhai 🤗; This is what I actually want to implement
so inside of api/auth/login/route.ts where you had the if statement checking to make sure it was admin admin, that is where you would make a POST request to the database you are using? and then pass through the body to it as the values?
wow this was a nice video
I liked how you used the dashboard layout file as middleware, pretty cool
Wondering why not use actual NextJS middleware and authenticate at edge runtime?
You're amazing, bro❤️
Thanks man Love from Bangladesh
Great tutorial thank you!
I just have one question, how would you send the cookies from server side components?
What occurred tp me is each time I make the request from the server, I get the cookie manually and add it to the 'Cookie' header on each request, is there a better way to do it? ( I saved the cookie using cookies().set(...) from 'next/headers' after my login request)
I would appreciate your input, thank you :)
Backend is ready in Spring Boot , only i wantt that , how , ! Login page will be created !, and token how it is going to manage and stored, and how navigations will work , this is my first time seeing next i did even learn this just started coding , i am Angular developer !.
Now as per ssr , i learn here many things ,
here need gaurd on routing , if loged in then dashbaord else login page , ! this is simple but getting the errors now for the storing cookies etc.. now will see your idea, hope i will be able to implement it with middleware lets see ,
How can the client pass a token in the cookie if it's http only ? I thought this prevents the client JavaScript from being able to see and this pass the access tokens to the API calls ?
Why do we need an api route to check the cookies? Can't we just check it in an useEffect on client side?
What if the backend is from outside source API? And we can't verify the jwt from our nextjs app because we dont know the secret?
THANK YOU !!! THANK YOU VERY MUCH FROM RUSSIAN VIEWER !!!!!!!!!!!!!!!!!!!!!!!!!
so to protect every page and route we have to write that long ass code? isnt there a way to write middlewares like in a normal express way? Or is it the only work around to have a layout for every view and componenet?
great video, thanks
Im having a hard time trying to figure out how you would do this if the API you are trying to hit requires an API_KEY. From my experiences whenever i tried to do a fetch the fetch would fail becasue the key would be read as undefined within the client component?
You are amazing!
is there no way to do this apart from making my layout.tsx a client component. Because i want my layout.tsx to be a server component so that i can set the metadata object on that route.
Good video! but I have a doubt :( According to what I have read httponly cookies are the most secure way to do user authentication, can you explain me what is the reason in the context of the video implementation please, this topic has me a bit confused.
How do I use this flow when I have an external API route for login and user verification?
Great video, one question, is there a way that I can fetch data with cookie in server component and than update cookie on server side if it is wrong. I tried lot of things but it is imposible to set new cookie (with new access and refresh token) from server side component.
that was amazing thanks
Thank you !
very nice tutorial, thanks a lot ♥
Thank you!
hey im using express as backend.... how do i validate the cookie in middleware....
help me out
so how do i protect my route, when i login/register i get the cookie... but i dont have validation logic in next.js so without that how can i do please help out
not long ago cookies were disengouraged to use for vital session info because it's easy to steal the session information. but i've seen an increase in tutorials implementing cookies for authentication, is there a reason why?
What would be a good alternative approach?
Awesome!
I have a question: `verify` should return the username, right? So, I can response with that in /api/auth/me and get it back in the getUser() function in layout.tsx. But how can I pass the username to the page.tsx? Could I call the the endpoint /api/auth/me again from page.tsx since it will be deduplicated using fetch? Or what should I do in order to get the username in page.tsx?
hi excellent tutorials, if i have y own backend that return response jwt token, i dont have setting up the routes in api login auth right?
Hey man,
thank you, for great video.
I have a question:
I'm using t3 and in all examples I found they use Authorization: Bearer ... what do you think? Because I couldn't find the way to set-cookie httponly iwth tRPC and I thinking what is the difference ? thank you!
If you will answer my question, let's do it step by step:
- Authorization: Bearer vs headers set-cookie httponly
- tRPC - not possible to set cookie httonly if it is true
great video
God bless u
Nice one! Btw. what theme is that?
Thank you! I think the theme is atom one dark or one dark pro
It will send me request each time when you change the page?!! how we stop unnecessary request?!
Thank you
Thanks guys
now we can't use "use client" in layout.tsx I think its time to think about middleware or somthing
Do you know how to fix cookie not being set in browser? I did the same thing as you did but it's still didn't work. Btw great content keep it up!
Thank you! Check the timeout of the cookie, maybe it's set to `-1`. Double check it, if it's still not working see if you're blocking anything on your side of the browser. I hope you find a solution!
Good video thanks, but I got a doubt: If I delete the cookie from the browser and I visit the /dashboard or /settings page doing click with the mouse, I can continue browsing when the cookie does not exist. Only when I reload the page with F5 is when it detects that I have no cookie and redirects me to the login screen. How we should fix this? It's because the cache, I know, but how can we fix this?
try to use replace() rather than push()
Best Tutorial ever bro ty
Great to hear that!
i love you
I love you too!
I am developing a React frontend and I have backend lambdas basically that handle all the auth part. I get the httpOnly cookie and I see it correctly set. If I have let's say 10 private routes on my app ( /component1, /component2 etc), does it mean that every time the user tries to navigate to a page, we need to reach out to the server and validate the token? I don't want to use localStorage so I am trying to get my head around what is the most efficient way to reflect that a user is authenticated across the app once the httpOnly cookie is set. (I use react-redux also). Thanks for any tips
you can see a next-auth tutorial and try to recreate using this video
if arnold wanted to be a webdev
if I have an external nodeJS backend on a different folder, what will be different? as next-response can't be used
NextResponse is from next.js for your own backend you have to return the appropriate response. You can set the json data and the headers and anything else you need.
making layout.tsx a client component is not recommended by NextJS. and now with server actions most of it is outdated
Making layout a client component is nothing wrong and its commonly used to making transitions. Many people think that making layout client will make every page and component that is passed thru also client by default, wich is not true. Also what in that tutorial is outdated? Settings cookies in route handlers or reading them? And about server actions - good luck using experimental features in production.
name of the font that you use in the video??? pls
It's Fira Code
why not just make the DashboardLayout a server-side component to avoid the need for useeffect and that weird blink?
agree)
How to do this with next auth?
👍👍
For logout can we pass no payload to sign function?!
i think that you can create route to reset the token in server (as you said without body)
can we do this using next-auth
and what are benefits of not using next-auth
NextAuth is has it's own authentication, you can read more about the JWT part here: next-auth.js.org/configuration/options
Please implement refresh token
I'll keep that in mind for future videos!
@@tenacity_dev thank you
Hi I have made my APIs in node.js and saving token in localstorage. This is causing problem in calling API on server coz localstorage not supported in server components
I thought you will be using next is server side code but not. This is not good approach.
these are so complicated damn
great video
thank you