feat: add basic login and logout functionality

package.json

@@ -23,6 +23,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
+    "sass-embedded": "^1.80.6",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10"

src/App.css

@@ -0,0 +1,11 @@
+body {
+  padding: 0;
+  margin: 0;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

src/App.tsx

@@ -2,12 +2,15 @@ import "./App.css";
 
 import { AppwriteContextProvider } from "./contexts/appwrite";
 import { AuthContextProvider } from "./contexts/auth";
+import { Page } from "./navigation/page";
 
 export function App() {
   return (
     <>
       <AppwriteContextProvider>
-        <AuthContextProvider></AuthContextProvider>
+        <AuthContextProvider>
+          <Page></Page>
+        </AuthContextProvider>
       </AppwriteContextProvider>
     </>
   );

src/components/navbar.css

@@ -0,0 +1,18 @@
+nav {
+  /* border: 1px solid black; */
+
+  display: flex;
+  justify-content: space-between;
+  margin: 5px;
+  padding: 10px;
+  box-shadow: 0px 0px 32px 0px #999;
+  border-radius: 5px;
+
+  ul {
+    display: flex;
+    list-style: none;
+    gap: 10px;
+    padding: 0;
+    margin: 0;
+  }
+}

src/components/navbar.tsx

@@ -0,0 +1,16 @@
+import { useAuth } from "../hooks/useAuth";
+import "./navbar.css";
+
+export function NavBar() {
+  const { user, logout } = useAuth();
+  return (
+    <nav>
+      <ul>
+        <li>Home</li>
+        <li>Page</li>
+      </ul>
+      <span>{user?.name ?? "FUCK"}</span>
+      <button onClick={() => logout()}>Logout</button>
+    </nav>
+  );
+}

src/contexts/auth.tsx

@@ -1,9 +1,17 @@
-import { createContext, PropsWithChildren, useState } from "react";
+import {
+  createContext,
+  PropsWithChildren,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import { useAppwrite } from "../hooks/useAppwrite";
 import { Account, Models } from "appwrite";
 
 export type AuthContextValue = {
   session?: Models.Session;
+  user?: Models.User<Models.Preferences>;
+  loggedIn: boolean;
   login(username: string, password: string): Promise<void>;
   logout(): Promise<void>;
 };
@@ -12,9 +20,27 @@ export const AuthContext = createContext({} as AuthContextValue);
 
 export function AuthContextProvider({ children }: PropsWithChildren) {
   const { client } = useAppwrite();
-  const account = new Account(client);
+  const account = useMemo(() => new Account(client), [client]);
 
   const [session, setSession] = useState<Models.Session | undefined>();
+  const [user, setUser] = useState<
+    Models.User<Models.Preferences> | undefined
+  >();
+
+  useEffect(() => {
+    account
+      .getSession("current")
+      .then((session) => {
+        account
+          .get()
+          .then((user) => {
+            setSession(session);
+            setUser(user);
+          })
+          .catch(() => account.deleteSession("current"));
+      })
+      .catch(console.error);
+  }, [account]);
 
   async function login(username: string, password: string): Promise<void> {
     try {
@@ -23,7 +49,13 @@ export function AuthContextProvider({ children }: PropsWithChildren) {
         password,
       );
 
-      setSession(session);
+      account
+        .get()
+        .then((user) => {
+          setSession(session);
+          setUser(user);
+        })
+        .catch(() => account.deleteSession("current"));
     } catch (e) {
       console.error(e);
     }
@@ -32,6 +64,8 @@ export function AuthContextProvider({ children }: PropsWithChildren) {
   async function logout(): Promise<void> {
     try {
       await account.deleteSession("current");
+      setSession(undefined);
+      setUser(undefined);
     } catch (e) {
       console.error(e);
     }
@@ -41,6 +75,8 @@ export function AuthContextProvider({ children }: PropsWithChildren) {
     login,
     session,
     logout,
+    user,
+    loggedIn: !!(session && user),
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;

src/hooks/useAuth.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { AuthContext } from "../contexts/auth";
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

src/navigation/login.css

@@ -0,0 +1,11 @@
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  input {
+    padding: 5px;
+    border: 1px solid #42423d;
+    border-radius: 5px;
+  }
+}

src/navigation/login.tsx

@@ -0,0 +1,40 @@
+import { FormEvent, useState } from "react";
+
+import "./login.css";
+import { useAuth } from "../hooks/useAuth";
+
+export function Login() {
+  const auth = useAuth();
+
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    auth.login(username, password).then(console.log).catch(console.error);
+  }
+
+  return (
+    <>
+      <h2>Login</h2>
+      <form onSubmit={onSubmit} className="login-form">
+        <input
+          type="email"
+          name="username"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button>Login</button>
+      </form>
+    </>
+  );
+}

src/navigation/page.tsx

@@ -0,0 +1,19 @@
+import { NavBar } from "../components/navbar";
+import { useAuth } from "../hooks/useAuth";
+import { Login } from "./login";
+
+export function Page() {
+  const { loggedIn } = useAuth();
+  return (
+    <main>
+      <h1>Kneipolympics</h1>
+      {loggedIn ? (
+        <>
+          <NavBar></NavBar>
+        </>
+      ) : (
+        <Login></Login>
+      )}
+    </main>
+  );
+}