add back authentication (hopefully ts works in prod idk)

Author: sojs-coder

.vscode/settings.json

@@ -2,8 +2,10 @@
     "cSpell.words": [
         "Cloaker",
         "dbparams",
+        "esoka",
         "notif",
         "notifs",
+        "sqpi",
         "unmarshall",
         "unmarshalled"
     ]

bun.lock

@@ -12,6 +12,7 @@
         "@sveltejs/adapter-static": "^3.0.9",
         "@types/node": "^24.7.2",
         "fs": "^0.0.1-security",
+        "oidc-client-ts": "^3.3.0",
       },
       "devDependencies": {
         "@eslint/compat": "^1.2.5",
@@ -551,6 +552,8 @@
 
     "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
 
+    "jwt-decode": ["jwt-decode@4.0.0", "", {}, "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA=="],
+
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
@@ -593,6 +596,8 @@
 
     "obliterator": ["obliterator@1.6.1", "", {}, "sha512-9WXswnqINnnhOG/5SLimUlzuU1hFJUc8zkwyD59Sd+dPOMf05PmnYG/d6Q7HZ+KmgkZJa1PxRso6QdM3sTNHig=="],
 
+    "oidc-client-ts": ["oidc-client-ts@3.3.0", "", { "dependencies": { "jwt-decode": "^4.0.0" } }, "sha512-t13S540ZwFOEZKLYHJwSfITugupW4uYLwuQSSXyKH/wHwZ+7FvgHE7gnNJh1YQIZ1Yd1hKSRjqeXGSUtS0r9JA=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],

package.json

@@ -60,6 +60,7 @@
 		"@aws-sdk/util-dynamodb": "^3.883.0",
 		"@sveltejs/adapter-static": "^3.0.9",
 		"@types/node": "^24.7.2",
-		"fs": "^0.0.1-security"
+		"fs": "^0.0.1-security",
+		"oidc-client-ts": "^3.3.0"
 	}
 }

src/lib/authentication.ts

@@ -0,0 +1,25 @@
+import { UserManager } from "oidc-client-ts";
+
+
+
+export interface Tokens {
+    accessToken: string | undefined;
+    idToken: string | undefined;
+    refreshToken: string | undefined;
+}
+const cognitoAuthConfig = {
+    authority: "https://cognito-idp.us-west-2.amazonaws.com/us-west-2_lg1qptg2n",
+    client_id: "4d6esoka62s46lo4d398o3sqpi",
+    redirect_uri: "http://localhost:5173/auth/callback",
+    response_type: "code",
+    scope: "aws.cognito.signin.user.admin email openid phone profile"
+};
+
+export const userManager = new UserManager({
+    ...cognitoAuthConfig
+});
+
+
+export async function signinRequest() {
+    await userManager.signinRedirect();
+}

src/lib/components/Navigation.svelte

@@ -1,29 +1,63 @@
 <script lang="ts">
     import { page } from "$app/state";
-    const links = (typeof window !== "undefined" && window.origin.includes("amazonaws"))
-        ? [
-            ["Notifications", "/notifications"],
-            ["Tab Cloaker", "/tab-cloaker.html"],
-            [
-                "Master Doc",
-                "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk",
-            ],
-            ["ROM Library", "/roms.html"],
-            ["Discord", "https://discord.gg/GDEFRBTT3Z"],
-        ]
-        : [
-            ["Notifications", "/notifications"],
-            ["Tab Cloaker", "/tab-cloaker"],
-            [
-                "Master Doc",
-                "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk",
-            ],
-            ["ROM Library", "/roms"],
-            ["Discord", "https://discord.gg/GDEFRBTT3Z"],
-        ];
+    import { initializeAds } from "$lib/adSlotConfig.js";
+    import { initializeTooling, SessionState } from "$lib/state.js";
+    import { onMount } from "svelte";
+
+    type Link = [string, string];
+    let links = $state<Link[]>([
+        ["Notifications", "/notifications"],
+        ["Tab Cloaker", "/tab-cloaker"],
+        [
+            "Master Doc",
+            "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk",
+        ],
+        ["ROM Library", "/roms"],
+        ["Discord", "https://discord.gg/GDEFRBTT3Z"],
+        ["Login", "/auth/login"],
+    ]);
+
+    onMount(() => {
+        if (typeof window !== "undefined" && window.origin.includes("amazonaws")) {
+            links = [
+                ["Notifications", "/notifications"],
+                ["Tab Cloaker", "/tab-cloaker.html"],
+                [
+                    "Master Doc",
+                    "https://docs.google.com/document/d/11yw7n2F84XOkAwpM8tF-ZYHESuus1Gg7dmJ-WJum1fk",
+                ],
+                ["ROM Library", "/roms.html"],
+                ["Discord", "https://discord.gg/GDEFRBTT3Z"],
+            ]
+        }
+    });
+
+    // Optional helpers to update links at runtime
+    export function setLinks(newLinks: Link[]) {
+        links = newLinks;
+    }
+    export function addLink(name: string, url: string) {
+        links = [...links, [name, url]];
+    }
+    export function removeLinkByUrl(url: string) {
+        links = links.filter(([, u]) => u !== url);
+    }
 
     const currentPath = page.url.pathname;
     let menuOpen = $state(false);
