Improve authentication and fix #1901

frontend/src/App/index.tsx

@@ -24,8 +24,10 @@ const App: FunctionComponent = () => {
     setCriticalError(detail.message);
   });
 
-  useWindowEvent("app-login-required", () => {
+  useWindowEvent("app-auth-changed", (ev) => {
+    if (!ev.detail.authenticated) {
       navigate("/login");
+    }
   });
 
   useWindowEvent("app-online-status", ({ detail }) => {

frontend/src/apis/hooks/system.ts

@@ -1,5 +1,5 @@
 import { Environment } from "@/utilities";
-import { setLoginRequired } from "@/utilities/event";
+import { setAuthenticated } from "@/utilities/event";
 import { useMemo } from "react";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { QueryKeys } from "../queries/keys";
@@ -173,7 +173,7 @@ export function useSystem() {
     () => api.system.logout(),
     {
       onSuccess: () => {
-        setLoginRequired();
+        setAuthenticated(false);
         client.clear();
       },
     }

frontend/src/apis/raw/client.ts

@@ -1,7 +1,7 @@
-import SocketIO from "@/modules/socketio";
+import socketio from "@/modules/socketio";
 import { notification } from "@/modules/task";
 import { LOG } from "@/utilities/console";
-import { setLoginRequired } from "@/utilities/event";
+import { setAuthenticated } from "@/utilities/event";
 import { showNotification } from "@mantine/notifications";
 import Axios, { AxiosError, AxiosInstance, CancelTokenSource } from "axios";
 import { Environment } from "../../utilities";
@@ -17,17 +17,19 @@ function GetErrorMessage(data: unknown, defaultMsg = "Unknown error"): string {
 class BazarrClient {
   axios!: AxiosInstance;
   source!: CancelTokenSource;
+  bIsAuthenticated: boolean;
 
   constructor() {
+    this.bIsAuthenticated = false;
     const baseUrl = `${Environment.baseUrl}/api/`;
 
-    LOG("info", "initializing BazarrClient with", baseUrl);
-
     this.initialize(baseUrl, Environment.apiKey);
-    SocketIO.initialize();
+    socketio.initialize();
   }
 
   initialize(url: string, apikey?: string) {
+    LOG("info", "initializing BazarrClient with baseUrl", url);
+
     this.axios = Axios.create({
       baseURL: url,
     });
@@ -45,6 +47,10 @@ class BazarrClient {
     this.axios.interceptors.response.use(
       (resp) => {
         if (resp.status >= 200 && resp.status < 300) {
+          if (!this.bIsAuthenticated) {
+            this.bIsAuthenticated = true;
+            setAuthenticated(true);
+          }
           return Promise.resolve(resp);
         } else {
           const error: BackendError = {
@@ -78,7 +84,8 @@ class BazarrClient {
     const { code, message } = error;
     switch (code) {
       case 401:
-        setLoginRequired();
+        this.bIsAuthenticated = false;
+        setAuthenticated(false);
         return;
     }
     LOG("error", "A error has occurred", code);

frontend/src/modules/socketio/index.ts

@@ -51,10 +51,30 @@ class SocketIOClient {
   }
 
   initialize() {
+    LOG("info", "Initializing Socket.IO client...");
     this.reducers.push(...createDefaultReducer());
+
+    window.addEventListener("app-auth-changed", (ev) => {
+      const authenticated = ev.detail.authenticated;
+      LOG("info", "Authentication status change to", authenticated);
+      if (authenticated) {
+        this.connect();
+      } else {
+        this.disconnect();
+      }
+    });
+  }
+
+  connect() {
+    LOG("info", "Connecting Socket.IO client...");
     this.socket.connect();
   }
 
+  disconnect() {
+    LOG("info", "Disconnecting Socket.IO client...");
+    this.socket.disconnect();
+  }
+
   addReducer(reducer: SocketIO.Reducer) {
     this.reducers.push(reducer);
   }

frontend/src/types/window.d.ts

@@ -10,8 +10,8 @@ declare global {
   }
 
   interface WindowEventMap {
+    "app-auth-changed": CustomEvent<{ authenticated: boolean }>;
     "app-critical-error": CustomEvent<{ message: string }>;
-    "app-login-required": CustomEvent;
     "app-online-status": CustomEvent<{ online: boolean }>;
   }
 }

frontend/src/utilities/event.ts

@@ -7,8 +7,8 @@ function createEvent<
   return new CustomEvent<P>(event, { bubbles: true, detail: payload });
 }
 
-export function setLoginRequired() {
+export function setAuthenticated(authenticated: boolean) {
-  const event = createEvent("app-login-required", {});
+  const event = createEvent("app-auth-changed", { authenticated });
   window.dispatchEvent(event);
 }