Next.js 13 jwt authentication protected routes httpOnly cookie with App Directory

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

[@amangoyal1583]

Great tutorial bro. I was stuck in it from 2 days.

[@verdaderoken]

Exaclty what I needed to learn, all in one video. Thank you!

[@leventegaborlevai4897]

As a beginner in nextjs I learned a lot more from this video, than any other one I've watched. Thank you!

[@tenacity_dev]

Love to hear that, thank you!

[@saifmohammad733]

Bro just saved me from getting frustrated.

[@danielalejandrogonzalezmor9437]

Bro... This tutorial is fantastic, straight to the point and very clear, thanks!.

[@ivanerlich1272]

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!

[@tenacity_dev]

Love to hear it! Big hug for you too!

[@dudduvenkatesh9077]

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 😊

[@tenacity_dev]

No problem, I'm glad it helped you out!

[@stevemcqueen2887]

Great! You NEED to add in Refresh tokens next :)

[@dexcoder1207]

that's what i was looking for thanks so much keep it up

[@tenacity_dev]

Thank you, it means a lot to me that it has helped you!

[@kiraizumi460]

thanks! that’s a lot of help for my school project 👍

[@FahimRayhan]

Thank you so much bhai 🤗; This is what I actually want to implement

[@pegaessefeedback]

Jesus Christ man. You are amazing

[@tenacity_dev]

Thank you! It means a lot!

[@MadRad1000]

Excellent, worked first time ... thank you, I've been pulling my hair out all day

[@codingwithrendi]

It takes genius to make it simple :)

[@motivatedlifex3]

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.

[@mshubitidze]

wow this was a nice video I liked how you used the dashboard layout file as middleware, pretty cool

[@Uferizer]

Wondering why not use actual NextJS middleware and authenticate at edge runtime?

[@niloykumar8503]

Thanks man Love from Bangladesh

[@mohammedmshal5483]

You're amazing, bro❤️

[@jacobmacfarlane8189]

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?

[@miguelcardenas2147]

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 :)

[@gfaso5097]

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.

[@vitord.cardoso4666]

great video, thanks

[@muazothman7416]

You are amazing!

[@NOTHING-en2ue]

very nice tutorial, thanks a lot ♥

[@tenacity_dev]

Thank you!

[@jozekuhar2895]

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.

[@jorgemendez4517]

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?

[@zabialy2919]

Nice one! Btw. what theme is that?

[@tenacity_dev]

Thank you! I think the theme is atom one dark or one dark pro

[@Abramov1]

THANK YOU !!! THANK YOU VERY MUCH FROM RUSSIAN VIEWER !!!!!!!!!!!!!!!!!!!!!!!!!

[@jacobmacfarlane8189]

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?

[@daviddoyle7580]

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 ?

[@erkikadhafi9155]

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?

[@uraharaYorrch]

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?

[@tenacity_dev]

What would be a good alternative approach?

[@AdamBastow-y4g]

Thank you !

[@motivatedlifex3]

Why do we need an api route to check the cookies? Can't we just check it in an useEffect on client side?

[@KaMZaTa]

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?

[@dovahkiin3362]

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

[@riveto_ir]

that was amazing thanks

[@SaasCara]

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

[@CodeWithRains]

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 ,

[@mohammedmehdi1940]

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.

[@MythicNanda-ug1vh]

Awesome!

[@rizkyverandi1916]

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!

[@tenacity_dev]

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!

[@adesn_beats]

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?

[@Anas_Alaqeel]

now we can't use "use client" in layout.tsx I think its time to think about middleware or somthing

[@DevTomazetti]

How do I use this flow when I have an external API route for login and user verification?

[@socat9311]

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

[@migliorelli]

you can see a next-auth tutorial and try to recreate using this video

[@NicoTorDev]

Best Tutorial ever bro ty

[@tenacity_dev]

Great to hear that!

[@alexiglesias3464]

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?

[@inhibate]

try to use replace() rather than push()

[@devicebattlezone]

Thanks guys

[@supercrunch3367]

why not just make the DashboardLayout a server-side component to avoid the need for useeffect and that weird blink?

[@inhibate]

agree)

[@lararawf6100]

It will send me request each time when you change the page?!! how we stop unnecessary request?!

[@stevebendersky2056]

if I have an external nodeJS backend on a different folder, what will be different? as next-response can't be used

[@tenacity_dev]

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.

[@prashlovessamosa]

Thank you

[@yarso3464]

name of the font that you use in the video??? pls

[@tenacity_dev]

It's Fira Code

[@pelazas1]

great video

[@doloreslaflipoflopo2746]

making layout.tsx a client component is not recommended by NextJS. and now with server actions most of it is outdated

[@lockhart-uno]

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.

[@lararawf6100]

God bless u

[@romania-n6q]

if arnold wanted to be a webdev

[@laxmandeadpool8260]

can we do this using next-auth and what are benefits of not using next-auth

[@tenacity_dev]

NextAuth is has it's own authentication, you can read more about the JWT part here: next-auth.js.org/configuration/options

[@lararawf6100]

For logout can we pass no payload to sign function?!

[@mouawiasharedi6661]

i think that you can create route to reset the token in server (as you said without body)

[@nabinnath9]

How to do this with next auth?

[@naxiryu1425]

Please implement refresh token

[@tenacity_dev]

I'll keep that in mind for future videos!

[@naxiryu1425]

@@tenacity_dev thank you

[@alimoayedi6371]

👍👍

[@suhakarkhy639]

i love you

[@tenacity_dev]

I love you too!

[@imvivekkushwaha]

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

[@abdchuhan]

I thought you will be using next is server side code but not. This is not good approach.

[@66yozgattandrkebap48]

these are so complicated damn

[@duynguyenucthanh3522]

thank you

[@MrTobypowell]

great video