- Created new Player.tsx component to handle username input, auto-connect, matchmaking, and logout.

- Moved all login, session UI, mode selection, and matchmaking logic from TicTacToe.tsx into Player.tsx.
- Added onMatchDataCallback prop support for Player component.
- Cleaned up TicTacToe.tsx by removing duplicated login/matchmaking UI and connect logic.
- Improved auto-connect on mount via Player.tsx.

src/tictactoe/Player.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import Leaderboard from "./Leaderboard";
+import { useNakama } from "./providers/NakamaProvider";
+
+export default function Player({
+  onMatchDataCallback,
+}: {
+  onMatchDataCallback: (msg: any) => void;
+}) {
+  const {
+    session,
+    matchId,
+    loginOrRegister,
+    logout,
+    onMatchData,
+    joinMatchmaker,
+  } = useNakama();
+
+  const [username, setUsername] = useState(
+    localStorage.getItem("username") ?? ""
+  );
+  const [selectedMode, setSelectedMode] = useState("classic");
+
+  // ------------------------------------------
+  // CONNECT
+  // ------------------------------------------
+  async function handleConnect() {
+    await loginOrRegister(username);
+
+    // Match data listener
+    onMatchData(onMatchDataCallback);
+  }
+
+  // ------------------------------------------
+  // MATCHMAKING
+  // ------------------------------------------
+  async function startQueue(selectedMode: string) {
+    const ticket = await joinMatchmaker(selectedMode);
+    console.log("Queued:", ticket);
+  }
+
+  useEffect(() => {
+    handleConnect();
+  }, []);
+
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      {session && !matchId && (
+        <>
+          <h2>Hello, {session.username}</h2>
+
+          {/* Game mode selection */}
+          <label style={{ display: "block", marginTop: "10px" }}>
+            Select Game Mode:
+          </label>
+
+          <select
+            value={selectedMode}
+            onChange={(e) => setSelectedMode(e.target.value)}
+            style={{ padding: "6px", marginBottom: "10px" }}
+          >
+            <option value="classic">Classic</option>
+            <option value="blitz">Blitz</option>
+          </select>
+
+          {/* Join matchmaking */}
+          <button onClick={() => startQueue(selectedMode)}>Join Matchmaking</button>
+          <button onClick={() => logout()}>Logout</button>
+
+          {/*/!* List open matches *!/*/}
+          {/*<MatchList matches={openMatches} />*/}
+          <Leaderboard/>
+        </>
+      )}
+      {session && matchId && (
+        <>
+          <h2>Go {session.username}!</h2>
+        </>
+      )}
+    </div>
+  );
+}

src/tictactoe/TicTacToe.tsx

@@ -1,13 +1,11 @@
 import { useState, useEffect } from "react";
 import { useNakama } from "./providers/NakamaProvider";
 import Board from "./Board";
