fix(api-server): fix init/authentication error

- Close #2497

src/plugins/api-server/backend/main.ts

@@ -10,14 +10,15 @@ import { createBackend } from '@/utils';
 import { JWTPayloadSchema } from './scheme';
 import { registerAuth, registerControl } from './routes';
 
-import type { APIServerConfig } from '../config';
+import { type APIServerConfig, AuthStrategy } from '../config';
+
 import type { BackendType } from './types';
 
 export const backend = createBackend<BackendType, APIServerConfig>({
   async start(ctx) {
     const config = await ctx.getConfig();
 
-    this.init(ctx);
+    await this.init(ctx);
     registerCallback((songInfo) => {
       this.songInfo = songInfo;
     });
@@ -49,17 +50,20 @@ export const backend = createBackend<BackendType, APIServerConfig>({
     this.app.use('*', cors());
 
     // middlewares
-    this.app.use(
+    this.app.use('/api/*', async (ctx, next) => {
-      '/api/*',
+      if (config.authStrategy !== AuthStrategy.NONE) {
-      jwt({
+        return await jwt({
-        secret: config.secret,
+          secret: config.secret,
-      }),
+        })(ctx, next);
-    );
+      }
+      await next();
+    });
     this.app.use('/api/*', async (ctx, next) => {
       const result = await JWTPayloadSchema.spa(await ctx.get('jwtPayload'));
 
       const isAuthorized =
-        result.success && config.authorizedClients.includes(result.data.id);
+        config.authStrategy === AuthStrategy.NONE ||
+        (result.success && config.authorizedClients.includes(result.data.id));
       if (!isAuthorized) {
         ctx.status(401);
         return ctx.body('Unauthorized');

src/plugins/api-server/backend/routes/auth.ts

@@ -6,9 +6,9 @@ import { getConnInfo } from '@hono/node-server/conninfo';
 
 import { t } from '@/i18n';
 
-import { APIServerConfig } from '../../config';
+import { type APIServerConfig, AuthStrategy } from '../../config';
-import { JWTPayload } from '../scheme';
 
+import type { JWTPayload } from '../scheme';
 import type { HonoApp } from '../types';
 import type { BackendContext } from '@/types/contexts';
 
@@ -52,7 +52,7 @@ export const register = (
 
     if (config.authorizedClients.includes(id)) {
       // SKIP CHECK
-    } else if (config.authStrategy === 'AUTH_AT_FIRST') {
+    } else if (config.authStrategy === AuthStrategy.AUTH_AT_FIRST) {
       const result = await dialog.showMessageBox({
         title: t('plugins.api-server.dialog.request.title'),
         message: t('plugins.api-server.dialog.request.message', {
@@ -71,7 +71,7 @@ export const register = (
         ctx.status(403);
         return ctx.body(null);
       }
-    } else if (config.authStrategy === 'NONE') {
+    } else if (config.authStrategy === AuthStrategy.NONE) {
       // SKIP CHECK
     }
 

src/plugins/api-server/backend/types.ts

@@ -12,7 +12,7 @@ export type BackendType = {
   oldConfig?: APIServerConfig;
   songInfo?: SongInfo;
 
-  init: (ctx: BackendContext<APIServerConfig>) => void;
+  init: (ctx: BackendContext<APIServerConfig>) => Promise<void>;
   run: (hostname: string, port: number) => void;
   end: () => void;
 };

src/plugins/api-server/config.ts

@@ -1,8 +1,13 @@
+export enum AuthStrategy {
+  AUTH_AT_FIRST = 'AUTH_AT_FIRST',
+  NONE = 'NONE',
+}
+
 export interface APIServerConfig {
   enabled: boolean;
   hostname: string;
   port: number;
-  authStrategy: 'AUTH_AT_FIRST' | 'NONE';
+  authStrategy: AuthStrategy;
   secret: string;
 
   authorizedClients: string[];
@@ -12,7 +17,7 @@ export const defaultAPIServerConfig: APIServerConfig = {
   enabled: true,
   hostname: '0.0.0.0',
   port: 26538,
-  authStrategy: 'AUTH_AT_FIRST',
+  authStrategy: AuthStrategy.AUTH_AT_FIRST,
   secret: Date.now().toString(36),
 
   authorizedClients: [],

src/plugins/api-server/menu.ts

@@ -3,7 +3,11 @@ import prompt from 'custom-electron-prompt';
 import { t } from '@/i18n';
 import promptOptions from '@/providers/prompt-options';
 
-import { APIServerConfig, defaultAPIServerConfig } from './config';
+import {
+  type APIServerConfig,
+  AuthStrategy,
+  defaultAPIServerConfig,
+} from './config';
 
 import type { MenuContext } from '@/types/contexts';
 import type { MenuTemplate } from '@/menu';
@@ -74,17 +78,17 @@ export const onMenu = async ({
             'plugins.api-server.menu.auth-strategy.submenu.auth-at-first.label',
           ),
           type: 'radio',
-          checked: config.authStrategy === 'AUTH_AT_FIRST',
+          checked: config.authStrategy === AuthStrategy.AUTH_AT_FIRST,
           click() {
-            setConfig({ ...config, authStrategy: 'AUTH_AT_FIRST' });
+            setConfig({ ...config, authStrategy: AuthStrategy.AUTH_AT_FIRST });
           },
         },
         {
           label: t('plugins.api-server.menu.auth-strategy.submenu.none.label'),
           type: 'radio',
-          checked: config.authStrategy === 'NONE',
+          checked: config.authStrategy === AuthStrategy.NONE,
           click() {
-            setConfig({ ...config, authStrategy: 'NONE' });
+            setConfig({ ...config, authStrategy: AuthStrategy.NONE });
           },
         },
       ],

src/renderer.ts

@@ -129,8 +129,8 @@ async function onApiLoaded() {
     }
   };
 
-  window.ipcRenderer.on('ytmd:get-fullscreen', (event) => {
+  window.ipcRenderer.on('ytmd:get-fullscreen', () => {
-    event.sender.send('ytmd:set-fullscreen', isFullscreen());
+    window.ipcRenderer.send('ytmd:set-fullscreen', isFullscreen());
   });
 
   window.ipcRenderer.on(
@@ -148,9 +148,9 @@ async function onApiLoaded() {
       ?.onVolumeTap();
   });
 
-  window.ipcRenderer.on('ytmd:get-queue', (event) => {
+  window.ipcRenderer.on('ytmd:get-queue', () => {
     const queue = document.querySelector<QueueElement>('#queue');
-    event.sender.send('ytmd:get-queue-response', {
+    window.ipcRenderer.send('ytmd:get-queue-response', {
       items: queue?.queue.getItems(),
       autoPlaying: queue?.queue.autoPlaying,
       continuation: queue?.queue.continuation,