feat(auth): integrate Zalo token-based phone auth and clean up login button UI

src/hooks/use-zalo-login.ts

 import { useState } from "react";
-import { getAccessToken, getPhoneNumber } from "zmp-sdk";
+import { getAccessToken, getPhoneNumber, getUserInfo, getUserID } from "zmp-sdk";
 import { useNavigate, useSnackbar } from "zmp-ui";
 import { authService } from "@/services/auth.service";
 import { useAuthStore } from "@/stores/auth-store";
@@ -27,13 +27,42 @@ export function useZaloLogin(): UseZaloLoginReturn {
         throw new Error(t("auth.zalo.tokenFailed"));
       }
 
-      // 2. Lấy số điện thoại từ Zalo SDK
-      //    `number` là field deprecated nhưng trả về SĐT thực trên Mini App
-      //    `token` là flow mới: cần gửi lên server Zalo để đổi lấy SĐT
+      // 2. Lấy ID và thông tin người dùng từ client SDK
+      let zaloId: string | undefined;
+      let name: string | undefined;
+      let avatar: string | undefined;
+
+      try {
+        const id = await getUserID();
+        if (id) zaloId = id;
+      } catch (idErr) {
+        console.warn("getUserID error:", idErr);
+      }
+
+      try {
+        const infoResult = await getUserInfo({ autoRequestPermission: true });
+        if (infoResult?.userInfo) {
+          if (infoResult.userInfo.id) zaloId = infoResult.userInfo.id;
+          name = infoResult.userInfo.name;
+          avatar = infoResult.userInfo.avatar;
+        }
+      } catch (infoErr) {
+        console.warn("getUserInfo error or dismissed:", infoErr);
+      }
+
+      // 3. Lấy số điện thoại từ Zalo SDK (lấy mã token bảo mật 2 phút để backend giải mã)
+      let phoneToken: string | undefined;
+      let phoneNumber: string | undefined;
+
+      try {
         const phoneResult = await getPhoneNumber();
-      const phoneNumber = phoneResult.number;
+        phoneToken = phoneResult.token;
+        phoneNumber = phoneResult.number;
+      } catch (phoneErr) {
+        console.warn("getPhoneNumber error:", phoneErr);
+      }
 
-      if (!phoneNumber) {
+      if (!phoneToken && !phoneNumber) {
         openSnackbar({
           type: "warning",
           text: t("auth.zalo.phoneDenied"),
@@ -41,8 +70,15 @@ export function useZaloLogin(): UseZaloLoginReturn {
         return;
       }
 
-      // 3. Gửi lên backend để xác thực + đăng nhập/tạo tài khoản
-      const response = await authService.loginWithZalo({ accessToken, phoneNumber });
+      // 4. Gửi lên backend để xác thực + giải mã SĐT + đăng nhập/tạo tài khoản
+      const response = await authService.loginWithZalo({
+        accessToken,
+        phoneToken,
+        phoneNumber,
+        zaloId,
+        name,
+        avatar,
+      });
 
       if (response.success && response.data) {
         setAuth(

src/pages/auth/login.tsx

@@ -78,22 +78,7 @@ const LoginPage: React.FC = () => {
               <span>{t("auth.zalo.loggingIn")}</span>
             </>
           ) : (
-            <>
-              <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <rect width="24" height="24" rx="6" fill="white" />
-                <text x="3" y="18" fontSize="14" fontWeight="bold" fill="#0068FF">
-                  Z
-                </text>
-              </svg>
             <span>{t("auth.zalo.loginButton")}</span>
-            </>
           )}
         </button>
 

src/services/auth.service.ts

@@ -74,7 +74,11 @@ export const authService = {
 
   async loginWithZalo(data: {
     accessToken: string;
-    phoneNumber: string;
+    phoneToken?: string;
+    phoneNumber?: string;
+    zaloId?: string;
+    name?: string;
+    avatar?: string;
   }): Promise<ApiResponse<{ user: User; accessToken?: string; refreshToken?: string }>> {
     const response = await apiClient.post("/auth/zalo-login", data);
     return response.data;