diff --git a/app/components/auth.tsx b/app/components/auth.tsx
index b82d0e89..577d7754 100644
--- a/app/components/auth.tsx
+++ b/app/components/auth.tsx
@@ -12,11 +12,16 @@ import { getClientConfig } from "../config/client";
 
 export function AuthPage() {
   const navigate = useNavigate();
-  const access = useAccessStore();
+  const accessStore = useAccessStore();
 
   const goHome = () => navigate(Path.Home);
   const goChat = () => navigate(Path.Chat);
-  const resetAccessCode = () => { access.updateCode(""); access.updateToken(""); }; // Reset access code to empty string
+  const resetAccessCode = () => {
+    accessStore.update((access) => {
+      access.token = "";
+      access.accessCode = "";
+    });
+  }; // Reset access code to empty string
 
   useEffect(() => {
     if (getClientConfig()?.isApp) {
@@ -38,21 +43,25 @@ export function AuthPage() {
         className={styles["auth-input"]}
         type="password"
         placeholder={Locale.Auth.Input}
-        value={access.accessCode}
+        value={accessStore.accessCode}
         onChange={(e) => {
-          access.updateCode(e.currentTarget.value);
+          accessStore.update(
+            (access) => (access.accessCode = e.currentTarget.value),
+          );
         }}
       />
-      {!access.hideUserApiKey ? (
+      {!accessStore.hideUserApiKey ? (
         <>
           <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>
           <input
             className={styles["auth-input"]}
             type="password"
             placeholder={Locale.Settings.Token.Placeholder}
-            value={access.token}
+            value={accessStore.token}
             onChange={(e) => {
-              access.updateToken(e.currentTarget.value);
+              accessStore.update(
+                (access) => (access.token = e.currentTarget.value),
+              );
             }}
           />
         </>