web/main: move authentication to happen after react init

web/src/App.tsx

@@ -29,16 +29,11 @@ function App() {
 	window.client = client
 	const connState = useEventAsState(client.rpc.connect)
 	const clientState = useEventAsState(client.state)
-	useEffect(() => {
+	useEffect(() => client.start(), [client])
-		Notification.requestPermission()
-			.then(permission => console.log("Notification permission:", permission))
-		client.rpc.start()
-		return () => client.rpc.stop()
-	}, [client])
 
 	if (connState?.error) {
 		return <div>
-			error {`${connState.error}`} :(
+			{`${connState.error} \u{1F63F}`}
 		</div>
 	} else if (!connState?.connected || !clientState) {
 		const msg = connState?.connected ?

web/src/api/client.ts

@@ -38,6 +38,41 @@ export default class Client {
 			queueMicrotask(() => this.#handleEmoteRoomsChange()))
 	}
 
+	async #reallyStart(signal: AbortSignal) {
+		try {
+			const resp = await fetch("_gomuks/auth", {
+				method: "POST",
+				signal,
+			})
+			if (!resp.ok) {
+				this.rpc.connect.emit({
+					connected: false,
+					error: new Error(`Authentication failed: ${resp.statusText}`),
+				})
+				return
+			}
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(`${err}`)
+			this.rpc.connect.emit({ connected: false, error })
+		}
+		if (signal.aborted) {
+			return
+		}
+		console.log("Successfully authenticated, connecting to websocket")
+		this.rpc.start()
+		Notification.requestPermission()
+			.then(permission => console.log("Notification permission:", permission))
+	}
+
+	start(): () => void {
+		const abort = new AbortController()
+		this.#reallyStart(abort.signal)
+		return () => {
+			abort.abort()
+			this.rpc.stop()
+		}
+	}
+
 	get userID(): UserID {
 		return this.state.current?.is_logged_in ? this.state.current.user_id : ""
 	}

web/src/main.tsx

@@ -18,16 +18,8 @@ import { createRoot } from "react-dom/client"
 import App from "./App.tsx"
 import "./index.css"
 
-fetch("_gomuks/auth", { method: "POST" }).then(resp => {
+createRoot(document.getElementById("root")!).render(
-	if (resp.ok) {
+	<StrictMode>
-		createRoot(document.getElementById("root")!).render(
+		<App/>
-			<StrictMode>
+	</StrictMode>,
-				<App/>
+)
-			</StrictMode>,
-		)
-	} else {
-		window.alert("Authentication failed: " + resp.statusText)
-	}
-}, err => {
-	window.alert("Authentication failed: " + err)
-})