fix(ncs-122): send WS token via first-message auth instead of query param

Remove token from WebSocket URL query parameters in ChallengeWebSocketService
and GameApiService. Instead, send {"type":"auth","token":"..."} as the first
text frame after the connection opens, matching the new backend auth protocol.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -56,3 +56,8 @@
 ### Bug Fixes
 
 * route play-vs-bot to /vs-bot endpoint ([a620735](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/a62073511f2ac912ceb0f6b4730bef37545dd8ea))
+## [0.0.0](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/compare/0.2.8...0.0.0) (2026-06-10)
+
+### Features
+
+* bots ([#9](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/issues/9)) ([48959da](https://git.janis-eccarius.de/NowChess/NowChess-Frontend/commit/48959daae36e709ea7782ca04fdde699854f8e66))

src/app/pages/tournaments/tournaments.component.html

@@ -192,12 +192,12 @@
       <span class="dialog-brand">Join with a bot</span>
       <button type="button" class="dialog-close" (click)="closeJoinDialog()">×</button>
     </div>
-    <p class="join-hint">Select one of your bots to enter this tournament. Its token will be rotated to authenticate the join.</p>
+    <p class="join-hint">Select an official (engine-backed) bot to enter this tournament. These are the bots that actually play their moves.</p>
 
     @if (botsLoading) {
       <div class="dialog-loading"><span class="pulse"></span>Loading bots…</div>
     } @else if (userBots.length === 0) {
-      <p class="join-empty">You have no bots yet. Go to <strong>Bots</strong> in the nav to create one first.</p>
+      <p class="join-empty">No official bots are available. The official-bots engine service must be running to register them.</p>
     } @else {
       <div class="bot-pick-list">
         @for (bot of userBots; track bot.id) {

src/app/pages/tournaments/tournaments.component.ts

@@ -158,7 +158,7 @@ export class TournamentsComponent implements OnInit {
     this.joinDialogTournamentId = tournamentId;
     this.joinError = null;
     this.botsLoading = true;
-    this.botService.list()
+    this.botService.listOfficial()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: bots => { this.userBots = bots; this.botsLoading = false; },
@@ -176,9 +176,7 @@ export class TournamentsComponent implements OnInit {
     if (!this.joinDialogTournamentId || this.joiningBotId) return;
     this.joiningBotId = bot.id;
     this.joinError = null;
-    this.botService.rotateToken(bot.id).subscribe({
+    this.tournamentService.join(this.joinDialogTournamentId, bot.id, bot.name).subscribe({
-      next: token => {
-        this.tournamentService.joinWithBotToken(this.joinDialogTournamentId!, token).subscribe({
       next: () => {
         this.joiningBotId = null;
         const tid = this.joinDialogTournamentId!;
@@ -196,12 +194,6 @@ export class TournamentsComponent implements OnInit {
         this.joinError = err.error?.message ?? err.error?.error ?? 'Failed to join tournament.';
       }
     });
-      },
-      error: () => {
-        this.joiningBotId = null;
-        this.joinError = 'Failed to get bot token.';
-      }
-    });
   }
 
   private loadTournaments(): void {

src/app/services/bot.service.ts

@@ -7,11 +7,16 @@ import { Bot, BotWithToken } from '../models/bot.models';
 export class BotService {
   private readonly http = inject(HttpClient);
   private readonly base = '/api/account/bots';
+  private readonly officialBase = '/api/account/official-bots';
 
   list(): Observable<Bot[]> {
     return this.http.get<Bot[]>(this.base);
   }
 
+  listOfficial(): Observable<Bot[]> {
+    return this.http.get<Bot[]>(this.officialBase);
+  }
+
   create(name: string): Observable<BotWithToken> {
     return this.http.post<BotWithToken>(this.base, { name });
   }

src/app/services/challenge-websocket.service.ts

@@ -22,7 +22,7 @@ export class ChallengeWebSocketService {
     const token = localStorage.getItem('token');
     if (!token) return;
 
-        const url = `${environment.userWsBaseUrl}/api/user/ws?token=${encodeURIComponent(token)}`;
+    const url = `${environment.userWsBaseUrl}/api/user/ws`;
 
     try {
       this.intentionalClose = false;
@@ -30,6 +30,7 @@ export class ChallengeWebSocketService {
 
       this.ws.onopen = () => {
         this.reconnectAttempts = 0;
+        this.ws?.send(JSON.stringify({ type: 'auth', token }));
       };
 
       this.ws.onmessage = (event) => {
@@ -76,8 +77,10 @@ export class ChallengeWebSocketService {
         const challengeId = message['challengeId'] as string | undefined;
         if (challengeId) {
           this.challengeService.getChallenge(challengeId).subscribe({
-                        next: challenge => this.challengeEventService.onChallengeReceived(challenge),
+            next: (challenge) => this.challengeEventService.onChallengeReceived(challenge),
-                        error: () => { /* challenge may have already expired */ }
+            error: () => {
+              /* challenge may have already expired */
+            },
           });
         }
         break;
@@ -110,6 +113,8 @@ export class ChallengeWebSocketService {
   private attemptReconnect(): void {
     if (this.intentionalClose || this.reconnectAttempts >= this.maxReconnectAttempts) return;
     this.reconnectAttempts++;
-        setTimeout(() => { this.connect(); }, this.reconnectDelay);
+    setTimeout(() => {
+      this.connect();
+    }, this.reconnectDelay);
   }
 }

src/app/services/game-api.service.ts

@@ -7,7 +7,7 @@ import {
   GameState,
   GameStreamEvent,
   LegalMovesResponse,
-  PlayerInfo
+  PlayerInfo,
 } from '../models/game.models';
 import { StreamHandlerService } from './stream-handler.service';
 
@@ -28,11 +28,11 @@ export class GameApiService {
     const playerColor = Math.random() > 0.5 ? 'white' : 'black';
     const playerInfo: PlayerInfo = {
       id: `player-${Date.now()}`,
-      displayName: 'You'
+      displayName: 'You',
     };
     const botInfo: PlayerInfo = {
       id: `bot-${difficulty}`,
-      displayName: `Bot (${difficulty})`
+      displayName: `Bot (${difficulty})`,
     };
 
     const payload =
@@ -56,7 +56,9 @@ export class GameApiService {
     if (square) {
       params = params.set('square', square);
     }
-    return this.http.get<LegalMovesResponse>(`${this.apiBase}${this.apiPath}/${gameId}/moves`, { params });
+    return this.http.get<LegalMovesResponse>(`${this.apiBase}${this.apiPath}/${gameId}/moves`, {
+      params,
+    });
   }
 
   importFen(fen: string): Observable<GameFull> {
@@ -85,11 +87,8 @@ export class GameApiService {
   }
 
   streamGame(gameId: string): Observable<GameStreamEvent> {
-    const token = localStorage.getItem('token');
+    const wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/ws`;
-    let wsUrl = `${this.resolveWsBase()}${this.apiPath}/${gameId}/ws`;
+    const token = localStorage.getItem('token') ?? '';
-    if (token) {
+    return this.streamHandler.createGameStream(wsUrl, gameId, token);
-      wsUrl += `?token=${encodeURIComponent(token)}`;
-    }
-    return this.streamHandler.createGameStream(wsUrl, gameId);
   }
 }

src/app/services/stream-handler.service.ts

@@ -6,7 +6,7 @@ const WS_CONNECT_TIMEOUT_MS = 3000;
 
 @Injectable({ providedIn: 'root' })
 export class StreamHandlerService {
-  createGameStream(wsUrl: string, gameId: string): Observable<GameStreamEvent> {
+  createGameStream(wsUrl: string, gameId: string, token: string): Observable<GameStreamEvent> {
     return new Observable<GameStreamEvent>((observer) => {
       const ws = new WebSocket(wsUrl);
       let connected = false;
@@ -14,7 +14,7 @@ export class StreamHandlerService {
       const emitErrorEvent = (message: string): void => {
         const errorEvent: ErrorEvent = {
           type: 'error',
-          error: { code: 'STREAM_ERROR', message }
+          error: { code: 'STREAM_ERROR', message },
         };
         observer.next(errorEvent);
       };
@@ -36,6 +36,7 @@ export class StreamHandlerService {
         connected = true;
         clearTimeout(connectionTimeoutId);
         console.log(`[StreamHandler] WebSocket connected for ${gameId}`);
+        ws.send(JSON.stringify({ type: 'auth', token }));
       };
 
       ws.onmessage = (message) => {

src/app/services/tournament.service.ts

@@ -40,10 +40,8 @@ export class TournamentService {
     return this.http.post<Tournament>(`${this.base}/${id}/start`, null);
   }
 
-  joinWithBotToken(id: string, botToken: string): Observable<void> {
+  join(id: string, botId: string, botName: string): Observable<void> {
-    return this.http.post<void>(`${this.base}/${id}/join`, null, {
+    return this.http.post<void>(`${this.base}/${id}/join`, { botId, botName });
-      headers: new HttpHeaders({ Authorization: `Bearer ${botToken}` })
-    });
   }
 
   roundPairings(id: string, round: number): Observable<RoundPairings> {

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=2
+MINOR=3
-PATCH=8
+PATCH=0