+
+
+    onMount(async () => {
+        await initializeTooling();
+
+
+        const user = SessionState.user;
+
+        if (user) {
+            removeLinkByUrl("/auth/login");
+            // addLink("Profile", "/auth/profile");
+        }
+    })
 </script>
 
 <div class="n-container">

src/lib/state.ts

@@ -8,7 +8,57 @@ import { S3Client } from "@aws-sdk/client-s3";
 import { detectAdBlockEnabled } from "./helpers.js";
 import { page } from "$app/state";
 import { goto } from "$app/navigation";
+import type { User } from "oidc-client-ts";
+import { createModal } from "$lib/modal.js";
+import { signinRequest } from "$lib/authentication.js";
 
+
+interface Tokens {
+    idToken: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresAt?: number; // epoch ms
+}
+const TOKEN_STORAGE_KEY = 'ccported_tokens';
+
+function readStoredTokens(): Tokens | null {
+    if (!browser) return null;
+    try {
+        const raw = localStorage.getItem(TOKEN_STORAGE_KEY);
+        if (!raw) return null;
+        return JSON.parse(raw);
+    } catch {
+        return null;
+    }
+}
+
+function clearStoredTokens() {
+    if (!browser) return;
+    try { localStorage.removeItem(TOKEN_STORAGE_KEY); } catch {}
+}
+
+function isExpired(expiresAt?: number, skewSec = 60): boolean {
+    if (!expiresAt) return true;
+    return Date.now() >= (expiresAt - skewSec * 1000);
+}
+
+function decodeJwt<T = any>(token?: string): T | null {
+    if (!token) return null;
+    try {
+        const parts = token.split('.');
+        if (parts.length !== 3) return null;
+        const payload = atob(parts[1].replace(/-/g, '+').replace(/_/g, '/'));
+        const json = decodeURIComponent(
+            payload
+                .split('')
+                .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+                .join('')
+        );
+        return JSON.parse(json);
+    } catch {
+        return null;
+    }
+}
 export const SessionState = {
     awsReady: false,
     ssr: !browser,
@@ -20,7 +70,10 @@ export const SessionState = {
     devMode: (browser && window.location.hostname === "localhost"),
     serverResponses: [] as { server: Server; success: boolean; time: number, reason: string }[],
     plays: 0,
-    user: null as null | { name: string; email: string; tokens: any } | undefined,
+    user: null as null | {
+        profile?: any;
+        tokens?: Tokens;
+    },
     loggedIn: false
 }
 
@@ -82,7 +135,7 @@ export async function initializeTooling() {
         return;
     }
     initializingTooling = true;
-    
+
     // Handle SetServer query parameter
     if (browser && window) {
         const urlParams = new URLSearchParams(window.location.search);
@@ -108,8 +161,50 @@ export async function initializeTooling() {
             newUrl.search = urlParams.toString();
             window.history.replaceState(null, '', newUrl.toString());
         }
+
+        // Initialize auth state from persisted tokens (runs client-side only)
+        const storedTokens = readStoredTokens();
+        if (storedTokens) {
+            console.log("[initializeTooling] Found stored tokens.", storedTokens);
+            if (isExpired(storedTokens.expiresAt)) {
+                // Tokens expired: inform the user and offer to log in again or continue without login
+                createModal({
+                    title: 'Session expired',
+                    content: 'Your session has expired and you have been signed out. You can log in again or continue without logging in.',
+                    actions: [
+                        {
+                            label: 'Log in',
+                            onClick: () => {
+                                // Attempt a fresh sign-in redirect
+                                try { signinRequest(); } catch {}
+                            }
+                        },
+                        {
+                            label: 'Continue without login',
+                            onClick: (api) => {
+                                clearStoredTokens();
+                                SessionState.user = null as any;
+                                SessionState.loggedIn = false;
+                                api.close();
+                            }
+                        }
+                    ]
+                });
+            } else {
+                // Tokens valid: derive a user profile from the id token claims
+                const profile = decodeJwt(storedTokens.idToken);
+                if (!SessionState.user) {
+                    SessionState.user = {};
+                }
+                SessionState.user.tokens = storedTokens;
+                if (profile) {
+                    SessionState.user.profile = profile as any;
+                    SessionState.loggedIn = true;
+                }
+            }
+        }
     }
-    
+
     const server = await findServer();
     if (!server) {
         console.error("No available servers found.");
@@ -145,7 +240,7 @@ export async function initializeTooling() {
         });
     }
 
