In this tutorial, we'll walk you through setting up Auth.js v5 with Next.js 14 to implement Google and GitHub OAuth authentication using Next-Auth. Learn how to configure OAuth providers, secure routes with middleware, and protect both server and client components. This step-by-step guide is perfect for developers looking to integrate authentication in their Next.js projects.
What you'll learn:
- Setting up Auth.js and Next.js
- Configuring Google and GitHub OAuth providers
- Middleware and route protection
- Handling authentication in server and client components
🔔subscribe and turn on the notification bell.
👉 source code: https://github.com/ShaifArfan/authJS-nextJS-example/tree/OAuth
Timestamps -
00:00 - Intro
00:54 - Project Setup
01:29 - Auth.js Setup
05:59 - Middleware Setup
12:43 - Google OAuth Provider
19:29 - Logout
22:12 - GitHub OAuth Provider
26:21 - Server & Client Component Auth Protection
30:04 - Conclusion
Follow Shaif Arfan 👇👇
Instagram: https://www.instagram.com/shaifarfan08/
Facebook: https://www.facebook.com/fb.ShaifArfan08
Twitter: https://twitter.com/shaifarfan08/
▶ Also Watch :
HTML CSS Portfolio Project: https://youtu.be/78l05_nuDIg
One Page HTML & CSS Project: https://youtu.be/ZFQkb26UD1Y
HTML & CSS Landing Page : https://youtu.be/6SCV-JXNvXI
Mini Project for HTML & CSS : https://youtu.be/7ylX8R0RENo
How To Make A WordPress website: https://youtu.be/DtHDhDJYOfA
▶ Some useful Playlist :
HTML & CSS: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7mmrNLpQTB9RWMsVoRt2moe
Vanilla JavaScript : https://www.youtube.com/playlist?list=PLRv_Gd5w9e7mmALZQWt_DJErngAFLp-aV
Frontend Mentor Challenges: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7liRWZfoXX1MgNztk2HPMVp
30days30submits Challenge: https://www.youtube.com/playlist?list=PLRv_Gd5w9e7m7wokXmB9fGtGYw100UKc0
#webcifar #nextAuth #authJS