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/kareem4mohamed
🚩 Subscribe ➜ https://www.youtube.com/@SimpleArabCode
☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/kareem4shimas

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

🔗 All Resources for this Authentication Project:
https://github.com/Kareem2002Shimes/Authentication_App
🔗 Playlist for this Authentication & Authorization Series:
https://youtube.com/playlist?list=PLxRKoQzM5m3LmYyem25fvxfwWJZiFqIbf

📚 Suggested Pre-requisites:
🔗 ReactJS for Beginners full course:
https://youtube.com/playlist?list=PLxRKoQzM5m3LoWUulWEALSL03wvwhIx0q
🔗 ReactJS Projects:
https://youtube.com/playlist?list=PLxRKoQzM5m3LqZjslZ1bL9r7jB7hmbfpl

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

Видео Next-Auth Login Authentication Tutorial (Signin with Google) with Next.js App Directory شرح بالعربي канала Simple Arab Code