Authentication Flow in Next.js (Complete Tutorial)

[@rog0079]

Finally, someone not using 3rd party libraries to implement authentication. Thanks for this!

[@karacan2469]

You've made an excellent point! The reliance on third-party libraries has become so common that I've developed a bit of an aversion to using many of them myself. This creator is a skilled developer, and the video is incredibly useful. I hope they continue making content like this!

[@yonathanhailemelekot5238]

The most underrated React/Next.js YT channel. you deserve more recogition Sir.

[@hikmetmelik]

Sir, you are the best instructor ever. I started a brand new project with Next.js and you uploaded a fresh new video right on topic. Thank you! (I commented before watching it, I'm sure it's great anyway ) 🔥

[@stacksagar]

as a developer, for me one of the best nextjs auth concept tutorial with clean and clear

[@victoreleanya4375]

Thanks for sharing this. I am just in the middle of implementing my own custom auth

[@kunnykk6468]

Finally, the Next.js course is up! I knew you’d come through, dude🔥

[@ShaynPutnam]

Literally just found this dude yesterday, and today he puts out a video of EXACTLY what I was looking for!!!

[@denisshvets7768]

Just in time. I was researching the topic and this video came out. What a luck. Thanks.

[@insensibility]

I was just watching one of your shorts, wishing you could do NextJS. You're awesome, man. I keep on recommending you to people wanting to learn React and Tanstack. You're the GOAT!

[@jaecheokkim99]

Very clear and useful really appreciate it!

[@mohamedsalimbensalem6118]

you're the best instructor I've ever found! I've been watching your tutorials since you had 1K subscribers. I'd really appreciate it if you could cover more about React Native.

[@BalaMathias]

You just got yourself a subscriber! This is dope! I've always wanted something like this! Thank you so much. 👏

[@farzany]

Fantastic video! Thank you for clearly explaining every step!

[@shakil-the-coding-monster]

very rare video on youtube. Thanks a lot!!

[@MrDerterminator1992]

Thank you so much for showing the bare minimum to really understand the required steps in auth. FYI, you get the pending state as the third argument directly from useActionState hook. const [state, formAction, isPending] = useActionState(fn, initialState)

[@WallQ]

I make the compliments of everyone my own, thank you for this

[@Q-Productions23]

Hey, Bro Could you Please make this but in the scenario where Nodejs is the backend and Nextjs Frontend?

[@merlinmeraldz]

I really like your videos 🎉 Hopefully we get more NextJs videos. Thanks a lot for a well explained content.

[@Vicsory]

Finally 😮🎉🎉🎉

[@serlismaldonado]

This a great tutorial. Thanks!

[@Amitkumar-ps1dt]

I am from India I am big fan of you and your tutorial specific on React, and Next Kindly make some videos on node, express and Mongo also Your videos helps a lot Thanks Love from India

[@jayelemartermulo8574]

thank you so much. you make it such that i can make a nextjs app with a separate backend without depending in 3rd party library

[@sonuinnervoyage44]

Great video about the vanilla next authenttication! it would have been more better if you could've added how to store the user details and consume it in the components whenever required.

[@gagancg1433]

Great Video finally ! It would be nice to have auto refresh token implementation in nextjs

[@bharatdubey83]

WHEN WILL THE NEXT JS COURSE COME

[@doomguy2135]

How to use session in client components??

[@thatcoldboy]

Really nice tutorial, please can you do this with an external backend written in django, nodejs, etc. and also show how refresh tokens will be implemented

[@nunoalmeida1970]

Very cool

[@void-deus]

wow thanks

[@modelzero5463]

where is project start code?

[@Farruh_13]

Do you plan to make a video about Front-end architecture?

[@_andrewpeacock]

Would *LOVE* to see some more content on Remix or the new Tanstack Start

[@codesius]

I believe useActionState also now returns isPending state (the old useFormState did not), so I don't think you need to rely on useFormStatus just for pending anymore. I could be wrong though. It's been some time since I read the docs on it.

[@LehmannMr]

You should take a look at next-safe-action. This takes it even a step further.

[@jujudev7]

Someone knows how to see details on hover (14:36) in VS Code ? The name of the extension please ? 🙏 Thank U for the Tuto 🙌

[@niklausmikaelson7332]

Refresh token ?

[@dimitriss3635]

So if then you wanted to get the user data you would get his is from the token and then fetch his data using the id right ?

[@joelcontreras4629]

Thank you! This is just what I need but how do you resolve the hydrated warning?

[@balduin_b4334]

did you verify that the middleware is working on a vercel deployment of nextjs? i dont think it works because jose isnt edge runtime compatible.

[@muhammadobaidullahkhan5887]

Thanks a lot buddy! I was just trying to add auth in my on going project and found ur tutorial, Thanks again <

[@kennethlau8108]

can this tutorial to be redone in nextjs 14 without useActionState as nextjs 15 is still quite buggy for production.

[@mounir101]

Thanks bro, you're great and love the explanation. Please, could you do the same process using NextAuth lib?

[@mehmethanifierenler3612]

very very thanks

[@skia515]

Seriously, I can't believe a big framework like NextJs don't have own authentication & authorization in-Built, programmer should make own auth system from scratch or using 3rd party libraries.

[@youarethecssformyhtml]

