Next.js Authentication With Next-Auth V5 || Google & GitHub
HTML-код
- Опубликовано: 31 июл 2024
- Learn how to authenticate using Next-Auth's OAUTH mechanisms. In this video, we will learn the authentication with Google and GitHub social logins with a Next.js 14 application. We will also explore the signout option.
The video is your step-by-step tutorial to build the authentication system and learn the usage of server actions and form handling.
Hey, welcome back to another informative video from the "Full Stack With Next.js App Router" series. Let us build an app with social authentications.
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. 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 - Next.js Authentication
01:31 - What Are We Building?
02:58 - Create Login Form
06:59 - Login and Logout Server Actions
10:21 - Install Next-Auth V5
11:07 - Configure Google Provider From Next-Auth
15:37 - Google OAUTH: Client ID and Secret
19:15 - Create Next-AUth Callback Route
22:51 - Test Google Auth
23:36 - Integrate With Google Button
25:12 - Show LoggedIn User's Details
27:57 - Protected Route Test
29:54 - Add Sign Out(Logout) Functionality
32:15 - GitHUB OAUTH: Client ID and Secret
33:58 - Configure GitHub Provider From Next-Auth
36:04 - Test All Login/Logout Together
Source Code on tapaScript GitHub:
- Integrate Google OAUTH: github.com/tapascript/learn-n...
- Integrate GitHub OAUTH: github.com/tapascript/learn-n...
Join tapaScript Discord
- / discord
Other Links
- Generate AUTH SECRET: generate-secret.vercel.app/32
- Test Google OAUTH Config Locally: localhost:3000/api/auth/signin
🤝 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 who has 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
Thank you so much, Sir. Found a perfect video after long time.
Glad it helped
That is one smooth video lesson by one very confident professional !! Thank you very much !! Had to subscribe to this channel !! Keep up the VERY GOOD WORK !! Once more, THANK YOU SO VERY MUCH !!
Thanks for the sub! You are awesome.
Loving your teaching style sir ji, absolutely no hurdles while coding along and easy to follow
Thanks a lot Sirji
This is amazing. Your teaching style is really good.
Thanks a lot.
Thanks you so much for your video about next auth. It's really helpful ❤
You are most welcome 👍
Great help. Awesome explanation.
Most welcome 🙏
I watched many videos about Auth.js. but your tutorial is the Best. Nicely explained. Thanks.
Many thanks ❤️
@@tapasadhikary Are from Sri lanka?
@@UdithaTennakoon No sir, Im from India… ❤️
Sanath Jayasuriya is my all time favourite, though 😀
THIS VIDEO IS PERFECT, THANK YOU VERY MUCH
You are most welcome
Thanks for the video.🙏🙏
Most welcome ❤️
Mr Tapas you are a great teacher 😮
Thanks a lot 😊🙏
thankyou so much sir , its working , in my opinion you should make nextjs long video .
Great… btw, this video is part of 20 videos long series already. More will be added to it.
Thank you sir
Welcome ❤️
Error er solve korte pelam...... thanks :)
Great
I recently upgraded from v4 to v5 and using azure-ad provider. In v4 I have my NEXTAUTH_URL in .env file which is not required in v5 as per docs. I have my app's base path as '/ui/abc/' set in next.config.ts file. Upon signin , the redirect uri is not picking up the basepath. Should I set the basepath in auth.ts file?. Also having NEXTAUTH_URL in v5 seems to produce redirect error.
tnx MAN!
Most welcome 🙏
good one
Thank you! Cheers!
Very helpful tutorial.
In the future if you are willing can you add a tutorial for logging in using credentials?
Thank you in advance
That's very much in plan
Awesome, next auth is great, I don't like clerk my self
Indeed. It is great. I love its integrations with adapters like mongo and quite easy to set it up.
when i go home and i changed the url to "/" or button page..protected route is not working
Real application session information is displayed in the navbar that we render in the root layout; however, the server component does not re-render after the user logs in.
Do you have it deployed anywhere or source code? I tried in my repo, seems to be working.
I am trying same with nextauth 4.x as don’t want to go for beta version. Can you please provide some insight or video on that? Or if you already have that implementation repo please share.
I have implemented same with nextauth 4 also and it was so easy just followed documents.
Hi, everything went well now it gives error, Module not found: Can't resolve '@/components
how to fix it
Check the path is correct… one more thing to try is stop local server, delete the .next and start back the server… otherwise it might be a small mistake… look closely, you will find it. If it was working well, it will, too 👍
@@tapasadhikary It happened when I try to whitelist the google and github urls. before that it works. not it is not working
🥰
❤️❤️
how do I store the user in Postgres db after the user has signed UI?
Check the next video where I showed how to use the credential provider to store registered users in mongo db… for postgre the flow will be similar.
If we can do the same thing with passport then why do we need nextAuth?
Great Question... as Next-Auth is more organically connected(at least it was before auth.js became a common entity)... Yes, we can do the same with passport and I am also going to show that when start the MERN series. Would you be interested? :-)
From where I can get the IdToken. I need this because I have to send it to the backend api server.
Please help me out!
Brother, to get that you need to implement callbacks in your auth,js file where you will get the idToken from the jwt method and pass it to the session. Then in any component you can get the session and inside that you will be able to fetch the idToken. For example, in client component you can use useSession() hook to get the session and inside that you will have IdToken. But remember, in auth.js you have to first implement callbacks.
Do you think a video on this will be helpful?
@@tapasadhikary got it. Thank you Brother
Brother since you are an expert so could you please a video about how to upgrade next auth v4 to v5 for the beginners like me, it will help us a lot to do the things right away to upgreade our application where we have used next auth v4.
Regards,
Sure brother, I will plan in June
@@tapasadhikary Thank you so much, we will be waiting
How can I add more data to the user object, such as social media login time? And if I want to add a role, how should I do it?
Great question. We can fetch them using the Adapter and even can persist into a database like MongoDB. In the upcoming video, I will show that.. how the OAUTH login session and account info can be managed in DB. stay tuned.
@@tapasadhikaryAlso, we need to know how to use multiple middleware with Internationalization & NextAuth combined. We need a video.
@@Tanzimhossain2 Haha.. sure..
Btw, the credential one will go public in a couple of hours from now. 😃
@@tapasadhikary 💖💖
@@tapasadhikary Cant wait for this
I can't really import auth from "@/auth" I don't know why
Check if the export is correct.
@@tapasadhikary thanks I just figured it out. We're literally importing parts of the stuff we got from calling the NextAuth with the providers. Thank you so much it's all straightforward now. So we got auth (to get the info on the session), signIn, signOut and the handlers. So we're literally getting the auth from there. Thank you.
@sogobamimore8933 awesome 👍
where is the backend part u just did frontend design only
What do you mean by front end design only? This video shows how to use OAUTH2 from Google and GitHub with Next-Auth V5 to authenticate. The backend access token issue has been taken care by the respective providers. My be I am not understanding your question properly.
thankyou so much sir
You are most welcome ❤️