api/main.ts

@@ -15,7 +15,7 @@ type AppState = {
 
 const router = new Router<AppState>();
 
-const hostname = "forums.warabi.co";
+const hostname = "localhost";
 const authPath = "/auth";
 const port = 8000;
 
@@ -41,8 +41,8 @@ export interface SteamUser {
 }
 
 export const Steam = new SteamAuth({
-  realm: `https://${hostname}`,
+  realm: `http://${hostname}:${port}`,
-  returnUrl: `https://${hostname}${authPath}/return`,
+  returnUrl: `http://${hostname}:${port}${authPath}/return`,
   apiKey: Deno.env.get("STEAM_API_KEY"),
 });
 
@@ -50,7 +50,6 @@ router.get(`${authPath}/login`, async (ctx) => {
   try {
     const redirectUrl = await Steam.getRedirectUrl() as string;
     ctx.response.body = { url: redirectUrl };
-    console.log("Redirecting to:", redirectUrl);
   } catch (e) {
     ctx.response.body = `Error: ${e}`;
   }
@@ -58,13 +57,10 @@ router.get(`${authPath}/login`, async (ctx) => {
 
 router.get(`${authPath}/return`, async (ctx) => {
   try {
-    console.log("Authenticating user...");
     const user = await Steam.authenticate(ctx) as SteamUser;
-    console.log(user);
     ctx.state.session.set("steamid", user.steamid);
     ctx.state.session.set("user", user);
-    console.log("Authenticated user:", user);
+    ctx.response.redirect(`http://localhost:5173/signedIn`);
-    ctx.response.redirect("/");
   } catch (e) {
     ctx.response.body = `Error: ${e}`;
   }
@@ -97,7 +93,11 @@ router.get("/api/dinosaurs/:dinosaur", (context) => {
 });
 
 const store = new CookieStore(Deno.env.get("SESSION_COOKIE_KEY") as string, {
-  sessionDataCookieName: "warbforums_sessionData"
+  sessionDataCookieName: "warbforums_sessionData",
+  cookieSetDeleteOptions: {
+    sameSite: "none",
+    secure: true,
+  },
 });
 
 const app = new Application<AppState>();

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "deno task dev:api & deno task dev:vite",
     "dev:api": "deno run --allow-env --allow-read --allow-net api/main.ts",
-    "dev:vite": "deno run -A npm:vite --host",
+    "dev:vite": "deno run -A npm:vite",
     "build": "tsc -b && vite build",
     "serve": "deno task build && deno task dev:api",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

src/App.tsx

@@ -1,18 +1,16 @@
 import { createContext, useEffect, useState } from "react";
-import React from "react";
+import React, { BrowserRouter, Route, Routes } from "react-router-dom";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Index from "./pages/index.tsx";
 import Dinosaur from "./pages/Dinosaur.tsx";
-import AuthSuccess from "./pages/AuthSuccess.tsx";
-import Profile from "./pages/Profile.tsx";
-import Header from "./components/Header.tsx";
 import "./App.css";
+import AuthSuccess from "./pages/AuthSuccess.tsx";
 import type { SteamUser } from "../api/main.ts";
+import Profile from "./pages/Profile.tsx";
 
 export const UserContext = createContext<{
   user: SteamUser | undefined;
-  setUser: React.Dispatch<React.SetStateAction<SteamUser | undefined>>;
+  setUser: any;
-}>({ user: undefined, setUser: () => { } });
+}>({ user: undefined, setUser: () => {} });
 
 function App() {
   const [user, setUser] = useState<SteamUser>();
@@ -37,15 +35,13 @@ function App() {
   return (
     <BrowserRouter>
       <UserContext.Provider value={value}>
-        <Header />
+        <h1>Welcome to the Dinosaur App</h1>
-        <div className="route-container">
         <Routes>
           <Route path="/" element={<Index />} />
           <Route path="/signedIn" element={<AuthSuccess />} />
           <Route path="/users/:steamId" element={<Profile />} />
           <Route path="/:selectedDinosaur" element={<Dinosaur />} />
         </Routes>
-        </div>
       </UserContext.Provider>
     </BrowserRouter>
   );

src/components/Avatar.tsx

@@ -1,12 +0,0 @@
-import React, { useContext } from "react";
-import { UserContext } from "../App.tsx";
-
-export default function Avatar() {
-    const { user } = useContext(UserContext);
-
-    return (
-        <div>
-            <img className="avatar" src={user?.avatarfull} alt="User avatar" />
-        </div>
-    )
-}

src/components/Header.tsx

@@ -1,22 +0,0 @@
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import { UserContext } from "../App.tsx";
-import Avatar from "./Avatar.tsx";
-import SignIn from "./SignIn.tsx";
-
-const Header = () => {
-    const { user } = useContext(UserContext);
-
-    return (
-        <header className="header">
-            <h1>
-                <Link to="/">Dinosaur App</Link>
-            </h1>
-            <div>
-                {user ? <Avatar /> : <SignIn />}
-            </div>
-        </header>
-    );
-};
-
-export default Header;

src/components/SignIn.tsx

@@ -1,32 +0,0 @@
-import React, { useContext } from "react";
-import { UserContext } from "../App.tsx";
-
-export default function SignIn() {
-    const { user } = useContext(UserContext);
-
-    const printUser = async () => {
-        console.log(user);
-    };
-
-    const handleLogin = async () => {
-        try {
-            const response = await fetch("/auth/login");
-            if (!response.ok) {
-                throw new Error("Failed to fetch authorization URL");
-            }
-            const { url } = await response.json();
-            globalThis.location.href = url;
-        } catch (error) {
-            console.error("Error during login:", error);
-        }
-    };
-
-    return (
-        <div>
-            <button onClick={user ? printUser : handleLogin}>
-                Sign in with Steam
-            </button>
-            {user && <p>Welcome, {user.personaname}!</p>}
-        </div>
-    );
-}

src/index.css

@@ -1,112 +1,68 @@
 :root {
-  --header-height: 64px;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  --header-bg-color: #ffffff;
+  line-height: 1.5;
-  --header-text-color: #242424;
+  font-weight: 400;
-  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
-  --header-padding: 1rem;
+  color-scheme: light dark;
-  --header-margin-top: 1rem;
+  color: rgba(255, 255, 255, 0.87);
-  --font-size-header: 1.25rem;
+  background-color: #242424;
-  --font-weight-header: bold;
+
-  --accent-color: #242424;
+  font-synthesis: none;
-  --avatar-size: 48px;
+  text-rendering: optimizeLegibility;
-  --avatar-margin-top: 0.5rem;
+  -webkit-font-smoothing: antialiased;
-  --avatar-border-radius: 10%;
+  -moz-osx-font-smoothing: grayscale;
-  --avatar-border-width: 1px;
-  --route-container-margin-top: var(--header-height);
 }
 
-* {
+a {
-  box-sizing: border-box;
+  font-weight: 500;
-  margin: 0;
+  color: #646cff;
-  padding: 0;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
 }
 
 body {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  margin: 0;
-  line-height: 1.6;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
 }
 
 button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
   font-family: inherit;
-  font-size: inherit;
+  background-color: #1a1a1a;
   cursor: pointer;
-  background: transparent;
+  transition: border-color 0.25s;
-  border-radius: 3px;
-  border: 1px solid #242424;
-  display: inline-block;
-  margin: 0.5rem 1rem;
-  padding: 0.5rem 0;
-  transition: all 200ms ease-in-out;
-  width: 11rem;
 }
-
 button:hover {
-  background-color: #242424;
+  border-color: #646cff;
-  color: #ffffff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
-.header {
+@media (prefers-color-scheme: light) {
-  display: flex;
+  :root {
-  background-color: var(--header-bg-color);
+    color: #213547;
-  color: var(--header-text-color);
+    background-color: #ffffff;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: var(--header-height);
-  position: fixed;
-  left: 0;
-  top: 0;
-  box-shadow: var(--header-shadow);
-  padding: var(--header-padding);
-}
-
-.header > * {
-  margin: var(--header-padding);
-  margin-top: var(--header-margin-top);
-}
-
-.header h1 {
-  font-size: var(--font-size-header);
-  font-weight: var(--font-weight-header);
-}
-
-.avatar {
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  margin-top: var(--avatar-margin-top);
-  border-radius: var(--avatar-border-radius);
-  border: var(--avatar-border-width) solid var(--accent-color);
-  object-fit: cover;
-}
-
-.route-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin-top: var(--route-container-margin-top);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .header {
-    height: 56px;
   }
-
+  a:hover {
-  .header > * {
+    color: #747bff;
-    margin-top: 1rem;
   }
-
+  button {
-  .header h1 {
+    background-color: #f9f9f9;
-    font-size: 1rem;
-  }
-
-  .avatar {
-    width: 40px;
-    height: 40px;
-  }
-
-  .route-container {
-    margin-top: 56px;
   }
 }

src/pages/index.tsx

@@ -1,10 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-
 import { Dino } from "../types.ts";
+import type { SteamUser } from "../../api/main.ts";
+import { UserContext } from "../App.tsx";
 
 export default function Index() {
   const [dinosaurs, setDinosaurs] = useState<Dino[]>([]);
+  const { user } = useContext(UserContext);
 
   useEffect(() => {
     (async () => {
@@ -14,10 +16,47 @@ export default function Index() {
     })();
   }, []);
 
+  /*useEffect(() => {
+    (async () => {
+      try {
+        const response = await fetch("/api/session", {
+          credentials: "include",
+        });
+        const res = await response.json();
+        if (res.user && res.user.steamid) {
+          setUser(res.user as SteamUser);
+        }
+      } catch (error) {
+        console.error("Error fetching user:", error);
+      }
+    })();
+  }, []);*/
+
+  const printUser = async () => {
+    console.log(user);
+  };
+
+  const handleLogin = async () => {
+    try {
+      const response = await fetch("http://localhost:8000/auth/login");
+      if (!response.ok) {
+        throw new Error("Failed to fetch authorization URL");
+      }
+      const { url } = await response.json();
+      globalThis.location.href = url;
+    } catch (error) {
+      console.error("Error during login:", error);
+    }
+  };
+
   return (
     <main>
       <h1>Dinosaur Home</h1>
       <p>Click on a dinosaur below to learn more.</p>
+      <button onClick={user ? printUser : handleLogin}>
+        Sign in with Steam
+      </button>
+      {user && <p>Welcome, {user.personaname}!</p>}
       {dinosaurs.map((dinosaur: Dino) => {
         return (
           <Link