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 ) 🔥
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!
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.
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)
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.
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
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.
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
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?
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!
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
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.
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.❤❤❤❤
@@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 😅
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.
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.
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 ) 🔥
Finally, the Next.js course is up! I knew you’d come through, dude🔥
as a developer, for me one of the best nextjs auth concept tutorial with clean and clear
Literally just found this dude yesterday, and today he puts out a video of EXACTLY what I was looking for!!!
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!
Just in time. I was researching the topic and this video came out. What a luck. Thanks.
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.
Hey, Bro Could you Please make this but in the scenario where Nodejs is the backend and Nextjs Frontend?
Finally 😮🎉🎉🎉
You just got yourself a subscriber!
This is dope! I've always wanted something like this!
Thank you so much. 👏
very rare video on youtube. Thanks a lot!!
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)
Thanks for sharing this. I am just in the middle of implementing my own custom auth
Fantastic video! Thank you for clearly explaining every step!
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.
Very clear and useful really appreciate it!
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
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
This a great tutorial. Thanks!
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.
Great Video finally ! It would be nice to have auto refresh token implementation in nextjs
Someone knows how to see details on hover (14:36) in VS Code ? The name of the extension please ? 🙏
Thank U for the Tuto 🙌
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
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.
Thank you! This is just what I need but how do you resolve the hydrated warning?
can this tutorial to be redone in nextjs 14 without useActionState as nextjs 15 is still quite buggy for production.
wow thanks
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 ?
WHEN WILL THE NEXT JS COURSE COME
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.
How to use session in client components??
Do you plan to make a video about Front-end architecture?
Very cool
I'm surely missing something but, how do you call/categorize "jwt" when you say "without any 3rd party library" ?
Thanks bro, you're great and love the explanation. Please, could you do the same process using NextAuth lib?
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
Would *LOVE* to see some more content on Remix or the new Tanstack Start
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?
How about using react hook form for form handling? Can we combine the server action with react hook form?
yeah you can!
Refresh token ?
Thanks a lot buddy! I was just trying to add auth in my on going project and found ur tutorial, Thanks again <
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?
Great tutorial.
Confusing part is how do i extend the session expiry time, when they are logged in
Need help on this.. 🙏🏻🙏🏻
how to access the token in client component?
How can we get the token if we need to use it on client side?
where is project start code?
would be great to also maybe include refresh token rotation just to extend the feature already implemented
How I can implement csrf token in nextjs with authentication?
The source code already has the finished code in it. Is there no repo with the starter code?
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.
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!
very very thanks
Thanks, but you didn't show getme - how do you know I'm logged in, you didn't show token update, interceptor on 401
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
Same steps with NextJS 15 ? Which released today
yeah this is 15
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
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
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.
Not only Next but also other frameworks like Nuxt and Remix and so many JS frameworks
Can you make a video tutorial on custom fetch of nextjs like axios in a real project?
Good stuff… just a little side note on login validation. There is no reason to validate passwords when logging in.
Not secure tho and could have a lot of issues since you're not refreshing that jwt token
Same thing for React Native, 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.❤❤❤❤
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 😅
next video on nextauth Please🙏
passwrong 😂😂
has anyone else had this error:
Property 'set' does not exist on type 'Promise'.ts(2339)
session.tsx?
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.
NextResponse.redirect("/login") throws an error. I solved it by doing NextResponse.redirect(new URL("/login", res.url))