fix: check token in reg

src/routes/reg/RegWithUsername.tsx

@@ -4,23 +4,16 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
 
-import {
-  useCheckMagicTokenValidMutation,
-  useLoginMutation,
-  useRegisterMutation
-} from "@/app/services/auth";
+import { useLoginMutation, useRegisterMutation } from "@/app/services/auth";
 import { setAuthData } from "@/app/slices/auth.data";
 import Button from "@/components/styled/Button";
 import Input from "@/components/styled/Input";
-import ExpiredTip from "./ExpiredTip";
 import { useMagicToken } from "./index";
 
 const RegWithUsername: FC = () => {
   const { t: ct } = useTranslation();
   const { t } = useTranslation("auth");
   const { token } = useMagicToken();
-  const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
-    useCheckMagicTokenValidMutation();
   const [
     login,
     { isLoading: loginLoading, error: loginError, isSuccess: loginSuccess, data: loginData }
@@ -33,12 +26,6 @@ const RegWithUsername: FC = () => {
   const { from = "reg" } = useParams();
   const dispatch = useDispatch();
   const [username, setUsername] = useState("");
-  // todo: check if query param exists
-  useEffect(() => {
-    if (token) {
-      checkTokenInvalid(token);
-    }
-  }, [token]);
 
   useEffect(() => {
     if (loginError && "status" in loginError) {
@@ -97,8 +84,6 @@ const RegWithUsername: FC = () => {
   };
 
   if (!token) return <span className="dark:text-white">No Token</span>;
-  if (checkingToken) return <div className="dark:text-gray-100">Checking Magic Link...</div>;
-  if (!isTokenValid) return <ExpiredTip />;
   const isLoading = loginLoading || regLoading;
   const isSuccess = loginSuccess || regSuccess;
   return (

src/routes/reg/index.tsx

@@ -1,19 +1,31 @@
 import { useEffect, useState } from "react";
 import { Outlet, useOutletContext, useSearchParams } from "react-router-dom";
 
+import { useCheckMagicTokenValidMutation } from "@/app/services/auth";
+import ExpiredTip from "./ExpiredTip";
+
 type ContextType = { token: string };
 export default function RegContainer() {
+  const [checkToken, { data: tokenIsValid, isLoading: checkingToken }] =
+    useCheckMagicTokenValidMutation();
   const [token, setToken] = useState("");
   let [searchParams] = useSearchParams(new URLSearchParams(location.search));
   const magic_token = searchParams.get("magic_token") ?? "";
   useEffect(() => {
-    setToken(magic_token);
+    if (magic_token) {
+      checkToken(magic_token);
+    }
   }, [magic_token]);
-
+  useEffect(() => {
+    if (tokenIsValid) {
+      setToken(magic_token);
+    }
+  }, [tokenIsValid, magic_token]);
+  if (checkingToken) return <div className="dark:text-gray-100">Checking Magic Link...</div>;
   return (
     <div className="flex-center h-screen overflow-x-hidden overflow-y-auto dark:bg-gray-700">
       <div className="py-8 px-10 shadow-md rounded-xl max-h-[95vh] overflow-y-auto overflow-x-hidden">
-        <Outlet context={{ token }} />
+        {tokenIsValid ? <Outlet context={{ token }} /> : <ExpiredTip />}
       </div>
     </div>
   );