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!
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 ) 🔥
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)
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.
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!
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.
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
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.
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.
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.
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..?
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
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?
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.❤❤❤❤
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!
@@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 😅
Finally, someone not using 3rd party libraries to implement authentication. Thanks for this!
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!
The most underrated React/Next.js YT channel. you deserve more recogition Sir.
as a developer, for me one of the best nextjs auth concept tutorial with clean and clear
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 ) 🔥
Literally just found this dude yesterday, and today he puts out a video of EXACTLY what I was looking for!!!
Finally, the Next.js course is up! I knew you’d come through, dude🔥
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)
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.
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!
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.
Just in time. I was researching the topic and this video came out. What a luck. Thanks.
very rare video on youtube. Thanks a lot!!
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
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.
You just got yourself a subscriber!
This is dope! I've always wanted something like this!
Thank you so much. 👏
Very clear and useful really appreciate it!
Fantastic video! Thank you for clearly explaining every step!
Great Video finally ! It would be nice to have auto refresh token implementation in nextjs
Hey, Bro Could you Please make this but in the scenario where Nodejs is the backend and Nextjs Frontend?
I make the compliments of everyone my own, thank you for this
I really like your videos 🎉
Hopefully we get more NextJs videos. Thanks a lot for a well explained content.
Would *LOVE* to see some more content on Remix or the new Tanstack Start
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
Do you plan to make a video about Front-end architecture?
This a great tutorial. Thanks!
Thanks bro, you're great and love the explanation. Please, could you do the same process using NextAuth lib?
Thank you! This is just what I need but how do you resolve the hydrated warning?
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.
You should take a look at next-safe-action. This takes it even a step further.
Thank you. Where is the starter code? Is it a code-along tuto?
Thanks a lot buddy! I was just trying to add auth in my on going project and found ur tutorial, Thanks again <
would be great to also maybe include refresh token rotation just to extend the feature already implemented
WHEN WILL THE NEXT JS COURSE COME
Great tutorial.
Confusing part is how do i extend the session expiry time, when they are logged in
Need help on this.. 🙏🏻🙏🏻
Refresh token ?
I'm surely missing something but, how do you call/categorize "jwt" when you say "without any 3rd party library" ?
very very thanks
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.
Good stuff… just a little side note on login validation. There is no reason to validate passwords when logging in.
wow thanks
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
Same steps with NextJS 15 ? Which released today
yeah this is 15
How about using react hook form for form handling? Can we combine the server action with react hook form?
yeah you can!
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..?
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
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?
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.❤❤❤❤
How to use session in client components??
Thanks, but you didn't show getme - how do you know I'm logged in, you didn't show token update, interceptor on 401
Is the middleware file actually used here or it is just for server simulation? I dont see you use it anywhere so im curious
Next.js automatically uses it and runs it before every request
How can we get the token if we need to use it on client side?
Someone knows how to see details on hover (14:36) in VS Code ? The name of the extension please ? 🙏
Thank U for the Tuto 🙌
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.
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!
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.
Can you make a video tutorial on custom fetch of nextjs like axios in a real project?
can this tutorial to be redone in nextjs 14 without useActionState as nextjs 15 is still quite buggy for production.
How I can implement csrf token in nextjs with authentication?
where is project start code?
Same thing for React Native, please.
Are we actually getting Next.js tutorials on this channel?
What do you mean?
@@cosdensolutions Since you post react videos that's why.
Yeah sure, but that comment felt like it was a bad thing and I just wanted to clarify and understand
@@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 😅
Not secure tho and could have a lot of issues since you're not refreshing that jwt token
next video on nextauth Please🙏
passwrong 😂😂
NextResponse.redirect("/login") throws an error. I solved it by doing NextResponse.redirect(new URL("/login", res.url))