-    const credentials = await initializeUnathenticated();
+    const credentials = await initializeUnauthenticated();
     const dynamoDBClient = new DynamoDBClient({
         region: "us-west-2",
         credentials
@@ -562,7 +657,7 @@ export async function getAllAvailableServers(servers: Server[]): Promise<Server[
     return availableServers;
 }
 
-async function initializeUnathenticated() {
+async function initializeUnauthenticated() {
 
     const identityPoolId = "us-west-2:8ffe94a1-9042-4509-8e65-4efe16e61e3e";
     const credentials = fromCognitoIdentityPool({
@@ -573,4 +668,3 @@ async function initializeUnathenticated() {
     SessionState.awsReady = true;
     return credentials;
 }
-

src/routes/auth/callback/+page.ts

@@ -0,0 +1,67 @@
+// Client-only route to process the OIDC redirect, persist tokens, and bounce home
+import { redirect } from '@sveltejs/kit';
+export const ssr = false;
+export const csr = true;
+
+import { userManager } from '$lib/authentication.js';
+import { SessionState } from '$lib/state.js';
+
+const TOKEN_STORAGE_KEY = 'ccported_tokens';
+
+type StoredTokens = {
+	accessToken?: string;
+	idToken?: string;
+	refreshToken?: string;
+	expiresAt?: number; // epoch ms
+};
+
+export async function load() {
+	// This runs in the browser only (ssr=false)
+	try {
+		// Complete the sign-in redirect flow and obtain the user
+		const user = await userManager.signinCallback(window.location.href);
+
+		const tokens: StoredTokens = {
+			accessToken: user?.access_token,
+			idToken: user?.id_token,
+			refreshToken: user?.refresh_token,
+			// oidc-client-ts provides expires_at in seconds since epoch
+			expiresAt: user?.expires_at ? user.expires_at * 1000 : undefined
+		};
+
+		// Persist tokens for initializeTooling to read later
+		try {
+			localStorage.setItem(TOKEN_STORAGE_KEY, JSON.stringify(tokens));
+		} catch (e) {
+			console.warn('[auth/callback] Failed to store tokens', e);
+		}
+
+		// Stash profile in SessionState for immediate use this navigation cycle
+		if (user?.profile) {
+			SessionState.user = user.profile as any;
+			SessionState.loggedIn = true;
+		}
+	} catch (err) {
+		console.error('[auth/callback] signinCallback failed, trying signinRedirectCallback()', err);
+		try {
+			const user = await (userManager as any).signinRedirectCallback?.(window.location.href);
+			const tokens: StoredTokens = {
+				accessToken: user?.access_token,
+				idToken: user?.id_token,
+				refreshToken: (user as any)?.refresh_token,
+				expiresAt: user?.expires_at ? user.expires_at * 1000 : undefined
+			};
+			localStorage.setItem(TOKEN_STORAGE_KEY, JSON.stringify(tokens));
+			if (user?.profile) {
+				SessionState.user = user.profile as any;
+				SessionState.loggedIn = true;
+			}
+		} catch (err2) {
+			console.error('[auth/callback] Redirect callback also failed', err2);
+		}
+	}
+
+	// Navigate back to the home page (or prior route if desired later)
+	throw redirect(302, '/');
+}
+