Merge pull request 'feat: working user auth on deployment' (#1) from feature into main

Reviewed-on: #1

.env

@@ -0,0 +1,2 @@
+STEAM_API_KEY=
+SESSION_COOKIE_KEY=

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

api/main.ts

@@ -1,9 +1,84 @@
-import { Application, Router } from "@oak/oak";
+/// <reference lib="deno.ns" />
-import { oakCors } from "@tajpouria/cors";
+
+import { Application, Router } from "https://deno.land/x/oak/mod.ts";
+import { oakCors } from "https://deno.land/x/cors/mod.ts";
+import { CookieStore, Session } from "https://deno.land/x/oak_sessions/mod.ts";
 import data from "./data.json" with { type: "json" };
 import routeStaticFilesFrom from "./util/routeStaticFilesFrom.ts";
 
-const router = new Router();
+import SteamAuth from "https://deno.land/x/deno_steam_openid@0.0.1/mod.ts";
+import "https://deno.land/x/dotenv/load.ts";
+
+type AppState = {
+  session: Session;
+};
+
+const router = new Router<AppState>();
+
+const hostname = "forums.warabi.co";
+const authPath = "/auth";
+const port = 8000;
+
+export interface SteamUser {
+  steamid: string;
+  personaname: string;
+  profileurl: string;
+  avatar: string;
+  avatarmedium: string;
+  avatarfull: string;
+  personastate: number;
+  communityvisibilitystate: number;
+  profilestate: number;
+  lastlogoff: number;
+  commentpermission: number;
+  realname: string;
+  primaryclanid: string;
+  timecreated: number;
+  personastateflags: number;
+  loccountrycode: string;
+  locstatecode: string;
+  loccityid: number;
+}
+
+export const Steam = new SteamAuth({
+  realm: `https://${hostname}`,
+  returnUrl: `https://${hostname}${authPath}/return`,
+  apiKey: Deno.env.get("STEAM_API_KEY"),
+});
+
+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}`;
+  }
+});
+
+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("/");
+  } catch (e) {
+    ctx.response.body = `Error: ${e}`;
+  }
+});
+
+router.get("/api/session", async (ctx) => {
+  if (ctx.state.session.has("user")) {
+    const user = await ctx.state.session.get("user") as SteamUser;
+    ctx.response.body = { user };
+  } else {
+    ctx.response.status = 401;
+    ctx.response.body = { error: "Not authenticated" };
+  }
+});
 
 router.get("/api/dinosaurs", (context) => {
   context.response.body = data;
@@ -21,8 +96,13 @@ router.get("/api/dinosaurs/:dinosaur", (context) => {
   context.response.body = dinosaur ? dinosaur : "No dinosaur found.";
 });
 
-const app = new Application();
+const store = new CookieStore(Deno.env.get("SESSION_COOKIE_KEY") as string, {
+  sessionDataCookieName: "warbforums_sessionData"
+});
+
+const app = new Application<AppState>();
 app.use(oakCors());
+app.use(Session.initMiddleware(store) as any);
 app.use(router.routes());
 app.use(router.allowedMethods());
 app.use(routeStaticFilesFrom([
@@ -30,4 +110,8 @@ app.use(routeStaticFilesFrom([
   `${Deno.cwd()}/public`,
 ]));
 
+app.addEventListener("error", (evt) => {
+  console.log(evt.error);
+});
+
 await app.listen({ port: 8000 });

deno.json

@@ -3,5 +3,11 @@
     "@oak/oak": "jsr:@oak/oak@^17.0.0",
     "@tajpouria/cors": "jsr:@tajpouria/cors@^1.2.1",
     "react-router-dom": "npm:react-router-dom@^6.26.2"
+  },
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "React.createElement",
+    "jsxFragmentFactory": "React.Fragment",
+    "lib": ["dom", "esnext"]
   }
 }

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",
+    "dev:vite": "deno run -A npm:vite --host",
     "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,15 +1,52 @@
+import { createContext, useEffect, useState } from "react";
+import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Index from "./pages/index";
+import Index from "./pages/index.tsx";
-import Dinosaur from "./pages/Dinosaur";
+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 type { SteamUser } from "../api/main.ts";
+
+export const UserContext = createContext<{
+  user: SteamUser | undefined;
+  setUser: React.Dispatch<React.SetStateAction<SteamUser | undefined>>;
+}>({ user: undefined, setUser: () => { } });
 
 function App() {
+  const [user, setUser] = useState<SteamUser>();
+  const value = { user, setUser };
+
+  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);
+      }
+    })();
+  }, []);
+
   return (
     <BrowserRouter>
+      <UserContext.Provider value={value}>
+        <Header />
+        <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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,32 @@
+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,68 +1,112 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --header-height: 64px;
-  line-height: 1.5;
+  --header-bg-color: #ffffff;
-  font-weight: 400;
+  --header-text-color: #242424;
-
+  --header-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  color-scheme: light dark;
+  --header-padding: 1rem;
-  color: rgba(255, 255, 255, 0.87);
+  --header-margin-top: 1rem;
-  background-color: #242424;
+  --font-size-header: 1.25rem;
-
+  --font-weight-header: bold;
-  font-synthesis: none;
+  --accent-color: #242424;
-  text-rendering: optimizeLegibility;
+  --avatar-size: 48px;
-  -webkit-font-smoothing: antialiased;
+  --avatar-margin-top: 0.5rem;
-  -moz-osx-font-smoothing: grayscale;
+  --avatar-border-radius: 10%;
+  --avatar-border-width: 1px;
+  --route-container-margin-top: var(--header-height);
 }
 
-a {
+* {
-  font-weight: 500;
+  box-sizing: border-box;
-  color: #646cff;
+  margin: 0;
-  text-decoration: inherit;
+  padding: 0;
-}
-a:hover {
-  color: #535bf2;
 }
 
 body {
-  margin: 0;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  display: flex;
+  line-height: 1.6;
-  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;
-  background-color: #1a1a1a;
+  font-size: inherit;
   cursor: pointer;
-  transition: border-color 0.25s;
+  background: transparent;
-}
+  border-radius: 3px;
-button:hover {
+  border: 1px solid #242424;
-  border-color: #646cff;
+  display: inline-block;
-}
+  margin: 0.5rem 1rem;
-button:focus,
+  padding: 0.5rem 0;
-button:focus-visible {
+  transition: all 200ms ease-in-out;
-  outline: 4px auto -webkit-focus-ring-color;
+  width: 11rem;
 }
 
-@media (prefers-color-scheme: light) {
+button:hover {
-  :root {
+  background-color: #242424;
-    color: #213547;
+  color: #ffffff;
-    background-color: #ffffff;
+}
+
+.header {
+  display: flex;
+  background-color: var(--header-bg-color);
+  color: var(--header-text-color);
+  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 {
+
-    color: #747bff;
+  .header > * {
+    margin-top: 1rem;
   }
-  button {
+
-    background-color: #f9f9f9;
+  .header h1 {
+    font-size: 1rem;
+  }
+
+  .avatar {
+    width: 40px;
+    height: 40px;
+  }
+
+  .route-container {
+    margin-top: 56px;
   }
 }

src/main.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import App from "./App.tsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

src/pages/AuthSuccess.tsx

@@ -0,0 +1,14 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+const AuthSuccess = () => {
+  const nav = useNavigate();
+
+  useEffect(() => {
+    nav("/");
+  }, [nav]);
+
+  return <div>Signing you in...</div>;
+};
+
+export default AuthSuccess;

src/pages/Dinosaur.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useParams } from "react-router-dom";
-import { Dino } from "../types";
+import { Dino } from "../types.ts";
 
 export default function Dinosaur() {
   const { selectedDinosaur } = useParams();

src/pages/Profile.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from "react";
+
+import { Link } from "react-router-dom";
+import type { SteamUser } from "../../api/main.ts";
+
+const Profile = () => {
+    const [user, setUser] = useState<SteamUser>();
+
+    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>Profile</h1>
+            <button onClick={user ? printUser : handleLogin}>
+                Sign in with Steam
+            </button>
+            {user && <p>Welcome, {user.personaname}!</p>}
+        </main>
+    );
+};
+
+export default Profile;

src/pages/index.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
+
 import { Dino } from "../types.ts";
 
 export default function Index() {
@@ -15,7 +16,7 @@ export default function Index() {
 
   return (
     <main>
-      <h1>Welcome to the Dinosaur app</h1>
+      <h1>Dinosaur Home</h1>
       <p>Click on a dinosaur below to learn more.</p>
       {dinosaurs.map((dinosaur: Dino) => {
         return (

tsconfig.app.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src", "tsconfig.json"]
-}

tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}

tsconfig.node.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
-}

vite.config.ts

@@ -10,6 +10,10 @@ export default defineConfig({
         target: "http://localhost:8000",
         changeOrigin: true,
       },
+      "/auth": {
+        target: "http://localhost:8000",
+        changeOrigin: true,
+      },
     },
   },
 });