[Remote] Actually fix auth (#260)

* fix favicon, basic auth

* actual fix......

src/main/features/core/remote/index.ts

@@ -34,6 +34,7 @@ interface MimeType {
 
 interface StatefulWebSocket extends WebSocket {
     alive: boolean;
+    auth: boolean;
 }
 
 let server: Server | undefined;
@@ -52,7 +53,7 @@ type SendData = ServerEvent & {
 
 function send({ client, event, data }: SendData): void {
     if (client.readyState === WebSocket.OPEN) {
-        if (client.alive) {
+        if (client.alive && client.auth) {
             client.send(JSON.stringify({ data, event }));
         }
     }
@@ -320,12 +321,13 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
 
             wsServer.on('connection', (ws) => {
                 let authFail: number | undefined;
+                ws.alive = true;
 
                 if (!settings.username && !settings.password) {
-                    ws.alive = true;
+                    ws.auth = true;
                 } else {
                     authFail = setTimeout(() => {
-                        if (!ws.alive) {
+                        if (!ws.auth) {
                             ws.close();
                         }
                     }, 10000) as unknown as number;
@@ -334,29 +336,28 @@ const enableServer = (config: RemoteConfig): Promise<void> => {
                 ws.on('error', console.error);
 
                 ws.on('message', (data) => {
-                    if (!ws.alive) {
                     try {
-                            const auth = data.toString().split(' ')[1];
+                        const json = JSON.parse(data.toString()) as ClientEvent;
+                        const event = json.event;
+
+                        if (!ws.auth) {
+                            if (event === 'authenticate') {
+                                const auth = json.header.split(' ')[1];
                                 const [login, password] = Buffer.from(auth, 'base64')
                                     .toString()
                                     .split(':');
 
                                 if (login === settings.username && password === settings.password) {
-                                ws.alive = true;
+                                    ws.auth = true;
                                 } else {
                                     ws.close();
                                 }
 
                                 clearTimeout(authFail);
-                        } catch (e) {
+                            } else {
-                            console.error(e);
-                        }
                                 return;
                             }
-
+                        }
-                    try {
-                        const json = JSON.parse(data.toString()) as ClientEvent;
-                        const event = json.event;
 
                         switch (event) {
                             case 'pause': {

src/remote/store/index.ts

@@ -87,7 +87,7 @@ export const useRemoteStore = create<SettingsSlice>()(
         devtools(
             immer((set, get) => ({
                 actions: {
-                    reconnect: () => {
+                    reconnect: async () => {
                         const existing = get().socket;
 
                         if (existing) {
@@ -99,11 +99,17 @@ export const useRemoteStore = create<SettingsSlice>()(
                                 existing.close(4001);
                             }
                         }
-                        set(async (state) => {
+
+                        let authHeader: string | undefined;
+
                         try {
                             const credentials = await fetch('/credentials');
-                                const authHeader = await credentials.text();
+                            authHeader = await credentials.text();
+                        } catch (error) {
+                            console.error('Failed to get credentials');
+                        }
 
+                        set((state) => {
                             const socket = new WebSocket(
                                 // eslint-disable-next-line no-restricted-globals
                                 location.href.replace('http', 'ws'),
@@ -152,7 +158,14 @@ export const useRemoteStore = create<SettingsSlice>()(
                             });
 
                             socket.addEventListener('open', () => {
-                                    socket.send(authHeader);
+                                if (authHeader) {
+                                    socket.send(
+                                        JSON.stringify({
+                                            event: 'authenticate',
+                                            header: authHeader,
+                                        }),
+                                    );
+                                }
                                 set({ connected: true });
                             });
 
@@ -178,12 +191,10 @@ export const useRemoteStore = create<SettingsSlice>()(
                             });
 
                             state.socket = socket;
-                            } catch (err) {
-                                console.error(err);
-                            }
                         });
                     },
                     send: (data: ClientEvent) => {
+                        console.log(data, get().socket);
                         get().socket?.send(JSON.stringify(data));
                     },
                     toggleIsDark: () => {

src/remote/types.ts

@@ -53,4 +53,14 @@ export interface ClientVolume {
     volume: number;
 }
 
-export type ClientEvent = ClientSimpleEvent | ClientFavorite | ClientRating | ClientVolume;
+export interface ClientAuth {
+    event: 'authenticate';
+    header: string;
+}
+
+export type ClientEvent =
+    | ClientAuth
+    | ClientSimpleEvent
+    | ClientFavorite
+    | ClientRating
+    | ClientVolume;