create a frontend with a main menu

frontend/src/auth.jsx

@@ -0,0 +1,59 @@
+import { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import { api } from './api'
+
+const AuthContext = createContext(null)
+const TOKEN_KEY = 'sea_battle_token'
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null)
+  const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY))
+  const [loading, setLoading] = useState(!!localStorage.getItem(TOKEN_KEY))
+
+  useEffect(() => {
+    if (!token) {
+      setUser(null)
+      setLoading(false)
+      return
+    }
+    api
+      .me(token)
+      .then((data) => setUser(data.user))
+      .catch(() => {
+        localStorage.removeItem(TOKEN_KEY)
+        setToken(null)
+        setUser(null)
+      })
+      .finally(() => setLoading(false))
+  }, [token])
+
+  const login = useCallback(async (nickname, password) => {
+    const data = await api.login(nickname, password)
+    localStorage.setItem(TOKEN_KEY, data.token)
+    setToken(data.token)
+    setUser(data.user)
+  }, [])
+
+  const register = useCallback(async (nickname, password, avatarFile) => {
+    const data = await api.register(nickname, password, avatarFile)
+    localStorage.setItem(TOKEN_KEY, data.token)
+    setToken(data.token)
+    setUser(data.user)
+  }, [])
+
+  const logout = useCallback(() => {
+    if (token) api.logout(token).catch(() => {})
+    localStorage.removeItem(TOKEN_KEY)
+    setToken(null)
+    setUser(null)
+  }, [token])
+
+  return (
+    <AuthContext.Provider value={{ user, token, loading, login, register, logout }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  return useContext(AuthContext)
+}