-import Leaderboard from "./Leaderboard";
+import Player from "./Player";
 // import { Match } from "@heroiclabs/nakama-js";
 // import MatchList from "./MatchList";
 
 export default function TicTacToe() {
-  const [username, setUsername] = useState("");
-  const [selectedMode, setSelectedMode] = useState("classic");
   const [board, setBoard] = useState<string[][]>([
     ["", "", ""],
     ["", "", ""],
@@ -18,18 +16,7 @@ export default function TicTacToe() {
   // const [openMatches, setOpenMatches] = useState<Match[]>([]);
   const [players, setPlayers] = useState<string[]>([]);
 
-  const {
+  function onMatchDataCallback(msg: { opCode: number; data: any }) {
-    loginOrRegister,
-    joinMatchmaker,
-    onMatchData,
-    sendMatchData,
-    listOpenMatches,
-    matchId,
-    session,
-  } = useNakama();
-
-  useEffect(() => {
-    onMatchData((msg) => {
     console.log("[Match Data]", msg);
 
     if (msg.opCode === 2) {
@@ -43,7 +30,18 @@ export default function TicTacToe() {
       // new:
       setPlayers(state.players || []);
     }
-    });
+  }
+
+  const {
+    onMatchData,
+    sendMatchData,
+    // listOpenMatches,
+    matchId,
+    session,
+  } = useNakama();
+
+  useEffect(() => {
+    onMatchData(onMatchDataCallback);
   }, [onMatchData]);
 
   // useEffect(() => {
@@ -65,30 +63,6 @@ export default function TicTacToe() {
   //   };
   // }, [listOpenMatches]);
 
-  // ------------------------------------------
-  // CONNECT
-  // ------------------------------------------
-  async function connect() {
-    await loginOrRegister(username);
-
-    // Match data listener
-    onMatchData((msg) => {
-      console.log("[Match Data]", msg);
-
-      if (msg.opCode === 2) {
-        const state = msg.data;
-        console.log("Match state:", state);
-
-        setBoard(state.board);
-        setTurn(state.turn);
-        setWinner(state.winner || null);
-
-        // new:
-        setPlayers(state.players || []);
-      }
-    });
-  }
-
   // ------------------------------------------
   // SEND A MOVE
   // ------------------------------------------
@@ -98,55 +72,13 @@ export default function TicTacToe() {
     sendMatchData(matchId, 1, { row, col }); // OpMove=1
   }
 
-  // ------------------------------------------
-  // MATCHMAKING
-  // ------------------------------------------
-  async function startQueue(selectedMode: string) {
-    const ticket = await joinMatchmaker(selectedMode);
-    console.log("Queued:", ticket);
-  }
-
   return (
     <div>
       <h1>Tic Tac Toe Multiplayer</h1>
 
-      {!session && (
+      <Player
-        <>
+        onMatchDataCallback={onMatchDataCallback}
-          <input
-            placeholder="username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
       />
-          <button onClick={connect}>Connect</button>
-        </>
-      )}
-
-      {session && !matchId && (
-        <>
-          <h2>Hello, {session.username}</h2>
-
-          {/* Game mode selection */}
-          <label style={{ display: "block", marginTop: "10px" }}>
-            Select Game Mode:
-          </label>
-
-          <select
-            value={selectedMode}
-            onChange={(e) => setSelectedMode(e.target.value)}
-            style={{ padding: "6px", marginBottom: "10px" }}
-          >
-            <option value="classic">Classic</option>
-            <option value="blitz">Blitz</option>
-          </select>
-
-          {/* Join matchmaking */}
-          <button onClick={() => startQueue(selectedMode)}>Join Matchmaking</button>
-
-          {/*/!* List open matches *!/*/}
-          {/*<MatchList matches={openMatches} />*/}
-          <Leaderboard/>
-        </>
-      )}
 
       {matchId && (
         <Board

src/tictactoe/providers/NakamaProvider.tsx

@@ -32,6 +32,7 @@ export interface NakamaContextType {
   matchId: string | null;
 
   loginOrRegister(username: string): Promise<void>;
+  logout(): Promise<void>;
   joinMatchmaker(mode: string): Promise<string>;
   joinMatch(matchId: string): Promise<void>;
 
@@ -55,17 +56,63 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
   const lastModeRef = React.useRef<string | null>(null);
   const socketRef = React.useRef<Socket | null>(null);
 
+  async function autoLogin() {
+    const deviceId = getOrCreateDeviceId();
+
+    try {
+      return await client.authenticateDevice(
+        deviceId,
+        false
+      );
+    } catch (e) {
+      // fallback: treat as new user
+      localStorage.removeItem("registered");
+      throw e;
+    }
+  }
+
+  async function registerWithUsername(username: string) {
+    const deviceId = getOrCreateDeviceId();
+
+    // create + set username
+    const session = await client.authenticateDevice(
+      deviceId,
+      true,
+      username
+    );
+
+    // mark an account as registered
+    localStorage.setItem("registered", "yes");
+    localStorage.setItem("username", username);
+
+    return session;
+  }
+
+  async function getSession(username?: string) {
+    const isRegistered = localStorage.getItem("registered") === "yes";
+    if (!username && !isRegistered) {
+      throw new Error("No username provided and not registered");
+    }
+
+    let newSession;
+    if (!isRegistered) {
+      newSession = await registerWithUsername(username ?? "");
+    } else {
+      newSession = await autoLogin();
+    }
+
+    return newSession;
+  }
+
   // ----------------------------------------------------
   // LOGIN
   // ----------------------------------------------------
-  async function loginOrRegister(username: string) {
+  async function loginOrRegister(username?: string) {
-    const deviceId = getOrCreateDeviceId();
-
     // authenticate user
-    const newSession = await client.authenticateDevice(deviceId, true, username);
+    const newSession = await getSession(username);
     setSession(newSession);
 
-    // create socket (new Nakama 3.x signature)
+    // create a socket (new Nakama 3.x signature)
     const s = client.createSocket(undefined, undefined); // no SSL on localhost
     await s.connect(newSession, true);
     setSocket(s);
@@ -102,6 +149,25 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
     };
   }
 
+  async function logout() {
+    try {
+      // 1) Disconnect socket if present
+      if (socketRef.current) {
+        socketRef.current.disconnect(true);
+        console.log("[Nakama] WebSocket disconnected");
+      }
+    } catch (err) {
+      console.warn("[Nakama] Error while disconnecting socket:", err);
+    }
+
+    // 2) Clear state
+    setSocket(null);
+    socketRef.current = null;
+    setSession(null);
+
+    console.log("[Nakama] Clean logout completed");
+  }
+
   // ----------------------------------------------------
   // MATCHMAKING
   // ----------------------------------------------------
@@ -187,6 +253,7 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
         socket,
         matchId,
         loginOrRegister,
+        logout,
         joinMatchmaker,
         joinMatch,
         sendMatchData,