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
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 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.
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
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
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.
@@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 😅
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.❤❤❤❤
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 ) 🔥
as a developer, for me one of the best nextjs auth concept tutorial with clean and clear
Finally, the Next.js course is up! I knew you’d come through, dude🔥
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.
Thanks for sharing this. I am just in the middle of implementing my own custom auth
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.
You just got yourself a subscriber!
This is dope! I've always wanted something like this!
Thank you so much. 👏
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)
Fantastic video! Thank you for clearly explaining every step!
Very clear and useful really appreciate it!
I really like your videos 🎉
Hopefully we get more NextJs videos. Thanks a lot for a well explained content.
very rare video on youtube. Thanks a lot!!
I make the compliments of everyone my own, thank you for this
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
This a great tutorial. Thanks!
Hey, Bro Could you Please make this but in the scenario where Nodejs is the backend and Nextjs Frontend?
Great Video finally ! It would be nice to have auto refresh token implementation in nextjs
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
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.
WHEN WILL THE NEXT JS COURSE COME
Thanyou mr! u are a life saver
can this tutorial to be redone in nextjs 14 without useActionState as nextjs 15 is still quite buggy for production.
Finally 😮🎉🎉🎉
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?
Do you plan to make a video about Front-end architecture?
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.
You should take a look at next-safe-action. This takes it even a step further.
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 ?
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 to use session in client components??
Thank you! This is just what I need but how do you resolve the hydrated warning?
Thanks a lot buddy! I was just trying to add auth in my on going project and found ur tutorial, Thanks again <
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?
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
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
Great tutorial.
Confusing part is how do i extend the session expiry time, when they are logged in
Need help on this.. 🙏🏻🙏🏻
How about using react hook form for form handling? Can we combine the server action with react hook form?
yeah you can!
The source code already has the finished code in it. Is there no repo with the starter code?
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!
where is project start 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.
would be great to also maybe include refresh token rotation just to extend the feature already implemented
Refresh token ?
I'm surely missing something but, how do you call/categorize "jwt" when you say "without any 3rd party library" ?
Without libraries like nextauth,Oauth,or clerk
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 bro, you're great and love the explanation. Please, could you do the same process using NextAuth lib?
How can we get the token if we need to use it on client side?
Very cool
Thanks, but you didn't show getme - how do you know I'm logged in, you didn't show token update, interceptor on 401
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
how to access the token in client component?
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
Good stuff… just a little side note on login validation. There is no reason to validate passwords when logging in.
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
wow thanks
How I can implement csrf token in nextjs with authentication?
But how can I get details of logged In user from session using auth provider?
And where can I store my bearer token which I received from the API?
Can you make a video tutorial on custom fetch of nextjs like axios in a real project?
Same steps with NextJS 15 ? Which released today
yeah this is 15
how do we get session?
very very thanks
Not secure tho and could have a lot of issues since you're not refreshing that jwt token
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 😅
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.❤❤❤❤
next video on nextauth Please🙏
leh ugha
passwrong 😂😂
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.
has anyone else had this error:
Property 'set' does not exist on type 'Promise'.ts(2339)
session.tsx?
NextResponse.redirect("/login") throws an error. I solved it by doing NextResponse.redirect(new URL("/login", res.url))