Next.js Authentication || Register User To MongoDB With Next-Auth V5
HTML-код
- Опубликовано: 28 июл 2024
- Enjoy my videos & teaching? Join tapaScript as a member:
/ @tapasadhikary
Learn to persist user data to MongoDB using Next-Auth V5. Continuing from our last video where we used the Credential Provider, now in this step-by-step guide you will learn to interact with MongoDB to persist data through the user registration process.
- Catch up with the previous video on Next-Auth V5 Authentication with Credential Provider: • Next.js Authentication...
Hey, welcome back to another informative video from the "Full Stack With Next.js App Router" series. I hope you enjoy this one the same way you liked the previous videos from the series.
Let's GO 🚀
I take special care to provide you the best quality content. Please SUBSCRIBE to the channel to show your support. Also, could you like/comment on this video so that it reaches others? Thanks! 🫶
Timecodes
0:00 - We Will Learn These
01:45 - Add A Register Link
02:47 - Create Registration Page
04:59 - Add a Login Link
06:36 - API Route Handler for Register
09:48 - Registration Form Submit
14:05 - Test API Route From Register Form
16:29 - The User Schema and Model in MongoDB
21:39 - Establish MongoDB Connection
24:07 - Function To Save User Data To MongoDB
25:45 - Encrypt Password Before Saving
27:16 - Call Function To Create User in MongoDB
29:10 - Test Out The User Registration
31:03 - Change Auth.js For Login Flow
33:41 - Test Out Both Register & Login Flow
34:20 - What's Next?
Source Code on tapaScript GitHub:
- github.com/tapascript/learn-n... (If you like, please support the project with a ⭐)
Join tapaScript Discord
- / discord
🤝 My Links:
- Blog: blog.greenroots.info/
- Follow on X(Twitter): / tapasadhikary
- Connect on LinkedIn: / tapasadhikary
- Follow My Work on GitHub: github.com/atapas
- Follow on Facebook: / tapasadhi
Special Links:
- Are you looking for the best NextJS templates to start your project development? Download and use them for FREE: www.wrappixel.com/templates/c...
- If you are looking for the best content management system, here is something for FREE that you can rely on: app.caisy.io/app/signup/mwiyy...
👋 Like my work? Thank You. You can sponsor me from here:
- Sponsor Me: github.com/sponsors/atapas
- Sponsor my Blog: blog.greenroots.info/sponsor
About Me:
Tapas Adhikary is an Educator at tapaScript, Tech enthusiast, Writer, RUclipsr, and Open Source projects maintainer/contributor. He is a full-stack developer with vast experience in building SaaS solutions. He is the founder of the ReactPlay platform, which is driven by open-source projects and a fast-growing community.
You can find more about him at tapasadhikary.com.
#nextjstutorial
#next
#nextjs14
#nextauth
#authentication
#nextjs
#nextjs13
#nextjsapprouter
#thinkinginnextjs
#nextjstutorial
#next-auth
#authjs
Credit
- The thumbnail uses a login form image that is by "sign in PNG Designed By 祭二 from pngtree.com/freepng/gradient-..."
These three parts series about next-auth is seriously helpful. Thank you so much for your time creating it.
Thank you for taking the time and acknowledging it. Appreciate it ❤️
Indeed. Because of these I can now finally proceed learning Next.js.
@julianjupiter5890 super
That's the solution I was looking for in my app. Thx man!
@@andrewpulyaev2539 great ❤️
we want to see Role Based User Authorization & Access Control in next js video also . keep doing that type of video.
Awesome video and explanation. I am curiously waiting for your next video.
Excellent video as always and once again. Really rrally grateful to you and your content. Extremely appreciate the efforts you put in to make the concepts as easy as they can be. For a while now i was scouring the internet for easy to understand credentials login using next auth in an easy way. Only your video i came across that made me understand the concept extremely well. Such quality content deaerves more recognition.
Thank you once again for making the concepts stupidly simple to understand. Im definitely going to save this video as one of my favorites in RUclips and will refer back to it from time to time.
Thank you much sir
You are most welcome ❤️
Once you all share my content with others who may need it, will be a great help, too. Thanks a lot.
You are so good, I can't wait to see how google auths persist to the database in next.js. I need it right now but I can wait
Thanks man!
Thanks ❤🔥
Can you please make a video on keeping the session and using the session authentication in client pages after logging in?
very very thanks, i waiting posgrsql + drizzle
Waiting for Next part with access and refresh token handle ❤️
Everyone is asking for this one 😀
I've planned it for June.
please make a video on role based authentication in next js
Yes brother.
Great sir g
Thanks, Sir G 🤟
please continue this series!! It is very helpful :)
Absolutely! Next one is coming today 😄
@@tapasadhikary Looking forward to that :)
@@steffenjusmann6276 sorry I meant coming tomorrow, Thursday IST evening
@@tapasadhikary I have a question regarding the auth session. How can I get the user _id from the MongoDB into my session? Currently, the session.user just has name and email. However, I would need the id as well. How can I add this to the session?
can you please make a video on the refresh token and access token in authv5
Of course I can 😀
It's planned for June.
Dada dil jeet liya aapne.. you have done it the best, have been through so many videos, udemy and so on.. You can be a Udemy star too. Thank you so much and keep it coming. My request is to suggest how zod can be useful along with typescript.
Vai hardly people value free content, even there are so much effort and authenticity in it… I'm glad, my content and teaching started seeing the lights 😀🔥
@@tapasadhikary Its not free its invaluable. I have gone through so much of content, I loved the way you teach so simply. Thankyou sir. Will keep waiting for more content from you.
include session or just add data to table user ?
Please Sir the final piece of this series should be authentication with Magic Links Email Provider, the backend being MongoDB. I have followed all 4 parts of the series, and this would be a great encore.
I searched the whole internet such a tutorial doesn't exists. Please do it for us. Many thanks!
Ok I have never explored that but for you I will do 👍. Hope others will like it too… btw there is one big video coming next week on auth token and refresh token… so we are not done yet 😀
@@tapasadhikary God bless you Sir. I have subscribed to your channel and I hope I will get the notification for the video this week. You're the best!
@traezeeofor thanks! It will come next week as this week I have already planned other videos.
@@tapasadhikary Alright Sir, I am patiently waiting. Thank you
Because the Edge runtime only uses standard Web APIs, many packages are not compatible with it, such as the mongodb driver package.
Please take note of above Sir. I encountered it in teh app I just build, Couldn't deploy as the build kept failing as a result. Eg:
Creating an optimized production build ... Failed to compile. Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
great video. can you please make a dedicated course in building a complex real world production level app using next js and other necessary stack.
It is very much in plan ❤️
Hello brother, please implement the refresh token logic as well. I'm struggling to do it in NextAuth.
Bro, keep eye on this series. Its coming. I'll be implementing it on top of same code incrementally. Cheers!
@@tapasadhikary Sure, Cheers!
awesome Dada , how do i use next auth v5 session in middleware ?? please make a video on it. Thank you so much for your great content.
You are welcome vai… it will come in a future video, planned already. One request would be please share about this next.js series with people so that there is awareness. Thanks ❤️🔥
Hello sir, video was great, can you create a magin link authentication using next auth and also project external node.js server routes?
@@tejasgiri1650 magic link next week
Thanks Dada for this detailed video of authjs v5 ❤
I have fewer questions like authjs v5 is ready to use for production? As it is still in beta. There are other alternatives like Auth0 and Lucia Auth, should we go for them for production or use authJs beta in production?
Welcome.
Yes, Next-Auth V5 is not stable yet. That's one reason I am making these content with my discoveries with it. It still has issues, but we hope to be stable soon.
An alternative open-source(if possible free) & stable solution is surely worth looking into in the mean time.
Great work! Finally my auth is working, thank you =) There is 1 problem that I encountered. The login only works when the db connection is already established through the singup route. What's the best way to establish db connection for the login route to work right away?
Glad I could help. I find the root layout is a great place to do this connection initialization.
please can you make a video about login using facebook?
Won't it be mostly similar to the two I showed here? Are you facing any issues with FB?
❤❤❤❤❤
❤❤❤
Sir auth provider local me work kar rahe par production me nahi..
How can i solve this issur
Issue kiya hai vai?
@@tapasadhikary domain_name/api/auth/error?error=Illegal%20arguments%3A%20undefined%2C%20number
screen pe ek div aata hai
uspe Error phir niche domain name likha aata hai
How to protect api endpoint with middlwer and make private routes with middlwer make videos
That's the next video coming this week 😊
@@tapasadhikary thanks
#504_error
Sir, I have done everything same as done in the video... Then,
1. Changed the MONGO connection string to my mongo db atlas
2. Published the app on vercel
3. Set environment variables on vercel (including connection string)
4. Allowed all ip to connect to my mongodb atlas
The signup process is working fine but the Login is not working. It says 504 gateway timeout.
The same project when run on local it is working, only on vercel, it's showing 504 (only while logging in)
Solutions tried:
1. Integrated vercel to mongodb atlas (as per stackoverflow community answers).
2. Allowed all ips to access my mongo db atlas
What should i do to fix it ?
Hey, thanks for trying out the deployment on Vercel and Atlas.... I have not tried it but my deployment is on Cloudflare and Atlas for a company project... It is working. The steps you mentioned is almost same. Make sure the IPs are correct.
I would recommend you discuss this on our Discord as it is easier to see the log and screenshot to help out.. also other folks on discord may pitch in or learn from it.
All the best.
post method not working of your github repo when i register why is that?
It should sir, I push working code. Make sure the env is correct with mongo string and your database name. All the best.
@@tapasadhikary did not work i tried 20 times , i clone your git repo then it not still register post request working then i trigger register button ,then it will triger login api why is that happens sir?
Can you please make a video on keeping the session and using the session authentication in client pages after logging in?
Yes that video will come around 7th July. Already planned. Thanks.