Next.js 13 jwt authentication protected routes httpOnly cookie with App Directory
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- You'll learn how to implement the authentication flow with JWT and httpOnly cookie. You will also learn how to protect routes and get user info by verifying the jwt token.
Repo link: github.com/Ten...
Previous version link: • Next.js protected rout...
#Next.js #protectedRoutes #jwt #verify #cookie #React #httpOnly #AppDirectory
Exaclty what I needed to learn, all in one video. Thank you!
Bro... This tutorial is fantastic, straight to the point and very clear, thanks!.
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 just saved me from getting frustrated.
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!
thanks! that’s a lot of help for my school project 👍
Great! You NEED to add in Refresh tokens next :)
It takes genius to make it simple :)
Jesus Christ man. You are amazing
Thank you! It means a lot!
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.
Thank you so much bhai 🤗; This is what I actually want to implement
Excellent, worked first time ... thank you, I've been pulling my hair out all day
Thanks man Love from Bangladesh
You're amazing, bro❤️
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.
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?
great video, thanks
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?
Why do we need an api route to check the cookies? Can't we just check it in an useEffect on client side?
You are amazing!
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 :)
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 ?
THANK YOU !!! THANK YOU VERY MUCH FROM RUSSIAN VIEWER !!!!!!!!!!!!!!!!!!!!!!!!!
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?
very nice tutorial, thanks a lot ♥
Thank you!
that was amazing thanks
How do I use this flow when I have an external API route for login and user verification?
Nice one! Btw. what theme is that?
Thank you! I think the theme is atom one dark or one dark pro
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 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
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?
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!
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?
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?
Thank you !
Best Tutorial ever bro ty
Great to hear that!
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?
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 ,
Awesome!
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
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.
now we can't use "use client" in layout.tsx I think its time to think about middleware or somthing
It will send me request each time when you change the page?!! how we stop unnecessary request?!
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?
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()
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
God bless u
great video
Thank you
Thanks guys
How to do this with next auth?
why not just make the DashboardLayout a server-side component to avoid the need for useeffect and that weird blink?
agree)
name of the font that you use in the video??? pls
It's Fira Code
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.
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.
if arnold wanted to be a webdev
i love you
I love you too!
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
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)
Please implement refresh token
I'll keep that in mind for future videos!
@@tenacity_dev thank you
👍👍
I thought you will be using next is server side code but not. This is not good approach.
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
these are so complicated damn
great video
thank you