سیستم لاگین با nextjs:‌ بدون نیاز به نصب کتابخونه و پکیج!

بدون استفاده از پکیج هایی مثل next-auth یا authjs کاربران اپ خودتونو به بک‌اند خودتون متصل کنید، توکن رو به صورت HTTP Only و امن ذخیره کنید و هم سمت سرور (server components و server actions و getServerSideProps) هم سمت کلاینت مقدار توکن و بخونید و برای بک‌اند به عنوان header authrization بفرستید

اگر دوست دارید server action رو یاد بگیرید این ویدیو که چند هفته پیش ضبط کردمو ببینید

   • ری‌اکت سرور اکشن: بررسی سرور اکشن تو ...  

اگر درباره اینکه چرا باید کوکی http only باشه ایده‌ای ندارید، این ویدیو رو ببینید

   • امنیت سایت و توکن دزدی: پیاده سازی سی...  

تو این ویدیو ما از فیچرهای cookies, server actions و middleware استفاده میکنیم که یه سیستم لاگین خفن بدون نیاز به هیچ کتابخونه third party بنویسیم،‌ اینکار به ما اجازه میده چالش های سیستم authentication و ببینیم و خودمون حلشون کنیم و بعدا اگر خواستیم بریم از یه کتابخونه پیچیده تر مثل next auth استفاده کنیم خیلی راحت اونو درک کنیم و زودتر یادش بگیرم.

ما با استفاده از سرور اکشن ها که یه فیچر جدید تو نسخه اخر ری‌‌اکت هستن، میتونیم یه سری کد داشته باشیم که سمت سرور مثل endpoint های بک‌اند اجرا بشن، داخل این server action ها ما میتونیم از توابع cookies نکست استفاده کنیم و مقدار کوکی هارو بخونیم یا کوکی های جدید ست کنیم. اینجا میتونیم توکنی که از بک‌اند گرفتیم و به صورت cookie http only ذخیره کنیم
و همیشه بهش دسترسی داشته باشیم، بعد میتونیم این کوکی و داخل server component بخونیم بزاریمش داخل یه context و داخل client component ها با useContext مقدارشو بخونیم


اگر درباره کانتکست اطلاعاتی ندارید و دوست دارید تو یه تایم کمی یادش بگیرید، این ویدیو رو ببینید

   • استیت منیجمنت با کانتکست در ریاکت (co...  


00:00 - سلام خوش اومدید
0:24 - مقدمه
3:54 - ساختار api backend پروژه
5:02 - اتصال فرم لاگین به بک‌اند
5:51 - پیاده سازی singIn با سرور اکشن
8:12 - ذخیره توکن در کوکی httpOnly
10:32 - پیاده سازی logout با سرور اکشن
11:23 - پاک کردن کوکی httpOnly
12:50 - پیاده سازی getSession و دسترسی به توکن و اطلاعات کاربر
16:05 - پیاده سازی protected route
16:40 - کنترل دسترسی در Middleware
19:29 - دسترسی به session در کلاینت کامپوننت ها
20:54 - استفاده از session برای دسترسی به بک‌اند روی مرورگر
24:15 - خلاصه ویدیو و بررسی تغییرات اعمال شده
25:27 - جمع بندی و پایان


Website: https://react.ir
Twitter:   / react_ir  
Instagerm:   / react_ir  
Telegram: https://t.me/react_ir

Personal Twitter:   / nima_arf  
Personal Instagram:   / nima_arf  
Personal Github: https://github.com/nimaa77