Thank you, after two days of trying to figure out the credentials provider using the docs and other videos, I finally got it to work with your video. Subscribed.
@@tapasadhikary can't wait for the mongodb integration to store user data in a real database and persist the data instead of using a static file. really excited for that one, and i'm sure that one will be as excellent as well. your videos really help clarify the ideas and make them stupidly simple. much appreciated for the videos sir
Thanks! I would suggest you to look into the videos from this playlist from the beginning. Let me know if you find anything missing, would love to add 👍
Thanks for making this video for us.. I am requesting to you if possible make a one video about route protection in next js. Like public route ,private route, restricted route. How we protect our route properly? Thanks again ❤
Awesome video and very helpful. Sir, I have a request for you. I need a video on adding callback and multiple middleware to include additional custom fields in the JWT. Include extra fields for the user's role and name upon social media login. We eagerly await these updates.
this is one of the reasons i can't stand typescript, it never helps, just giving me wrong errors for wrong reasons, i use the credentials provider just as you have it on the video and i got this error message ( TypeError: (0 , next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_3__.CredentialsProvider) is not a function ) as soon as i added that auth.ts file to my project, everything has went to bad , cant even see my app anymore because all the error messages that arent even errors, just some imported lines that i haven't gotten to yet and are not even connected to the rendered part of the application 🤦♂🤦♂ i cant stand typescript and i hope nextauth fixes their auth.ts file to include js files as well because this is rediculous, and by the sir, if it is possible, can you do a video on adding stripe and how to work with stripe webhook and subscriptions for users? that's the only part of my saas I'm missing now,
@@tapasadhikary thank you so much sir, you are best teacher on youtube by far, i wish i had money right now, i'd have no problem sponsoring you because you are just that good with very valuable teaching technique
@antwarior hey no worries, just focus on your learning and building. If any way you want to help, just let your friends know about my channel and effort. That will be more than enough 😀❤️
Bro add features in this project: 1. Forget password 2. Email verification 3. User profile update including image with cloudinary 4. Prevent logged user data loadings
Hi Tapas Sir, I have a question. Where SEO isn't important (admin panel or a single component like a form), should I still try to make most of the components server components for faster loading because they're closer to the server? For example, if I use: Instead of using "use client" and handling it with onSubmit, am I correct in thinking this helps keep the component as a server component? Would it be an issue if I made this a client component, considering forms don't need SEO? Thank you so much for your guidance! ❤
It is a great question. Thanks for asking! You would consider a component as a server component for any or all of these reasons: 1. You do not want all JavaScript and code of the component to be downloaded on the client browser. 2. You want to load the page faster, hence a better UX 3. You want to load the page with the most complete content into it, so better SEO. While making a component a Server component, you would have to consider whether any part of the component needs client interaction. If so, that part can be isolated, pushed down into the component hierarchy, and made a client component. With these stands, you can now design your component tree such that most of your components can be server components as they are close to the data source, can be built with content, and can be made available faster. The interactions as the child components take care of the user interactions like events. However, your example is a bit different than the server component. There doSocialLogin is a server action, not a server component. Server actions are just functions that perform a particular action on the server(like login, downloading PDF, sending email, etc). Server components are the fully baked UI. With these clarifications, you will select something as a server action rather than doing it on the client side, when it makes sense to do it on the server for more processing power, and data availability on the server, or maybe asynchronously continuing it, even when the user closes the browser :-) In this case, also, you need to be mindful of the server costs of executing them. Most of the cloud systems (Vercel, netlify, AWS, etc) costs you to execute the functions on the server side. So, is it worth paying for that vs. executing them on the server as server action? I know the answer is long, but it is important to learn why an approach must be used. That's why I teach also multiple options :-D I hope it is clear now. Let me know.
@@tapasadhikary Thank you very much. 🙏 Now I have some confusion in my mind. "use client" // I can't use it because I am using the async function. import Lists from "@/app/components/Lists"; import { useState } from "react"; const Todo = async () => { const [search, setSearch] = useState(""); const response = await fetch(`${process.env.BASE_URL}/api/todos`, { cache: "no-store", }); const result = await response.json(); const performSearch = result.filter((res) => res.item.toLowerCase().includes(search.toLowerCase()) ); return (
{performSearch.length} {title}
setSearch(e.target.value)} />
); }; export default Todo; I have two questions here: 1. You said that we should not use server components in client components. Then here what should be the solution? 2. If I use server components in client components, does it mean the server component will be the client component? Although, I can see the items when I open "view page source".
Registration process you can keep separate in most cases as I have shown in the video. With credential provider you can do additional prechecks of auth before you register user.
@@tapasadhikary btw, thank you so much for these videos. Last week, I tried to create a small project using NextJS and Auth.js. I stopped it and switched to plain React.js and custom authentication. But just today I was able to make the 3 logins (Google, GitHub & credentials) work. I wished I saw your videos earlier. It motivates me to learn NextJs more. Keep it up!
Cool tutorial for begginers, but i think, handle error is not properly yet, the console is broken. im figuring out why , v5 is still in beta and should be breakng the console.
I am using session, strategy, database. So how to manage session? I can create the account, but can't logic with cred, any guide please? Not able to catch from the video too.
How can i receive custom message thrown using throw new Error ( ) method , and how can i display the correct error like password not correct or something else
If you are having a server action, you can always catch them by checking the Error type and rethrow it from the catch block with a suitable error message. Then in your form or invocation point, you can catch the error again and show it on the client side.
now session is not supported or they want us to use the session in server components, but what if i have a component inside component then to pass the session i need to do props drilling. how can i solve this problem? I tired the old session provider method as mentioned in docs but it is not updated realtime, i mean my profile component is a client component and i use usesession there but the accesstoken or user object is not initialized there, when i log the value inside of use effect first it is null then after few seconds or if i do a refresh then the info is there. how can i solve this problem, please help
If you are having a server action, you can always catch them by checking the Error type and rethrow it from the catch block with a suitable error message. Then in your form or invocation point, you can catch the error again and show it on the client side.
You have some knowledge about these concepts in past. But we came to learn , why can't you explain in much clear way rather than hurry .Anyway i love the way you teach and following you since 1 year. But teach slowly and clearly when such topic came.
@@goutham56-s6q thank you! These concepts are deep, you are right. That's why these are splitted as a series. If you have a specific question, feel free to ask. If I know the answer, will explain again. Thank you for learning.
@@tapasadhikary In this authentication we used strategy as 'jwt', means we definitely need a secret key and some logic. How can we do it. Using normal session or jwt which is best.
@@tapasadhikary If this was another channel, I wouldn't comment. However, since we have high expectations for your videos, I felt the need to share my thoughts. If you plan to make another series, please create a longer video with timestamps. This will help attract more members to view and subscribe.
@@goutham56-s6q Thanks man! I loved that.. yep will do. I got your point.. giving more in-depth explanation on the foundational concepts while teaching a library/framework like next-auth. Thanks! Cheers.
Have a backend that issues a refresh token and then use the callback handle to manage it. I will show it to Google in an upcoming video and provide guidance on how to do it with credentials following the same. Stay tuned.
Sir, Very helpful video. But I have a very serious doubt In V4 we used to return null; now in V5 returning null or retuning a custom error; gives a callbackRouteError; why it that. Sir I request please clarify this
Great question, I explored the same recently. V5 has not implemented the same. There are already ongoing discussions I found on their github isssues. The best solution I found so far is to catch the exception in your action and check the type of it. Based on the type, you can rethrow the exception and relevant messages from the action. V5 is still in beta so we have to see if there are further updates on this regard. If you also find anything in future, let us know. Lets learn together 🙌
Thank you, after two days of trying to figure out the credentials provider using the docs and other videos, I finally got it to work with your video. Subscribed.
❤️❤️🙏
same mission for me currenly. This comment gave me hope. Checking now!
This video deserves more than 1 million views. Thank you so much!!
Glad it helped.. Thanks a lot. Yo! let's make it happen.. let's go to millions 🚀
Best video on youtube for nextAuth
That's so good to hear 😊
You made it so easy to understand ! Love from Bangladesh 🇧🇩 ❤
@@Rasel720 thanks vai ❤️
Just in time! cant wait for the MongoDB integration tutorials.
I am very glad.
The process was so smooth.
Thanks man!
Thank you for the tutorial. The way you explain is so helpful and easy to understand.
You're very welcome!
excellent video, many thanks for taking the time to make this video and make it so excellently
You're very welcome!
@@tapasadhikary can't wait for the mongodb integration to store user data in a real database and persist the data instead of using a static file. really excited for that one, and i'm sure that one will be as excellent as well. your videos really help clarify the ideas and make them stupidly simple. much appreciated for the videos sir
@@tawsifhaque9360 thanks, man! Make sure you go through my earlier video of persisting data in mongo. It's in the same series.
Thank god i found this video very early.
Will be waiting for the next video Dada ❤
❤️❤️
Thanks a lot. That was so helpful.
Glad it was helpful!
Absolutly amazing.
Nice One :), I would like if you can do basic things also. like step by step guide about NextJs
Thanks! I would suggest you to look into the videos from this playlist from the beginning. Let me know if you find anything missing, would love to add 👍
Thanks for making this video for us..
I am requesting to you if possible make a one video about route protection in next js. Like public route ,private route, restricted route.
How we protect our route properly?
Thanks again ❤
Yeah… with middleware and a few more ways we can do. Shall make it. Thanks!
@@tapasadhikary Thank you so much! I'm really excited and looking forward to it! ❤️
Really helful!! thanks. I subscribed and clicked like!
Great, and thanks a ton for your support.
Awesome video and very helpful. Sir, I have a request for you. I need a video on adding callback and multiple middleware to include additional custom fields in the JWT. Include extra fields for the user's role and name upon social media login. We eagerly await these updates.
Truly your content is good
I am so glad, man! Thank you.
Thank you sir ❤
Most welcome
this is one of the reasons i can't stand typescript, it never helps, just giving me wrong errors for wrong reasons,
i use the credentials provider just as you have it on the video and i got this error message ( TypeError: (0 , next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_3__.CredentialsProvider) is not a function )
as soon as i added that auth.ts file to my project, everything has went to bad , cant even see my app anymore because all the error messages that arent even errors, just some imported lines that i haven't gotten to yet and are not even connected to the rendered part of the application 🤦♂🤦♂ i cant stand typescript and i hope nextauth fixes their auth.ts file to include js files as well because this is rediculous,
and by the sir, if it is possible, can you do a video on adding stripe and how to work with stripe webhook and subscriptions for users? that's the only part of my saas I'm missing now,
false alarm hahaha, you were right dont worry about the error messages just solve them, i solved all my error messages and now my app is working
I will make one with stripe
Super cool…
@@tapasadhikary thank you so much sir, you are best teacher on youtube by far, i wish i had money right now, i'd have no problem sponsoring you because you are just that good with very valuable teaching technique
@antwarior hey no worries, just focus on your learning and building. If any way you want to help, just let your friends know about my channel and effort. That will be more than enough 😀❤️
oo thank you for teaching next auth
I am glad when each of my channel subscribers learns.. thank you a lot.
Bro add features in this project:
1. Forget password
2. Email verification
3. User profile update including
image with cloudinary
4. Prevent logged user data loadings
Sure Bro ❤️
@@tapasadhikary we are waiting for this
Thanks! It will take sometime but will be done.
Hi Tapas Sir,
I have a question.
Where SEO isn't important (admin panel or a single component like a form), should I still try to make most of the components server components for faster loading because they're closer to the server?
For example, if I use:
Instead of using "use client" and handling it with onSubmit, am I correct in thinking this helps keep the component as a server component? Would it be an issue if I made this a client component, considering forms don't need SEO?
Thank you so much for your guidance! ❤
It is a great question. Thanks for asking!
You would consider a component as a server component for any or all of these reasons:
1. You do not want all JavaScript and code of the component to be downloaded on the client browser.
2. You want to load the page faster, hence a better UX
3. You want to load the page with the most complete content into it, so better SEO.
While making a component a Server component, you would have to consider whether any part of the component needs client interaction. If so, that part can be isolated, pushed down into the component hierarchy, and made a client component.
With these stands, you can now design your component tree such that most of your components can be server components as they are close to the data source, can be built with content, and can be made available faster. The interactions as the child components take care of the user interactions like events.
However, your example is a bit different than the server component. There doSocialLogin is a server action, not a server component. Server actions are just functions that perform a particular action on the server(like login, downloading PDF, sending email, etc). Server components are the fully baked UI.
With these clarifications, you will select something as a server action rather than doing it on the client side, when it makes sense to do it on the server for more processing power, and data availability on the server, or maybe asynchronously continuing it, even when the user closes the browser :-)
In this case, also, you need to be mindful of the server costs of executing them. Most of the cloud systems (Vercel, netlify, AWS, etc) costs you to execute the functions on the server side. So, is it worth paying for that vs. executing them on the server as server action?
I know the answer is long, but it is important to learn why an approach must be used. That's why I teach also multiple options :-D
I hope it is clear now. Let me know.
@@tapasadhikary Thank you very much. 🙏 Now I have some confusion in my mind.
"use client" // I can't use it because I am using the async function.
import Lists from "@/app/components/Lists";
import { useState } from "react";
const Todo = async () => {
const [search, setSearch] = useState("");
const response = await fetch(`${process.env.BASE_URL}/api/todos`, {
cache: "no-store",
});
const result = await response.json();
const performSearch = result.filter((res) =>
res.item.toLowerCase().includes(search.toLowerCase())
);
return (
{performSearch.length} {title}
setSearch(e.target.value)}
/>
);
};
export default Todo;
I have two questions here:
1. You said that we should not use server components in client components. Then here what should be the solution?
2. If I use server components in client components, does it mean the server component will be the client component? Although, I can see the items when I open "view page source".
thank you sir
Most welcome 🤗
how to do signup using credential provider. like i want username, email, and password
Registration process you can keep separate in most cases as I have shown in the video. With credential provider you can do additional prechecks of auth before you register user.
Just replace the email with username
Very good tuto, thanks.Can you combine it with next-intl ?
@@hbela1000 yes I will make one
what theme do you use ?
What is that plugin that auto-previews the things to be typed in? Also, what is the editor thene?
For console log or intellisense?
@@tapasadhikary intellisense. Ex. while typing in formData variable, it previews the properties email and password.
@@tapasadhikary btw, thank you so much for these videos. Last week, I tried to create a small project using NextJS and Auth.js. I stopped it and switched to plain React.js and custom authentication. But just today I was able to make the 3 logins (Google, GitHub & credentials) work. I wished I saw your videos earlier. It motivates me to learn NextJs more. Keep it up!
@@tapasadhikary console
That’s tabnine extension
Cool tutorial for begginers, but i think, handle error is not properly yet, the console is broken. im figuring out why , v5 is still in beta and should be breakng the console.
Let me know what is breaking..yes it is in beta so expecting a few things to be broken.
I am using session, strategy, database.
So how to manage session?
I can create the account, but can't logic with cred, any guide please?
Not able to catch from the video too.
nextjs a scrapper lib use kora jabe ?
like puppeteer,
use kora gele o effective hobe naki ?
Definitely you can. Yes it will be useful.. you can create ticket booking apps.
Great explanation, Any chance you could explain refresh token scenario here as well?
Thank you! I did it in the subsequent video 👍
Nice ❤❤❤❤
Thank you ❤️
How can i receive custom message thrown using throw new Error ( ) method , and how can i display the correct error like password not correct or something else
If you are having a server action, you can always catch them by checking the Error type and rethrow it from the catch block with a suitable error message. Then in your form or invocation point, you can catch the error again and show it on the client side.
now session is not supported or they want us to use the session in server components, but what if i have a component inside component then to pass the session i need to do props drilling. how can i solve this problem?
I tired the old session provider method as mentioned in docs but it is not updated realtime, i mean my profile component is a client component and i use usesession there but the accesstoken or user object is not initialized there, when i log the value inside of use effect first it is null then after few seconds or if i do a refresh then the info is there. how can i solve this problem, please help
I want those custom error messages from the authorise function inside auth.js to be rendered in the login client components page
If you are having a server action, you can always catch them by checking the Error type and rethrow it from the catch block with a suitable error message. Then in your form or invocation point, you can catch the error again and show it on the client side.
You have some knowledge about these concepts in past. But we came to learn , why can't you explain in much clear way rather than hurry .Anyway i love the way you teach and following you since 1 year. But teach slowly and clearly when such topic came.
@@goutham56-s6q thank you! These concepts are deep, you are right. That's why these are splitted as a series. If you have a specific question, feel free to ask. If I know the answer, will explain again. Thank you for learning.
@@tapasadhikary In this authentication we used strategy as 'jwt', means we definitely need a secret key and some logic. How can we do it. Using normal session or jwt which is best.
@@tapasadhikary If this was another channel, I wouldn't comment. However, since we have high expectations for your videos, I felt the need to share my thoughts. If you plan to make another series, please create a longer video with timestamps. This will help attract more members to view and subscribe.
@@goutham56-s6q Thanks man! I loved that.. yep will do. I got your point.. giving more in-depth explanation on the foundational concepts while teaching a library/framework like next-auth. Thanks! Cheers.
in next-auth v5 is there a way to return custom error messages in the authorize function
Help!
yes you can but in the action u need to again catch by the error type and rethrow. i explained it one of the comment.
@@tapasadhikary I go through the comments. But I wasn't able to find it. can you please, comment the link to that answer
How can we handle refresh and acces token using credential login?
Have a backend that issues a refresh token and then use the callback handle to manage it. I will show it to Google in an upcoming video and provide guidance on how to do it with credentials following the same. Stay tuned.
Sir, Very helpful video. But I have a very serious doubt
In V4 we used to return null;
now in V5 returning null or retuning a custom error; gives a callbackRouteError; why it that.
Sir I request please clarify this
Great question, I explored the same recently.
V5 has not implemented the same. There are already ongoing discussions I found on their github isssues. The best solution I found so far is to catch the exception in your action and check the type of it. Based on the type, you can rethrow the exception and relevant messages from the action.
V5 is still in beta so we have to see if there are further updates on this regard. If you also find anything in future, let us know. Lets learn together 🙌
@@tapasadhikary ok thank you sir, i was trying to catch errors thats how I came across your video.
vaia please add forgot password, email verification, user persist for prevent loading issue, user profile update features.
@@mst.habibakhatun9798 ok vai
wow
✨❤
wtf for me authorize func