Not only Next but also other frameworks like Nuxt and Remix and so many JS frameworks

[@sidalisaadi1961]

Great video! I would like to know how auth solutions like clerk work, do you have to make a request for their api each time you need to verify the auth? how does the hooks to get user work..?

[@cosdensolutions]

You use their API as a backend, and then they also store cookies that the hooks use. It's basically what we did but they manage all for you and expose some hooks and components to use

[@LegSpinDrift]

how can you implement the refresh token functionality in this? when i create a session i get 2 tokens "access token" and "refresh token" .. when the access token expires i need the refresh token to make an api call and get the new access token and refresh token

[@novianto2346]

How about using react hook form for form handling? Can we combine the server action with react hook form?

[@cosdensolutions]

yeah you can!

[@halfmoonvibes]

how the client components are supposed to get access to the data that is unique to a user for example a database if they don't have access to cookies?

[@고민영-n3h]

how to access the token in client component?

[@maxkabechani]

Trying to do this but with separate backend. On login, I’m receiving the set-header but the server action doesn’t set the header in the client

[@patrickamaechi1881]

would be great to also maybe include refresh token rotation just to extend the feature already implemented

[@tomasburian6550]

The source code already has the finished code in it. Is there no repo with the starter code?

[@Sardorbek-Safarov]

How can we get the token if we need to use it on client side?

[@datle2863]

Is the middleware file actually used here or it is just for server simulation? I dont see you use it anywhere so im curious

[@cosdensolutions]

Next.js automatically uses it and runs it before every request

[@cb73]

Good stuff… just a little side note on login validation. There is no reason to validate passwords when logging in.

[@MrR4P70R]

I'm surely missing something but, how do you call/categorize "jwt" when you say "without any 3rd party library" ?

[@himankverma4617]

Without libraries like nextauth,Oauth,or clerk

[@abuzain859]

Your solution is solid, but the logic in the middleware isn’t fully accurate in a few production cases. I’d submit a pull request, but since you’ve combined all the video code into a single standalone repo, it’s not feasible. Here’s the issue with your middleware code: typescript Copy code if (isPublicRoute && session?.userId) { return NextResponse.redirect(new URL("/dashboard", req.nextUrl)); } Currently, this line redirects the user to the dashboard if they’re logged in and trying to access a public route. However, consider that some pages-like marketing or landing pages-should be accessible to all users, regardless of login status. This code would redirect logged-in users to the dashboard, which isn’t always correct. A better solution would be to categorize pages into three main types: protected, public, and neutral. Then, if the user is trying to access a public route and has a session ID, redirect them.

[@ntone.s]

Thanks for another great tutorial! Tried to run the project but received an error in terminal "Failed to verify session" after adding middleware.ts therefore login didn`t work. Also in session.ts two functions create and delete wants cookies to be awaited. Could you help please?

[@waleedsharif618]

Same steps with NextJS 15 ? Which released today

[@cosdensolutions]

yeah this is 15

[@rgagankumar5191]

Great tutorial. Confusing part is how do i extend the session expiry time, when they are logged in Need help on this.. 🙏🏻🙏🏻

[@vikashmaurya9824]

How I can implement csrf token in nextjs with authentication?

[@StarkElessar]

Thanks, but you didn't show getme - how do you know I'm logged in, you didn't show token update, interceptor on 401

[@hieunguyen0801]

Can you make a video tutorial on custom fetch of nextjs like axios in a real project?

[@skia515]

thanks for this video how can I check if user is logged in in home page? like if user logged in ? print his email other wise show login button

[@juansimonmerlo6854]

Excuse me i'm having a problem with useActionState and useFormStatus. I've already installed the same dependencies you had but I still get this error: "The 'react' module doesn't have any 'useActionState' exported. Same error with react-dom and useFormStatus. Thanks!

[@harou22]

Can you not crash the server by spoofing the formData requests and sending e.g. null instead? Object.fromEntries(null) will throw with type error.

[@kinggrey2511]

Can we have more interviews like proper interview I got asked questions like event loop, event bubling difference between http server and express etc stuff I know it was a kinda big company but iam a 3rd students like who ask those questions. I prefer these kind of interview questions please also thanks for your hooks playlist.❤❤❤❤

[@seagull2345]

Same thing for React Native, please.

[@vira5995]

next video on nextauth Please🙏

[@tonyvito5062]

Not secure tho and could have a lot of issues since you're not refreshing that jwt token

[@dasarimanoj3086]

Are we actually getting Next.js tutorials on this channel?

[@cosdensolutions]

What do you mean?

[@dhanrajshetty645]

​@@cosdensolutions Since you post react videos that's why.

[@cosdensolutions]

Yeah sure, but that comment felt like it was a bad thing and I just wanted to clarify and understand

[@dasarimanoj3086]

@@cosdensolutions Noo 🥲sorry if I have framed the question in that way. I was asking can we expect more of nextjs content on this channel further going is what I was requesting you 😅

[@EmilWall]

passwrong 😂😂

[@lorena4293]

has anyone else had this error: Property 'set' does not exist on type 'Promise'.ts(2339) session.tsx?

[@m7mdnho154]

NextResponse.redirect("/login") throws an error. I solved it by doing NextResponse.redirect(new URL("/login", res.url))