More pleasant flow when auth expires, dev buttons to test

Author: francislavoie

apps/desktop/src-tauri/src/commands.rs

@@ -50,6 +50,21 @@ pub fn open_overlay_devtools(window: WebviewWindow) {
   }
 }
 
+#[tauri::command]
+pub fn simulate_error_screen(window: WebviewWindow) {
+  let app = window.app_handle();
+
+  if let Some(main_window) = app.get_webview_window(MAIN_WINDOW_NAME) {
+    let _ = main_window.eval("window.location.hash = '#/error';");
+    let _ = main_window.show();
+    let _ = main_window.set_focus();
+  }
+
+  if let Some(settings_window) = app.get_webview_window(SETTINGS_WINDOW_NAME) {
+    let _ = settings_window.hide();
+  }
+}
+
 #[tauri::command]
 pub fn toggle_pin(
   window: WebviewWindow,

apps/desktop/src-tauri/src/main.rs

@@ -168,6 +168,7 @@ fn main() {
       set_pin,
       open_devtools,
       open_overlay_devtools,
+      simulate_error_screen,
       close_settings,
       open_settings,
       set_hide_taskbar_when_pinned,

apps/desktop/src/rpc/manager.ts

@@ -52,6 +52,15 @@ class UserdataStore {
     this.store.removeItem(this.keys.accessToken);
     this.store.removeItem(this.keys.accessTokenExpiry);
   }
+
+  removeUserdata() {
+    this.store.removeItem(this.keys.userData);
+  }
+
+  clearAuth() {
+    this.removeAccessToken();
+    this.removeUserdata();
+  }
 }
 
 /**
@@ -337,14 +346,23 @@ class SocketManager {
     // console.log(payload);
     // we are ready to do things cause we are fully authed
     if (payload.cmd === RPCCommand.AUTHENTICATE && payload.evt === RPCEvent.ERROR) {
-      // they have a token from the old client id
-      if (payload.data.code === RPCErrors.INVALID_CLIENTID) {
-        this.userdataStore.removeAccessToken();
-      }
-
-      // they have an invalid token
-      if (payload.data.code === RPCErrors.INVALID_TOKEN) {
-        this.userdataStore.removeAccessToken();
+      // These are recoverable auth issues (e.g. expired/revoked token),
+      // so clear auth state and send the user back to the reauth screen.
+      const shouldReauth = [
+        RPCErrors.INVALID_CLIENTID,
+        RPCErrors.INVALID_TOKEN,
+        RPCErrors.INVALID_USER,
+        RPCErrors.OAUTH2_ERROR,
+      ].includes(payload.data.code);
+
+      if (shouldReauth) {
+        this.userdataStore.clearAuth();
+        this.store.setMe(null);
+        this.store.setCurrentChannel(null);
+        this.store.clearUsers();
+        this.navigate("/");
+        track(Metric.DiscordAuthed, 0);
+        return;
       }
 
       this.store.pushError(payload.data.message);

apps/desktop/src/views/settings/account.tsx

@@ -26,6 +26,53 @@ import * as shell from "@tauri-apps/plugin-shell";
 
 export const Developer = () => {
   const platformInfo = usePlatformInfo();
+  const DEV_TOKEN_BACKUP_KEY = "overlayed:dev:token-backup";
+  const DEV_TOKEN_EXPIRY_BACKUP_KEY = "overlayed:dev:token-expiry-backup";
+  const DEV_USER_DATA_BACKUP_KEY = "overlayed:dev:user-data-backup";
+
+  const simulateTokenExpiryForTesting = async () => {
+    const currentToken = localStorage.getItem("discord_access_token");
+    const currentTokenExpiry = localStorage.getItem("discord_access_token_expiry");
+    const currentUserData = localStorage.getItem("user_data");
+
+    if (currentToken) {
+      localStorage.setItem(DEV_TOKEN_BACKUP_KEY, currentToken);
+    }
+    if (currentTokenExpiry) {
+      localStorage.setItem(DEV_TOKEN_EXPIRY_BACKUP_KEY, currentTokenExpiry);
+    }
+    if (currentUserData) {
+      localStorage.setItem(DEV_USER_DATA_BACKUP_KEY, currentUserData);
+    }
+
+    // Clear auth keys so the app immediately routes back to the re-auth screen.
+    localStorage.removeItem("discord_access_token");
+    localStorage.removeItem("discord_access_token_expiry");
+    localStorage.removeItem("user_data");
+
+    // Bring focus back to the main window where the auth screen is shown.
+    await invoke("close_settings");
+  };
+
+  const restoreTokenAfterTesting = () => {
+    const tokenBackup = localStorage.getItem(DEV_TOKEN_BACKUP_KEY);
+    const tokenExpiryBackup = localStorage.getItem(DEV_TOKEN_EXPIRY_BACKUP_KEY);
+    const userDataBackup = localStorage.getItem(DEV_USER_DATA_BACKUP_KEY);
+
+    if (tokenBackup) {
+      localStorage.setItem("discord_access_token", tokenBackup);
+      localStorage.removeItem(DEV_TOKEN_BACKUP_KEY);
+    }
+    if (tokenExpiryBackup) {
+      localStorage.setItem("discord_access_token_expiry", tokenExpiryBackup);
+      localStorage.removeItem(DEV_TOKEN_EXPIRY_BACKUP_KEY);
+    }
+    if (userDataBackup) {
+      localStorage.setItem("user_data", userDataBackup);
+      localStorage.removeItem(DEV_USER_DATA_BACKUP_KEY);
+    }
+  };
+
   return (
     <>
       <div className="flex flex-col gap-2">
@@ -35,18 +82,10 @@ export const Developer = () => {
             variant="outline"
             onClick={async () => {
               await invoke("open_devtools");
-            }}
-          >
-            Open Devtools
-          </Button>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={async () => {
               await invoke("open_overlay_devtools");
             }}
           >
-            Open Overlay Devtools
+            Open Devtools
           </Button>
           <Button
             size="sm"
@@ -57,7 +96,9 @@ export const Developer = () => {
           >
             Open Config Dir
           </Button>
-          {import.meta.env.DEV && (
+        </div>
+        {import.meta.env.DEV && (
+          <div className="flex gap-4 pb-2">
             <Button
               size="sm"
               variant="outline"
@@ -67,8 +108,29 @@ export const Developer = () => {
             >
               Reset FTUE tip
             </Button>
-          )}
-        </div>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                void simulateTokenExpiryForTesting();
+              }}
+            >
+              Expire Auth
+            </Button>
+            <Button size="sm" variant="outline" onClick={restoreTokenAfterTesting}>
+              Restore Auth
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={async () => {
+                await invoke("simulate_error_screen");
+              }}
+            >
+              Simulate Error Screen
+            </Button>
+          </div>
+        )}
       </div>
     </>
   );