Web Client (#11)

* Github Oauth

* A simple frontend

* Add middleware proxy on dev

* Forward proxy and rewrite path, add oauth to frontend, increase jwt expiry time to 12 hours

* Some simple style changes

* Add keys as user

* Checkpoint - auth is broken

* Fix auth and use player model, unrelated to this pr: flip board if dark

* Close player session when password or key deleted or put

* Add build script - this branch is quickly becoming cringe

* Docker v2 - add migration and scripts, fix local storage and index that caused build issues

* Ignore keys, proxy api correctly nginx

* Finally nginx is resolved jesus christ

* Remove max screen dimension limits cuz cringe

* Cursor highlight

* Add password form, some minor frontend changes as well

* Remove cringe on home page

* Move to 127.0.0.1 loopback in env

* Add github id in player structs for tests

1 files changed, 71 insertions, 0 deletions

diff --git a/front/src/context/auth_context.js b/front/src/context/auth_context.js
new file mode 100644
index 0000000..19747c6
--- /dev/null
+++ b/front/src/context/auth_context.js
@@ -0,0 +1,71 @@
+import { useEffect, useContext, createContext } from "react";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+
+const AuthContext = createContext({
+  signedIn: false,
+  setSignedIn: () => null,
+  sessionOver: new Date(),
+  setSessionOver: () => null,
+  setPlayer: () => null,
+  player: null,
+  signOut: () => null,
+});
+
+export const useAuthContext = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }) => {
+  const [signedIn, setSignedIn] = useLocalStorage("signedIn", false);
+  const [sessionOver, setSessionOver] = useLocalStorage(
+    "sessionOver",
+    Date.now()
+  );
+  const [player, setPlayer] = useLocalStorage("player", null);
+
+  const setDefaults = () => {
+    setPlayer(null);
+    setSessionOver(Date.now());
+    setSignedIn(false);
+  };
+
+  const signOut = () =>
+    fetch("/api/player/logout", {
+      method: "GET",
+      credentials: "same-origin",
+    }).then(() => setDefaults());
+
+  useEffect(() => {
+    setTimeout(() => {
+      setSessionOver((sessionOver) => {
+        if (Date.now() >= sessionOver) {
+          setSignedIn((signedIn) => {
+            if (signedIn)
+              alert(
+                "Session expired. Any further privileged requests will fail until signed in again."
+              );
+
+            return false;
+          });
+          setPlayer(null);
+        }
+        return sessionOver;
+      });
+    }, sessionOver - Date.now());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionOver]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        signedIn,
+        setSignedIn,
+        sessionOver,
+        setSessionOver,
+        signOut,
+        setPlayer,
+        player,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};