Skip to content

F
finwise-miniapp-fe
Merged
Opened by ThinhNC@ThinhNC
Report abuse

feat(auth): streamline login with Zalo SDK and Claymorphism UI

Summary

Redesigns the authentication flow to use native Zalo Mini App login (getAccessToken and getPhoneNumber), replacing the traditional email/password form with a clean, Claymorphic one-tap experience.

Key Changes

  • Zalo Login Hook: Created src/hooks/use-zalo-login.ts to orchestrate Zalo SDK getAccessToken and getPhoneNumber retrieval and server authentication.
  • Login Screen Redesign:
    • Rewrote src/pages/auth/login.tsx to a single-tap Zalo sign-in flow.
    • Replaced raw emojis with official 3D Claymorphic SVG icons (WalletIcon, ReportIcon, AIAssistantIcon).
    • Applied design tokens (rounded-clay, shadow-clay-raised, hover:shadow-clay-hover, active:shadow-clay-pressed).
  • Service & i18n:
    • Added loginWithZalo method to auth.service.ts.
    • Added localized strings for Zalo auth in vi.json and en.json.