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

Published: 13 April 2024
on channel: Simple Arab Code
6,203
246

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 Authenti...  

📚 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


Watch video Next-Auth Login Authentication Tutorial (Signin with Google) with Next.js App Directory شرح بالعربي online without registration, duration hours minute second in high quality. This video was added by user Simple Arab Code 13 April 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,20 once and liked it 24 people.