Next-Auth Login Authentication Tutorial (Signin with Google) with Next.js App Directory شرح بالعربي

In this Next-Auth login authentication tutorial with Next.js app directory, you will learn how to protect all of your pages with credentials or an OAuth login from providers like GitHub,Google. Learn how to protect any page in your app.

💖 Support me on PayPal: https://www.paypal.com/paypalme/karee...
🚩 Subscribe ➜    / @simplearabcode  
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/kareem4s...

👇 Follow Me On Social Media:
Github: https://github.com/Kareem2002Shimes
facebook: https://www.facebook.com/profile.php?...
LinkedIn:   / kareem-shimes-6a9b3a200  

🔗 All Resources for this Authentication Project:
https://github.com/Kareem2002Shimes/A...
🔗 Playlist for this Authentication & Authorization Series:
   • The Complete Guide to master Authenticatio...  

📚 Suggested Pre-requisites:
🔗 ReactJS for Beginners full course:
   • Learn React JS in Arabic  
🔗 ReactJS Projects:
   • React JS Projects  

Next-Auth Login Authentication Tutorial with Next.js App Directory

⏱️ Timestamps:
(00:00) Intro
(02:07) NextAuth - Get Started
(09:46) Create Project on google cloud
(16:21) Add Google Provider
(19:50) Add authOptions
(27:04) Get User Session (server side)
(37:28) Get User Session (client side)
(50:04) Add Custom Login Page
(57:25) Add Middleware
(01:05:40) Add Protected Page
(01:14:14) Can add another auth providers

📚 Tutorial References:
🔗 NextAuth.js Official Site: https://next-auth.js.org/
🔗 Next.js Official Site: https://nextjs.org/
🔗 ES7 React Snippets Extension: https://marketplace.visualstudio.com/...

Was this Next-Auth tutorial using the Next.js 14 App Directory helpful? If so, please share. Let me know your thoughts in the comments.

#nextjs #next #auth