Merge pull request #26 from ecency/bugfix/hs-login

bugfix/hs-login

src/api/mutations/hs-login-refresh.ts

@@ -0,0 +1,15 @@
+import { useMutation } from "@tanstack/react-query";
+import { appAxios } from "@/api/axios";
+import { apiBase } from "@/api/helper";
+
+export function useHsLoginRefresh() {
+  return useMutation({
+    mutationKey: ["hs-token-refresh"],
+    mutationFn: async ({ code }: { code: string }) => {
+      const response = await appAxios.post(apiBase(`/auth-api/hs-token-refresh`), {
+        code
+      });
+      return response.data;
+    }
+  });
+}

src/api/mutations/index.ts

@@ -30,3 +30,4 @@ export * from "./withdraw-routes";
 export * from "./delegate-vesting-shares";
 export * from "./claim-reward-balance";
 export * from "./subscribe-to-community";
+export * from "./hs-login-refresh";

src/app/auth/_page.tsx

@@ -3,53 +3,83 @@
 import useMount from "react-use/lib/useMount";
 import { useRouter, useSearchParams } from "next/navigation";
 import { validateToken } from "@/utils";
-import { hsTokenRenew } from "@/api/auth-api";
 import { User } from "@/entities";
 import { useGlobalStore } from "@/core/global-store";
-import { getAccount } from "@/api/hive";
-import { useRecordUserActivity } from "@/api/mutations";
+import { useHsLoginRefresh, useRecordUserActivity } from "@/api/mutations";
+import { useCallback } from "react";
+import * as Sentry from "@sentry/nextjs";
+import Image from "next/image";
+import i18next from "i18next";
+import { UilSpinner } from "@tooni/iconscout-unicons-react";
+import { Alert } from "@ui/alert";
 
 export function AuthPage() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  const addUser = useGlobalStore((state) => state.addUser);
   const setActiveUser = useGlobalStore((s) => s.setActiveUser);
   const updateActiveUser = useGlobalStore((s) => s.updateActiveUser);
+  const toggleUiProp = useGlobalStore((s) => s.toggleUiProp);
 
   const { mutateAsync: recordActivity } = useRecordUserActivity();
+  const { mutateAsync: hsTokenRenew } = useHsLoginRefresh();
 
-  useMount(() => {
+  const initUser = useCallback(async () => {
     const code = searchParams.get("code");
-    if (code) {
-      if (validateToken(code)) {
-        hsTokenRenew(code)
-          .then((x) => {
-            const user: User = {
-              username: x.username,
-              accessToken: x.access_token,
-              refreshToken: x.refresh_token,
-              expiresIn: x.expires_in,
-              postingKey: null
-            };
-
-            setActiveUser(user.username);
-            getAccount(user.username)
-              .then((r) => {
-                updateActiveUser(r);
-                recordActivity({ ty: 20 });
-              })
-              .finally(() => {
-                router.push(`/@${user.username}/feed`);
-              });
-          })
-          .catch(() => {
-            router.push("/");
-          });
-      } else {
-        router.push("/");
-      }
+    const isValidToken = validateToken(code);
+
+    if (!code || !isValidToken) {
+      router.push("/");
+      toggleUiProp("login");
+      return;
     }
+
+    try {
+      const response = await hsTokenRenew({ code });
+      const user: User = {
+        username: response.username,
+        accessToken: response.access_token,
+        refreshToken: response.refresh_token,
+        expiresIn: response.expires_in,
+        postingKey: null
+      };
+
+      addUser(user);
+      setActiveUser(user.username);
+
+      await updateActiveUser();
+      recordActivity({ ty: 20 });
+
+      router.push(`/@${user.username}/feed`);
+    } catch (e) {
+      Sentry.captureException(e);
+    }
+  }, [
+    addUser,
+    hsTokenRenew,
+    recordActivity,
+    router,
+    searchParams,
+    setActiveUser,
+    toggleUiProp,
+    updateActiveUser
+  ]);
+
+  useMount(() => {
+    initUser();
   });
 
-  return <></>;
+  return (
+    <div className="flex gap-4 md:gap-8 lg:gap-12 items-center justify-start flex-col p-4 sm:p-6 md:p-8 lg:p-12 xl:p-16 w-full dark:bg-black">
+      <Image src="/assets/logo-circle.svg" alt="logo" width={128} height={128} />
+      <h1 className="text-xl md:text-3xl lg:text-4xl xl:text-6xl font-semibold text-blue-dark-sky">
+        {i18next.t("hs-login.title")}
+      </h1>
+      <Alert>
+        <p className="md:text-lg lg:text-xl p-2">{i18next.t("hs-login.message")}</p>
+      </Alert>
+      <UilSpinner className="animate-spin w-6 h-6 lg:w-8 lg:h-8" />
+    </div>
+  );
 }

src/features/i18n/locales/en-US.json

@@ -2461,5 +2461,9 @@
     "invalid-time": "Invalid time format. Use HH:MM",
     "max-choices-voted": "Max choices voted by user",
     "max-votes-hint": "You may select {{n}} choices"
+  },
+  "hs-login": {
+    "title": "Logging in to Ecency from HiveSigner",
+    "message": "Please wait a bit, You will be redirected automatically."
   }
 }

src/features/shared/login/index.tsx

@@ -10,7 +10,7 @@ import { Login } from "./login";
 import { Account, User } from "@/entities";
 import { hsTokenRenew } from "@/api/auth-api";
 import { usePathname, useRouter } from "next/navigation";
-import { useRecordUserActivity } from "@/api/mutations";
+import { useHsLoginRefresh, useRecordUserActivity } from "@/api/mutations";
 
 export function LoginDialog() {
   const userListRef = useRef();
@@ -25,19 +25,16 @@ export function LoginDialog() {
   const updateActiveUser = useGlobalStore((state) => state.updateActiveUser);
 
   const { mutateAsync: recordActivity } = useRecordUserActivity();
+  const { mutateAsync: hsTokenRenew } = useHsLoginRefresh();
 
   useUnmount(() => {
     if (loginKc) {
       toggleUIProp("loginKc");
     }
   });
 
-  const doLogin = async (
-    hsCode: string,
-    postingKey: null | undefined | string,
-    account: Account
-  ) => {
-    const x = await hsTokenRenew(hsCode);
+  const doLogin = async (code: string, postingKey: null | undefined | string, account: Account) => {
+    const x = await hsTokenRenew({ code });
     // get access token from code
     const user: User = {
       username: x.username,

src/utils/hive-signer.ts

@@ -39,7 +39,11 @@ export function decodeToken(code: string): HiveSignerMessage | null {
   }
 }
 
-export function validateToken(code: string): boolean {
+export function validateToken(code: string | null): boolean {
+  if (!code) {
+    return false;
+  }
+
   const dt = decodeToken(code);
   const sevenDaysAgo: Date = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);