I have been watching a lot of videos on how to setup properly auth , all of them are so overcomplicated for no reason , Your videos are so straightforward , Keep up the awesome work!
What a tutorial! omg salute sir!!. You saved my biggest project from being using another authentication instead of nextauth bacause of middleware auth/ mongoose model access issue. Thank you for your awesome explaination!
This is a great explaination of using middleware. Thank you so much. You have become my favorite dev instructor. I'm looking forward to more amazing videos!
Sir your videos are GEM !! . I can't thank you enough , You made me learn about Next Auth and Middlewares in a very smooth way and I really look forward to follow your upcoming videos whether it is about Next JS concepts or Project Videos. I will do them all. I hope you grow fast and I expect a lot from you sir . Lots of love
I was looking for middleware for nextjs and next auth when I came across your video. Now I'm going to start watching all of your next auth videos. What a great explanation. Thank you, and keep publishing more videos about authentication and deployment.
@@tapasadhikary I found your other videos in the description and started in from part 1, also I have a question in Navbar Component when receiving the auth value its still undefined after logging in and need to reload the page to get the value of auth.
@@RomFeliciano it is a bug in the next auth beta now. It happens sporadically. A timing issue. If you want it to make it work all time, make the nav client component and use the useSession hook instead.
@@tapasadhikary hahaha. After watching the video I wanted to give you some input. I would love to see this becoming a full project!! Especially using shadcn, role based authentification, some CRUD interactions with a DB collection and maybe Stripe, so that one could build out a SAAS and accept payments. Here is an idea on what this project could look like (if you don't already have something in mind): Scenario: We are building a service for book clubs where multiple book clubs can subscribe to different libraries, and each book club can have multiple members with different roles and permissions (e.g., admin, member). Each member can also be part of multiple book clubs. Explanation: 1. Book Clubs Collection: • Stores information about each book club, including their subscription details for different libraries and the members who belong to these book clubs. • Each book club has a unique ID, a name, and a Stripe customer ID for payment processing. It also includes a list of members with their assigned roles (e.g., admin, member). 2. Members Collection: • Stores information about each member, including their personal details and the book clubs they are associated with. • Each member has a unique ID, name, email, password, and a list of book clubs they manage or belong to, along with their roles in those book clubs. 3. Libraries Collection: • Stores information about each library available for subscription. • Each library has a unique ID, a name, address, contact details, and a Stripe product ID for the subscription. Only admins of book clubs can manage the subscriptions or change details for the specific subscriptions of their book clubs. There could be a "User Dashboard" for each user where they can see a list of all the book clubs they are part of and a "Book Club Dashboard" where one can see all the libraries this book club has access to (on this page we could also fetch a list of books from the library's API and display it). A person can register a new book club (where he will be the SuperAdmin), invite other people to his book club using e.g. their email and manage their roles. I hope you could somewhat follow this explanation and get the idea I am going for. (I just thought of that structure and don't know if it makes sense the way I described it hahaha)
@@steffenjusmann6276 Thank you! It makes complete sense to me. In fact, I have a few similar ideas. I plan to start with smaller projects and then gradually bigger ones. I have now noted your project idea too 😀
After login the user should have been taken to the destination page. A very popular use case missing here. I think It will be add in the next video. Thank you.
Great content, thank you. In my app I don't have any public route and I'm using keycloak as a provider. I haven't understood how can I redirect to the keycloak login page everytime the auth.user is null. Do you know if we can build the keycloak login url to redirect to in our Middleware? The examples I've found online always show how to do it on the click of a Login button or url
Hi there, I believe I have the solution to your queries. You have the Keycloak login URL, and there is an API to check if auth.user is null or not. It's simple: if your route is protected and auth.user is null, you can use a next redirect function to send users to the Keycloak login page. That's how you can achieve this behavior.
It's not that simple. Since we are using openid-connect, the url contains several variables that are generated following the protocol. AuthV5 hides all this behind the code of the "signIn('keycloak')" function but I cannot call it in the middleware
@@mfmanca2006 Okay, maybe in your case its bit different, cause when I worked on that, I had very straight forward signing link like: "localhost:8080/realms/master/protocol/openid-connect/auth?client_id=myclient" and I can use this link to redirect keycloak signing page, based on my user authentication.
Sir your teaching is just awesome. I want you to teach us how to store users when they logged in with google/github. Then after they can set their password for that logged in app.
sir when protecting a api route why auth function always return null , im checked over the internet many of having this isssue but in here your environment doesnot include that isssue but when im doing exact same its giving me this nullish situation what may the cause , the only difference i seen is you use v5 beta17 im yusing v5 beta20 in next-auth version
lets hope this video will be able to explain this problem >> Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddlew are() (or the deprecated authMiddleware()). Please ensure the following: - clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next. js Middleware. - Your Middleware matcher is configured to match this route or page.
i have a question. why did we suddenly moved to nextAuth instead of simple jwt based auth we did in MERN tech stack? What i am seeing is nextAuth is way more complex.
I moved to Next-Auth as it fits well with Next.js(especially with the server components), but we are surely not limited to it. In fact I am going to show things without Next-Auth soon.
when splitting up the code sir, I understand that we need to pass in a shallow config inside the nextAuth. But how then do we get the legit session from auth() since we passed in a shallow config file that doesn't have the providers?
@@tapasadhikary I'm looking forward for that video. Btw, do you think it is still okay to use credential providers without access token and refresh token even if it is only a portfolio project? I'm wondering if that would be an issue if I apply for a job and show them my fullstack project.
Yeah yeah just encrypting password not enough for real life app… for portfolio it’s still ok IMO… what kind of interview you are planning? Years of experience?
I don't have prior working experience related to web dev so my goal is to land a job as a jr. frontend dev or any entry level web dev job. I'm worried that my skills are not good enough to land a job.
@user-vf8bd3mm5n the only tips I can give is do practice and do a planned one. Worrying about not having skills will not increase it. You need to practice and build things… as many as you can. That build skill.
i see many of the website in there , when the user register it is not login again for authentication , but you had implement ,like when the register the user than user have to login first for the access the page this is bad paractice please make a video of this
After login user can go to any pages without any restrictions… the restriction we are putting inside middleware only for non authenticated users for accessing protected(non public) routes. Hope it is clear 🙌
Great question! It is advisable to have one middleware and export import the functionalities in the different files. This is what the Next.js documentation says: "While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers."
I have been watching a lot of videos on how to setup properly auth , all of them are so overcomplicated for no reason , Your videos are so straightforward , Keep up the awesome work!
@@shadiflo super, thanks! ❤️
What a tutorial! omg salute sir!!. You saved my biggest project from being using another authentication instead of nextauth bacause of middleware auth/ mongoose model access issue. Thank you for your awesome explaination!
👍 awesome
This is one of the best series for next auth even the nextauth doc is poor and it's an amazing learning. Please keep up the good work
Thank you 🙏
This is a great explaination of using middleware. Thank you so much. You have become my favorite dev instructor. I'm looking forward to more amazing videos!
❤️❤️❤️
Sir your videos are GEM !! . I can't thank you enough , You made me learn about Next Auth and Middlewares in a very smooth way and I really look forward to follow your upcoming videos whether it is about Next JS concepts or Project Videos. I will do them all. I hope you grow fast and I expect a lot from you sir . Lots of love
🙏🙏❤️❤️ thanks a lot for wishes and your comments made my day.
I was looking for middleware for nextjs and next auth when I came across your video. Now I'm going to start watching all of your next auth videos. What a great explanation. Thank you, and keep publishing more videos about authentication and deployment.
Wow, thanks a lot for your comments. Sure thing, I shall continue for sure.. keep watching.. please let me know how you find the other videos too.
@@tapasadhikary I found your other videos in the description and started in from part 1, also I have a question in Navbar Component when receiving the auth value its still undefined after logging in and need to reload the page to get the value of auth.
@@RomFeliciano it is a bug in the next auth beta now. It happens sporadically. A timing issue. If you want it to make it work all time, make the nav client component and use the useSession hook instead.
@@tapasadhikary I see... So that's why my console log of session auth in my middleware also not running after logging in. Thanks Sir
Finally able to run middleware properly! Thanks a lot!
Glad it helped you❤️
Awsome tutorial!! The most easily understandable tutorial I have ever watched. You are doing a great job.
@@asadullahalgalib2129 thanks a lot ❤️❤️
😁😁😁😁 vai first impression ta sei hoyce.
Thank you
Been waiting for this one hahaha - and hope the next video will come soon :)
haha... now that's a pressure on me 😄
@@tapasadhikary hahaha. After watching the video I wanted to give you some input. I would love to see this becoming a full project!! Especially using shadcn, role based authentification, some CRUD interactions with a DB collection and maybe Stripe, so that one could build out a SAAS and accept payments.
Here is an idea on what this project could look like (if you don't already have something in mind):
Scenario:
We are building a service for book clubs where multiple book clubs can subscribe to different libraries, and each book club can have multiple members with different roles and permissions (e.g., admin, member). Each member can also be part of multiple book clubs.
Explanation:
1. Book Clubs Collection:
• Stores information about each book club, including their subscription details for different libraries and the members who belong to these book clubs.
• Each book club has a unique ID, a name, and a Stripe customer ID for payment processing. It also includes a list of members with their assigned roles (e.g., admin, member).
2. Members Collection:
• Stores information about each member, including their personal details and the book clubs they are associated with.
• Each member has a unique ID, name, email, password, and a list of book clubs they manage or belong to, along with their roles in those book clubs.
3. Libraries Collection:
• Stores information about each library available for subscription.
• Each library has a unique ID, a name, address, contact details, and a Stripe product ID for the subscription.
Only admins of book clubs can manage the subscriptions or change details for the specific subscriptions of their book clubs. There could be a "User Dashboard" for each user where they can see a list of all the book clubs they are part of and a "Book Club Dashboard" where one can see all the libraries this book club has access to (on this page we could also fetch a list of books from the library's API and display it).
A person can register a new book club (where he will be the SuperAdmin), invite other people to his book club using e.g. their email and manage their roles.
I hope you could somewhat follow this explanation and get the idea I am going for. (I just thought of that structure and don't know if it makes sense the way I described it hahaha)
@@steffenjusmann6276 Thank you! It makes complete sense to me. In fact, I have a few similar ideas. I plan to start with smaller projects and then gradually bigger ones. I have now noted your project idea too 😀
Just loving your content
Thanks a lot ❤️
You're really awesome, Keep going . Please do some really projects
Very informative video, thanks for sharing with us..
Thanks a lot ❤️
A suggestion for a next video...
The topic of i18n an app with auth v5 is quite interesting (you need to mix two middlewares into one...)
Yep, it’s in my mind too… so why I gave an intro of middleware before doing an i18n video. Thanks a lot for your suggestions
After login the user should have been taken to the destination page. A very popular use case missing here. I think It will be add in the next video. Thank you.
Yep we can do that. You can also try that and let me know if needs help.
@@tapasadhikary I have done it by query parameter. But what is the correct method of next.js for this?
Please make a video on Server and Client Components,along with Server actions🙏🙏
In radar
please make a video about access and refresh token with rotation using next auth v5
That's next
شرح ممتاز شكرا جزيلا
Thanks
Great content, thank you. In my app I don't have any public route and I'm using keycloak as a provider. I haven't understood how can I redirect to the keycloak login page everytime the auth.user is null.
Do you know if we can build the keycloak login url to redirect to in our Middleware?
The examples I've found online always show how to do it on the click of a Login button or url
Hi there, I believe I have the solution to your queries. You have the Keycloak login URL, and there is an API to check if auth.user is null or not. It's simple: if your route is protected and auth.user is null, you can use a next redirect function to send users to the Keycloak login page. That's how you can achieve this behavior.
It's not that simple. Since we are using openid-connect, the url contains several variables that are generated following the protocol. AuthV5 hides all this behind the code of the "signIn('keycloak')" function but I cannot call it in the middleware
@@mfmanca2006 Okay, maybe in your case its bit different, cause when I worked on that, I had very straight forward signing link like: "localhost:8080/realms/master/protocol/openid-connect/auth?client_id=myclient" and I can use this link to redirect keycloak signing page, based on my user authentication.
Sir your teaching is just awesome. I want you to teach us how to store users when they logged in with google/github. Then after they can set their password for that logged in app.
Thank you! Storing the logged in user part is already covered in another video. Please check out.
thank you i learned a lot
Excellent 🙏
sir when protecting a api route why auth function always return null , im checked over the internet many of having this isssue but in here your environment doesnot include that isssue but when im doing exact same its giving me this nullish situation what may the cause , the only difference i seen is you use v5 beta17 im yusing v5 beta20 in next-auth version
Take love dada ❤️❤️❤️
You too ❤️
lets hope this video will be able to explain this problem >> Error: Clerk: auth() was called but Clerk can't detect usage of clerkMiddlew
are() (or the deprecated authMiddleware()). Please ensure the following:
- clerkMiddleware() (or the deprecated authMiddleware()) is used in your Next.
js Middleware.
- Your Middleware matcher is configured to match this route or page.
i have a question. why did we suddenly moved to nextAuth instead of simple jwt based auth we did in MERN tech stack? What i am seeing is nextAuth is way more complex.
I moved to Next-Auth as it fits well with Next.js(especially with the server components), but we are surely not limited to it. In fact I am going to show things without Next-Auth soon.
when splitting up the code sir, I understand that we need to pass in a shallow config inside the nextAuth. But how then do we get the legit session from auth() since we passed in a shallow config file that doesn't have the providers?
wow so amazing
@@azaanibrahimmohamed2846 thank you, means a lot
how to save the user details in DB if user signin with social providers.
Hi Manas, check the video of persisting data I have published. Showed it there.
@tapasadhikary can i generate the session at the time of user register which will help to user to do not login again ...
@@kamleshkumar-c1p1h you should not. Unless it is a single sign-on, you should have a user login after a successful registration.
Can you do a video about jwt access token and refresh token in nextauth credentials?
I have started on it and stuck on one point to decrypt the access token.. the sooner I fix that, I will create a video. Stay tuned.
@@tapasadhikary I'm looking forward for that video. Btw, do you think it is still okay to use credential providers without access token and refresh token even if it is only a portfolio project? I'm wondering if that would be an issue if I apply for a job and show them my fullstack project.
Yeah yeah just encrypting password not enough for real life app… for portfolio it’s still ok IMO… what kind of interview you are planning? Years of experience?
I don't have prior working experience related to web dev so my goal is to land a job as a jr. frontend dev or any entry level web dev job. I'm worried that my skills are not good enough to land a job.
@user-vf8bd3mm5n the only tips I can give is do practice and do a planned one. Worrying about not having skills will not increase it. You need to practice and build things… as many as you can. That build skill.
what if I want to make this route as public "/products/[productId]" how do we do that?
That's already shown and taken care in the code using the startsWith function. Everything startsWith products will work.
@@tapasadhikary thanks lot for nice tutorial
super
❤️❤️
Dada please a tutorial for Uploading image like Cloudinary with NextJs
Yes, I want to do a project with cloudinary, not only upload but also to use their API functions.
Is Cloudinary only for images or it works with other files also?
please about refresh token if we have our own api 🙏
I’m building that app
Cool dada
Thanks vai
can i write multiple middleware and multiple matcher?
Replied above
i see many of the website in there , when the user register it is not login again for authentication , but you had implement ,like when the register the user than user have to login first for the access the page this is bad paractice please make a video of this
I didn't understand your comment clearly.
@@tapasadhikary can i generate the session at the time of user register which will help to user to do not login again ...
how user redirect to buy page after login? 49:16
After login user can go to any pages without any restrictions… the restriction we are putting inside middleware only for non authenticated users for accessing protected(non public) routes. Hope it is clear 🙌
Love from pakistan
Welcome
Sir Please make React Js Course
I already have a reactjs series, sir… please check
caching please
Do you want to learn caching?
Not working in production.
What error do you get and what doesn't work? Where do you deploy? Whats the edge configuration?
❤🔥❤💥
❤️❤️❤️
can i write multiple middleware and multiple matcher?
Great question!
It is advisable to have one middleware and export import the functionalities in the different files. This is what the Next.js documentation says:
"While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers."