Handle token refresh errors and tell the user the token has expired

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -26,6 +26,13 @@ const PlanetaryIteractionTable = ({
 }) => {
   const theme = useTheme();
 
+  if (character.invalidToken)
+    return (
+      <p style={{ color: "red" }}>
+        Character token has expired. Relogin to fix.
+      </p>
+    );
+
   return (
     <StackItem width="100%">
       <TableContainer component={Paper}>

src/app/page.tsx

@@ -61,7 +61,16 @@ const Home = () => {
   };
 
   const refreshSession = (characters: AccessToken[]) => {
-    return Promise.all(characters.map((c) => refreshToken(c)));
+    return Promise.all(
+      characters.map(async (c) => {
+        try {
+          const refreshed = await refreshToken(c);
+          return { ...refreshed, invalidToken: false };
+        } catch (e) {
+          return { ...c, invalidToken: true };
+        }
+      }),
+    );
   };
 
   const handleCallback = async (
@@ -89,6 +98,7 @@ const Home = () => {
   ): Promise<AccessToken[]> =>
     Promise.all(
       characters.map(async (c) => {
+        if (c.invalidToken) return { ...c, planets: [] };
         const planets = await getPlanets(c);
         const planetsWithInfo: PlanetWithInfo[] = await Promise.all(
           planets.map(async (p) => ({

src/types.ts

@@ -11,6 +11,7 @@ export interface AccessToken {
   comment: string;
   system: string;
   planets: PlanetWithInfo[];
+  invalidToken?: boolean;
 }
 
 export interface Character {