Custom Login Page in Next-Auth and Next.js 13 Authentication : Complete Step-by-Step Tutorial
Вставка
- Опубліковано 20 лип 2024
- In this tutorial video, you will learn how to create a custom login page using Next-Auth and Next.js 13 authentication and how to configure the Next-Auth to use the custom login page. We will cover the basics of setting up Next-Auth and integrating it with our Next.js application. Then, we will dive into creating a stylish and user-friendly login page that enhances the overall user experience. By the end of this video, you'll have the knowledge and skills needed to implement a custom login page in your own projects, providing a seamless and secure authentication process for your users.
0:00 Intro
0:16 What we are going to do
3:57: What is the "signIn()" function in Next-Auth
5:28 Start to create the custom login page
10:58 Quick recap of what we have done
12:09 Outro
Github Repo: github.com/vahid-nejad/next-a...
Subscribe to my channel / @sakuradev
Detailed video about next-auth: • Authentication with Ne...
Role-Based Authorization with next-auth: • Role Based Authorizati...
How to Manage Backend JWT Access Tokens in Next Auth and Next.js 13: • How to Manage Backend ...
my discord server: / discord
Bro you are the best!
Thanks for your positive comment.🌷🌷🌷.
Most detailed explanation for the most important part (authentication) of the all applications. Thanks...
Thanks for your nice feedback 🌹🙏
Thanks to your videos and the basics I had, I was able to start developing my application, thank you so much!
Hi, Thanks 🙏🙏, I am really happy that it was helpful for you 🌹😊
This video I looking for, thanks, Dude!
Glad I could help!🌷and welcome to my channel 🖐🏻
Thanks so much for detail walkthrough.
Thanks for your nice feedback
Hello, thanks for the video. I have a question about how to implement multiple custom logins for different user roles, such as clients and administrators. Can you provide some guidance on this?
really clear explanation. thanks!
Glad you enjoyed it!
How can i make a toast appear after success login?
If i invoke the toast function in the onsubmit it gets lost because the component unmount
Thank you. NextAuth is by far the most overly complicated library I've used in 20 years. It seems that with the entire Next ecosystem, if you need to do something custom, it's a nightmare. I guess if you're not using OAuth or deploying to Vercel they don't wanna know ya.
Yes, I am agree, specially the docs is really confusing. what stack do you use for your authentication?
Custom login like this, there are many video tutorials, now I want the login form to be a popup when I click on a button on the header, what should I do?
Hi, well that's easy. You should use a modal component for login. But you can't use the signIn() function to evoke the login component. You have to evoke the login component manually however you should use signIn() func with its argumemt inside the login button of login component.
I see when log in using your code then there is a moment that there is still the login text. How can I SSR the useSession first so that it only show either the login text or the user in the app directory as getServerSideProps is not supported so I couldn't pass the session. That would help a lot.
Hi, In server components, to get the session you should use the getServerSession from next-auth. You can see my latest video for more insights.
First of all, thank you very much for this awesome tutorial 🙏. By the way, do you know how to customize the error messages ? For example, I want to show password incorrect message or server error message or email already used, etc,. on login page, not on a separate error page, without a redirect etc? I been checking their docs and other places the whole day but without any proper solution yet .
Hi, Thanks for your feedback. for custom messages in login page you can watch this ua-cam.com/video/xJ6efexXJ7I/v-deo.html
@ 13:48 I have explain that.
that's cool bro, but you should add validation i like your video about NextAuth but sometimes you missed the important thing, which is the validation. I hope you will continue creating video about Nextjs 13 and NextAuth
Thank you for your feedback and support! I'm glad that you found my NextAuth tutorial helpful. Your suggestion about adding validation is well-received, and I'll make sure to cover it in my future videos. I appreciate your support and hope to continue creating content that meets your needs and interests.
@@SakuraDev sure bro, im new to NextAuth and since that server side i don't see what is happening behind that logic i can't run console log on [...nextauth] and you explained it well i hope you will create 3 auth provider that use only 1 email like my email that i use to credentials is same i use with google and facebook that with back-end api like on your other video.
nice man
But what if i wanna 2 login pages, one for normal user, the other one for only portal admin login, how can i implement it with next-auth ?
I will take a look and see how can i do that... if i find a solution I let you know.
What happens when the credentials are invalid? Does it redirect to some other page? I am using formik for form validation and I need to show login failed error on the same page, is there any way to do that?
It will be back to sign-in page, with error message in url, you can grab the error from url
I followed exact same steps. However in my custom login page if i login. It does not create a session token. But if i login on the page generated by next auth at route api/auth/signin it works perfectly fine. What could be the issue? Ps i am on next js latest version and using app directory.
Hi, do you call await signIn ()?
@@SakuraDev yeah. I fixed it. Turns out you need to provide csrf token while calling the signIn method.
Would it be possible to tell me, how can I redirect dynamically after successful signIn? Lets say user click the protected route and we redirect the user to login page. How can I redirect the user to the page that was protected before signIn, it needs to be dynamic, because we don't know which route user coming from. I would really appreciate you help
In login form we can access to callbackUrl as a search param in then redirect to user to it.
@@SakuraDev thanks mate, your the best. I have a feeling that you are Iranian, I just assumed from your last name. If you are, cheshe maei, otherwise thanks for you help mate.
chese maiee 😁
Tank You!🙏
I wanted to see how you handle form errors! Because by default nextauth redirects to a page dedicated to errors. It would have been easier to display them on the same page
If you know please tell me 😢
it seems, on pages: key at [...nextauth]/route.tsx, you can add error: '/auth/error' for example, to deal with errors in a dedicated page.
Guys, by wrapping all components with the Providers component, doesn't our application become completely client side application?
nope, server components stay server components
@@joematkin2554 that's why it's pretty cool man :)
Thank you bro 💖💖
Thank you too! 🌷
is this app router tutorial or pages router? i can not understand, because u have both folders
This video was for the time when the app dir was not yet stable so we couldn't put the API dir in app dir. Please watch the latest version of this video through this link 🔗: ua-cam.com/video/g6S-XZxq9Ug/v-deo.html
Thanks a lot pal
You're welcome! If you have any more questions or need further assistance, feel free to ask. Happy to help! 😊👍
Hey brother, I have an issue with getServerSession() function when i call it in api route handler, it returns null. So i cant get session info in my api handler files. However in server side and client side components it successfully return session object. Only problem is in api route files. Btw, i am using last next js 13 version which has api folder in app dir. Do u know the reason why it happens?
Hi, I am currently looking for a solution and as soon as find one, I will let you know. 🌷🌷
@@SakuraDev allright man, i'll be waiting for ur feedback. Thanks!
Have you tried doing a post request to your API route and pushing the session from SSR in the body of the POST?
I need to get session on get request handler and yeah it tried to send session from ssr through get request headers but again in route handler i got undefined
The weird side is that, when i send get request through chrome browser like with search bar, i got session object in console successfully. The problem is, when i send it with axios or fetch it return null
callbackUrl cause reload and redirect to the custom url .. is it ok to reload whole the app??
It is just way next auth redirect. In order to prevent refreshing the page, set redirect:false and then use redirect function of next.js router to redirect to callback url
@@SakuraDev I've set redirect false and use callbackurl in Next's redirect function but its not working and redirect again and again
@@hamed4451 ok. We should useRouter.
In the github repo of this video : ua-cam.com/video/g6S-XZxq9Ug/v-deo.html
I fixed it with useRouter.
Got to Login component inside signIn page.
if i use subdomain when i signin the subdomain disappear
You need to set your domian in .env file.
thats all great, i create the same, but when i build projcet via docker, it gives me an secret error, i added this secret everywhere, tried all things but there is no solution. cant build it.
Have you create NEXTAUTH_SECRET in env file?
@@SakuraDev yes! i fixed the problem, its because i need to create it also in my middleware. love your videos❤️
@@xanim_iva98 I'm glad it was helpful.🌹
@SakuraDev can u please provide information how to make dynamic nextauth url, so that it can work for production staging and local env. also i have such problem in signout, as it always return to localhost in staging, but i make callback url as that staging url, it isnot working anyway. i redirect to localhost
what pw did u enter to get logged in?
It was just a simple one
How can i implement this using login modal instead of specific login page ?
I will make a vid about it after drizzle orm series.
thanks sir
hai , how if backed using sanctum laravel?
Hi, it dosent matter what is your backend. It just has to offer a rest api for login that takes username and password inside the body of a POST request and checks if the user exists with the usernane and password. If so, then it returns a user json object that contains the user data as well as jwt tokens. For more info see the detailed video about authentication: ua-cam.com/video/cDWytA0V2kI/v-deo.html
You should update this video with the next JS 13 APP DIRECTORY to avoid confusions :)
Yeah, actually I have created a video with next auth and app dir.
Thanks for your feedback 😉🌹
@@SakuraDev With a custom login page ?
How do you custom page with Google Provider ?
You can create a custom login page and put a custom link in that page which call the "signIn("google")". but you cant change the google page in which you select your google account, because it's rendered by the google.
Nice
Glad you like it
But what happens if user enter wrong password and redirect is true?
it redirect user again to login page
hi bro, please in page login how to hide navbar ?!
hi, to that, you should use route seperation
@@SakuraDev there is a an video explained how ?! thnaks in advence keep going
nextjs 13v is in beta version so we an continue with 12thversion bro ?????
I think it will be stable very soon. I am using the next.js 13 in our enterprise project and we haven't encounter any bug yet. By the way I think if your project is going to be a long one it is a good idea to go with version 13 becuase if you start with version 12, very soon you have to refacror it with version 13.
@@SakuraDev at scratch level only started with 12th version
what is the main difference app directory folder page.tsx and normal page.tsx in 13th version both are same???
Next.js 13 is production ready. It's only the app directory that's in beta
@@Showmatic So then we can go with 13th version except App directory
brother could you make admin portal for website prototype, if you can it very helpful for me as well as everyone of your
subscriber
Yes I am planning to create a admin panel tutorial with next.js.
i have created a custom login page but it still goes to the one created by nextjs
I’m using the app router instead of pages
I have also a new version of this video which uses App dir. have you set the pages object in next-auth route.ts file?
@@SakuraDev yes it’s suddenly working now without making any change
Will you be making a video on authenticating two roles using two different endpoints?
As in two different external apis
Thanks for the content though
super
Thanks
how to set protectedroutes in nextjs I am confused how to do???
Hi, you can use it with middleware. I have described it in this video : ua-cam.com/video/cDWytA0V2kI/v-deo.html
@@SakuraDev without middleware can we do it manually ,creating hoc and wrapping in app.tsx file component page props wrapping I done like this but the UI is not displaying
@@SakuraDev Can you do a protected route with multil langues (nextintl)? there's a lot to talk about when working with multi langues that also use midlware
@@ICOReviewtoken Hi, I will try that and let you know.
next middleware is the least painful method
Nextjs 13 App Level Directory this is broken (No more pages directory)
hi, you are right. but for the next-auth it is still recommanded to put the [...nextauth].ts file inside the pages dir. although as I did in this video, for pages it is better to use App dir.
@@SakuraDev Hi can you do a tuts for the latest version of nextjs I mean the App level directory?
@@nurseryrhymes.videos this video is already in the App dir level. All the pages are in App dir. Just the nextauth file is still in the pages dir. If you want to place the nextauth file inside the app dir too, I have to make research about it and I will let you know soon.
@@SakuraDev Thanks bro
csrf token??
Hi, in NextAuth.js, CSRF protection is present on all authentication routes.
Man you are the best, Thanks❤🫡
Thanks for your nice comment 🌷