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!

[@stacksagar]

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

[@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 ) 🔥

[@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!!!

[@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)

[@shakil-the-coding-monster]

very rare video on youtube. Thanks a lot!!

[@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!

[@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.

[@jaecheokkim99]

Very clear and useful really appreciate it!

[@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!

[@gagancg1433]

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

[@WallQ]

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

[@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

[@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.

[@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

[@merlinmeraldz]

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

[@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.

[@Q-Productions23]

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

[@serlismaldonado]

This a great tutorial. Thanks!

[@_andrewpeacock]

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

[@void-deus]

wow thanks

[@doomguy2135]

How to use session in client components??

[@muhammadobaidullahkhan5887]

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

[@Farruh_13]

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

[@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.

[@mehmethanifierenler3612]

very very thanks

[@mounir101]

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

[@bharatdubey83]

WHEN WILL THE NEXT JS COURSE COME

[@patrickamaechi1881]

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

[@joelcontreras4629]

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

[@rgagankumar5191]

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

[@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.❤❤❤❤

[@cb73]

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

[@ElektronikZarmaa]

Thank you. Where is the starter code? Is it a code-along tuto?

[@niklausmikaelson7332]

Refresh token ?

[@hieunguyen0801]

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

[@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?

[@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

[@MrR4P70R]

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

[@vira5995]

next video on nextauth Please🙏

[@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

[@novianto2346]

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

[@cosdensolutions]

yeah you can!

[@seagull2345]

Same thing for React Native, please.

[@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

[@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!

[@kennethlau8108]

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

[@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 🙌

[@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.

[@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.

[@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.

[@Sardorbek-Safarov]

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

[@vikashmaurya9824]

How I can implement csrf token in nextjs with authentication?

[@waleedsharif618]

Same steps with NextJS 15 ? Which released today

[@cosdensolutions]

yeah this is 15

[@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 😅

[@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

[@tonyvito5062]

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

[@modelzero5463]

where is project start code?

[@EmilWall]

passwrong 😂😂

[@m7mdnho154]

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