Overview
AuthLab is a portfolio-grade authentication UI lab: visitors pick a sign-in channel from an Auth Hub, then walk through realistic screens for email/password, branded OAuth consent, phone OTP, or passwordless magic link. Everything runs in the browser with mocked services — no secrets, no server — so the repo stays public while still demonstrating UX and React architecture.
The Challenge
Most auth demos cram OAuth buttons, email forms, and OTP into one page. That is hard to navigate, hard to maintain, and a poor sample for clients who want to compare flows side by side. The goal was a defensible showcase: bilingual FA/EN with RTL, dark and light themes, and isolated routes per method.
Approach
React Router splits each method into dedicated pages. Context API covers theme, locale, auth session, and toasts. Formik and Yup validate email flows; steppers guide phone OTP and magic link. Social providers use branded OAuth consent cards. SVG icons replace emojis for a consistent orange accent theme. GitHub Actions runs lint and build; a separate workflow publishes static dist to GitHub Pages.
Architecture
Config-driven flows live in authFlows.js and socialProviders.js. Mock services (mockAuth, mockPhoneAuth, mockMagicLink) simulate latency and errors in sessionStorage/localStorage. MainLayout wraps DemoBanner, Navbar, Footer, and ToastContainer. Persian uses Yekan Bakh FaNum via @font-face when html lang is fa. Vite base path switches to /authlab-react/ for Pages deploy; BrowserRouter basename follows import.meta.env.BASE_URL.
Trade-offs
No real backend means sessions are illustrative only — correct for a portfolio piece, not production copy-paste. GitHub Pages needs base path and 404.html SPA fallback; Vercel would be simpler for root hosting. Co-authored commit hygiene matters when using AI assistants on public repos.
Results
A live demo at devamir99.github.io/authlab-react with six screenshot-ready flows, CI badge, and README case study. Employers and clients can try email (demo@authlab.dev / 123456), OTP 123456, OAuth authorize, and magic-link simulate-click without risk.
Key Learnings
Treating each auth method as its own mini-app keeps demos readable and code reviewable. Central site.js and locale JSON files make bilingual copy maintainable. Mock layers should return message keys, not hard-coded UI strings, so FA/EN stay in sync. Shipping deploy workflow early avoids portfolio links pointing at localhost.