مرور کلی
AuthLab یک آزمایشگاه UI احراز هویت در سطح نمونهکار است: بازدیدکننده از Auth Hub روش ورود را انتخاب میکند و صفحات واقعگرایانه ایمیل/رمز، OAuth برندشده، OTP پیامک یا لینک جادویی را میبیند. همهچیز در مرورگر با سرویس mock اجرا میشود — بدون secret و بدون سرور — تا repo عمومی بماند و همزمان UX و معماری React نشان داده شود.
چالش
بیشتر دموهای auth دکمه OAuth، فرم ایمیل و OTP را در یک صفحه میچینند. ناوبری سخت، نگهداری سخت و نمونه ضعیف برای مشتریای که میخواهد جریانها را جدا ببیند. هدف یک showcase قابل دفاع بود: دوزبانه FA/EN با RTL، تم دارک/لایت و route جدا برای هر روش.
رویکرد
React Router هر روش را به صفحات اختصاصی تقسیم میکند. Context API تم، locale، session و toast را پوشش میدهد. Formik و Yup ایمیل را validate میکنند؛ stepper برای OTP و magic link. ارائهدهندگان اجتماعی کارت consent OAuth برنددار دارند. آیکون SVG جای emoji برای تم نارنجی یکدست. GitHub Actions lint و build؛ workflow جدا dist را روی Pages منتشر میکند.
معماری
جریانها در authFlows.js و socialProviders.js config-driven هستند. سرویسهای mock (mockAuth، mockPhoneAuth، mockMagicLink) تاخیر و خطا را در sessionStorage/localStorage شبیهسازی میکنند. MainLayout شامل DemoBanner، Navbar، Footer و ToastContainer است. فارسی با Yekan Bakh FaNum وقتی lang=fa است. base path ویت برای Pages روی /authlab-react/ است؛ basename روتر از import.meta.env.BASE_URL میآید.
مصالحهها
بدون backend واقعی session فقط نمایشی است — برای نمونهکار درست است، نه کپی production. GitHub Pages به base path و 404.html SPA نیاز دارد؛ Vercel برای root سادهتر است. commitهای تمیز مهم است وقتی از دستیار AI روی repo عمومی استفاده میشود.
نتایج
دموی live در devamir99.github.io/authlab-react با شش جریان آماده اسکرینشات، badge CI و case study در README. کارفرما و مشتری میتواند ایمیل (demo@authlab.dev / 123456)، OTP 123456، OAuth authorize و simulate-click لینک جادویی را بدون ریسک امتحان کند.
درسهای آموختهشده
هر روش auth بهعنوان mini-app جدا دمو را خوانا و code review را ساده نگه میدارد. site.js و locale JSON متن دوزبانه را قابل نگهداری میکنند. لایه mock باید message key برگرداند نه رشته سختکد شده UI. deploy workflow زودتر از لینک portfolio به localhost جلوگیری میکند.