Fix: auth not refreshing on launch #15

src/App.tsx

@@ -6,7 +6,6 @@ import ModsSection from "./components/ModsSection";
 import SettingsSection from "./components/SettingsSection";
 import { versions } from "./lib/launcher";
 import { GameVersion } from "./lib/types";
-import { MinecraftAccount } from "./lib/auth";
 import { getVersion, installPaths, updateVersion } from "./lib/saturn";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import { listen } from "@tauri-apps/api/event";
@@ -26,8 +25,8 @@ export default function App() {
   const versionRef = useRef<HTMLDivElement | null>(null);
   const accountRef = useRef<HTMLDivElement | null>(null);
 
-  const [accounts, setAccounts] = useState<MinecraftAccount[]>([]);
-  const [activeAccount, setActiveAccount] = useState<MinecraftAccount | null>(
+  const [accounts, setAccounts] = useState<[string, string][]>([]);
+  const [activeAccount, setActiveAccount] = useState<[string, string] | null>(
     null,
   );
 
@@ -137,7 +136,7 @@ export default function App() {
 
           <div className="flex-1 p-8 overflow-y-scroll">
             {active === "play" && (
-              <PlaySection version={selectedVersion} account={activeAccount} />
+              <PlaySection version={selectedVersion} activeAccount={activeAccount} setActiveAccount={setActiveAccount} accounts={accounts} setAccounts={setAccounts} />
             )}
             {active === "mods" && selectedVersion && (
               <ModsSection version={selectedVersion} />

src/components/PlaySection.tsx

@@ -1,19 +1,22 @@
 import React, { useEffect, useState } from "react";
 import { Play, Loader2 } from "lucide-react";
-// import { launchGame } from "../services/SaturnApi";
 import Bg from "@/assets/bg.png";
 import { listen } from "@tauri-apps/api/event";
 import { GameVersion } from "@/lib/types";
 import { launch } from "@/lib/launcher";
-import { MinecraftAccount } from "@/lib/auth";
+import { authGetValid } from "@/lib/auth";
 import { cn } from "@/lib/utils";
+import { SetState } from "./layout/props";
 
 interface PlaySectionProps {
   version: GameVersion | null;
-  account: MinecraftAccount | null;
+  activeAccount: [string, string] | null;
+  setActiveAccount: SetState<[string, string] | null>,
+  accounts: [string, string][],
+  setAccounts: SetState<[string, string][]>,
 }
 
-const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
+const PlaySection: React.FC<PlaySectionProps> = ({ version, activeAccount: account }) => {
   const [isLaunching, setIsLaunching] = useState(false);
   const [launchStatus, setLaunchStatus] = useState("");
   const [progress, setProgress] = useState(0);
@@ -39,6 +42,13 @@ const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
     };
   }, []);
 
+  const handleLaunch = async () => {
+    if (version && account) {
+      const validAccount = await authGetValid(account[0]);
+      launch(version, validAccount);
+    }
+  }
+
   return (
     <div className="h-full relative">
       {/* Background Image */}
@@ -54,12 +64,12 @@ const PlaySection: React.FC<PlaySectionProps> = ({ version, account }) => {
           <div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
 
           <button
-            onClick={() => version && account && launch(version, account)}
+            onClick={handleLaunch}
             disabled={isLaunching || !version || !account}
             className={cn(
               "relative btn-primary px-16 py-4 text-xl flex items-center gap-3 min-w-60 justify-center",
               (isLaunching || !version || !account) &&
-                "cursor-not-allowed opacity-70",
+              "cursor-not-allowed opacity-70",
             )}
           >
             {isLaunching ? (

src/components/layout/AccountDropdown.tsx

@@ -7,7 +7,6 @@ import {
   authRemove,
   authCreateLink,
   authLogin,
-  MinecraftAccount,
 } from "@/lib/auth";
 import { listen } from "@tauri-apps/api/event";
 
@@ -64,7 +63,7 @@ export default function AccountDropdown({
   }
 
   // Switch account
-  function switchAccount(acc: MinecraftAccount) {
+  function switchAccount(acc: [string, string]) {
     setActiveAccount(acc);
     setIsAccountDropdownOpen(false);
   }
@@ -73,7 +72,7 @@ export default function AccountDropdown({
   async function logout() {
     if (!activeAccount) return;
 
-    await authRemove(activeAccount.uuid);
+    await authRemove(activeAccount[0]);
 
     const updated = await authList();
     setAccounts(updated);
@@ -91,7 +90,7 @@ export default function AccountDropdown({
     });
   }
 
-  const otherAccounts = accounts.filter((a) => a.uuid !== activeAccount?.uuid);
+  const otherAccounts = accounts.filter((a) => a[0] !== activeAccount?.[0]);
 
   return (
     <div ref={accountRef} className="relative group overflow-visible">
@@ -106,7 +105,7 @@ export default function AccountDropdown({
         <div className="absolute -top-2 left-4 group-hover:scale-110 transition-transform duration-700 w-12 overflow-hidden z-20">
           {activeAccount && (
             <img
-              src={`https://render.crafty.gg/3d/bust/${activeAccount.uuid}`}
+              src={`https://render.crafty.gg/3d/bust/${activeAccount[0]}`}
               className="w-full h-full object-cover"
             />
           )}
@@ -123,7 +122,7 @@ export default function AccountDropdown({
             Playing as
           </p>
           <p className="text-sm font-bold text-white">
-            {activeAccount?.username || "No Account"}
+            {activeAccount?.[1] || "No Account"}
           </p>
         </div>
       </button>
@@ -140,17 +139,17 @@ export default function AccountDropdown({
         {/* Current account */}
         {activeAccount && (
           <UserComponent
-            username={activeAccount.username}
-            uuid={activeAccount.uuid}
+            username={activeAccount[1]}
+            uuid={activeAccount[0]}
           />
         )}
 
         {/* Other accounts */}
         {otherAccounts.map((acc) => (
           <UserComponent
-            key={acc.uuid}
-            username={acc.username}
-            uuid={acc.uuid}
+            key={acc[0]}
+            username={acc[1]}
+            uuid={acc[0]}
             onClick={() => switchAccount(acc)}
           />
         ))}

src/components/layout/props.ts

@@ -1,4 +1,3 @@
-import { MinecraftAccount } from "@/lib/auth";
 import { GameVersion } from "@/lib/types";
 
 export type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -17,9 +16,9 @@ export interface Props {
   versionRef: React.RefObject<HTMLDivElement | null>;
   accountRef: React.RefObject<HTMLDivElement | null>;
 
-  accounts: MinecraftAccount[];
-  setAccounts: SetState<MinecraftAccount[]>;
+  accounts: [string, string][];
+  setAccounts: SetState<[string, string][]>;
 
-  activeAccount: MinecraftAccount | null;
-  setActiveAccount: SetState<MinecraftAccount | null>;
+  activeAccount: [string, string] | null;
+  setActiveAccount: SetState<[string, string] | null>;
 }

src/lib/auth.ts

@@ -33,8 +33,9 @@ export async function authRefresh(uuid: string): Promise<MinecraftAccount> {
 
 /**
  * Get all stored accounts
+ * Format [UUID, Username]
  */
-export async function authList(): Promise<MinecraftAccount[]> {
+export async function authList(): Promise<[string, string][]> {
   return await invoke("auth_list");
 }