replace cookies with local store

src/lib/stores/auth.ts

@@ -0,0 +1,11 @@
+import { writable } from "svelte/store";
+
+export const accessToken = writable(localStorage.getItem("access_token") || null);
+
+accessToken.subscribe((value) => {
+    if (value) {
+        localStorage.setItem("access_token", value);
+    } else {
+        localStorage.removeItem("access_token");
+    }
+});

src/routes/Vote.svelte

@@ -40,10 +40,12 @@
 
         try {
             const url = "/api/fetchScenes";
+            const token = localStorage.getItem("access_token");
             const response = await fetch(url, {
                 method: "GET",
                 headers: {
                     "Cache-Control": "no-cache",
+                    Authorization: `Bearer ${token}`,
                 },
             });
             const result = await response.json();
@@ -102,6 +104,12 @@
         voteOverlayA.classList.add("show");
         voteOverlayB.classList.add("show");
 
+        const token = localStorage.getItem("access_token");
+        if (!token) {
+            window.location.href = "/api/authorize";
+            return;
+        }
+
         const payload = {
             input: data.input,
             better: option == "A" ? data.model1 : data.model2,
@@ -117,6 +125,7 @@
                 headers: {
                     "Cache-Control": "no-cache",
                     "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
                 },
                 body: JSON.stringify(payload),
             });

src/routes/api/exchange-code/+server.ts

@@ -0,0 +1,42 @@
+import type { RequestHandler } from "@sveltejs/kit";
+
+export const GET: RequestHandler = async ({ url }) => {
+    const code = url.searchParams.get("code");
+    if (!code) {
+        return new Response(JSON.stringify({ error: "Code not provided" }), { status: 400 });
+    }
+    const clientId = import.meta.env.VITE_CLIENT_ID;
+    const clientSecret = import.meta.env.VITE_CLIENT_SECRET;
+    const redirectUri = import.meta.env.VITE_REDIRECT_URI;
+    const tokenUrl = "https://huggingface.co/oauth/token";
+    const body = new URLSearchParams({
+        client_id: clientId,
+        client_secret: clientSecret,
+        redirect_uri: redirectUri,
+        code: code,
+        grant_type: "authorization_code",
+    });
+
+    try {
+        const response = await fetch(tokenUrl, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body,
+        });
+
+        if (!response.ok) {
+            return new Response(JSON.stringify({ error: "Token exchange failed" }), { status: response.status });
+        }
+        const data = await response.json();
+        const accessToken = data.access_token;
+
+        return new Response(JSON.stringify({ access_token: accessToken }), {
+            status: 200,
+            headers: { "Content-Type": "application/json" },
+        });
+    } catch (error) {
+        return new Response(JSON.stringify({ error: "Token exchange failed" }), { status: 500 });
+    }
+};

src/routes/api/fetchScenes/+server.ts

@@ -1,12 +1,11 @@
 import { RequestHandler } from "@sveltejs/kit";
 
 export const GET: RequestHandler = async ({ request }) => {
-    const cookies = request.headers.get("cookie");
-    const accessToken = cookies
-        ?.split(";")
-        .map((cookie) => cookie.trim())
-        .find((cookie) => cookie.startsWith("access_token="))
-        ?.split("=")[1];
+    const authHeader = request.headers.get("authorization");
+    let accessToken = null;
+    if (authHeader && authHeader.startsWith("Bearer ")) {
+        accessToken = authHeader.substring("Bearer ".length);
+    }
 
     const url = `https://dylanebert-3d-arena-backend.hf.space/pair?access_token=${accessToken}`;
     // const url = `http://localhost:8000/pair?access_token=${access_token}`;

src/routes/api/oauth-redirect/+server.ts

@@ -1,34 +0,0 @@
-import { RequestHandler } from "@sveltejs/kit";
-
-export const GET: RequestHandler = async ({ request }) => {
-    const requestUrl = new URL(request.url);
-    const code = requestUrl.searchParams.get("code") as string;
-
-    const clientId = import.meta.env.VITE_CLIENT_ID;
-    const clientSecret = import.meta.env.VITE_CLIENT_SECRET;
-    const redirectUri = import.meta.env.VITE_REDIRECT_URI;
-    const url = "https://huggingface.co/oauth/token";
-    const body = new URLSearchParams({
-        client_id: clientId,
-        client_secret: clientSecret,
-        redirect_uri: redirectUri,
-        code: code,
-        grant_type: "authorization_code",
-    });
-    const response = await fetch(url, {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-        },
-        body: body,
-    });
-
-    const data = await response.json();
-    const accessToken = data.access_token;
-
-    const headers = new Headers();
-    headers.append("Set-Cookie", `access_token=${accessToken}; Path=/; SameSite=None; Secure`);
-    headers.append("Location", "/");
-
-    return new Response(null, { status: 302, headers: headers });
-};

src/routes/api/vote/+server.ts

@@ -1,17 +1,13 @@
 import type { RequestHandler } from "@sveltejs/kit";
 
 export const POST: RequestHandler = async ({ request }) => {
-    const cookies = request.headers.get("cookie");
-    const accessToken = cookies
-        ?.split(";")
-        .map((cookie) => cookie.trim())
-        .find((cookie) => cookie.startsWith("access_token="))
-        ?.split("=")[1];
-
-    if (!accessToken) {
+    const authHeader = request.headers.get("authorization");
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
         return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401 });
     }
 
+    const accessToken = authHeader.substring("Bearer ".length);
+
     const payload = await request.json();
     payload.access_token = accessToken;
 

src/routes/oauth-redirect/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { goto } from "$app/navigation";
+
+    onMount(async () => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get("code");
+        if (!code) {
+            goto("/");
+            return;
+        }
+        try {
+            const res = await fetch(`/api/exchange-code?code=${code}`);
+            if (!res.ok) {
+                console.error("Failed to exchange code for token");
+                goto("/");
+                return;
+            }
+            const data = await res.json();
+            const token = data.access_token;
+            if (token) {
+                localStorage.setItem("access_token", token);
+                goto("/");
+            } else {
+                console.error("No access token in response");
+                goto("/");
+            }
+        } catch (error) {
+            console.error("Error during token exchange", error);
+            goto("/");
+        }
+    });
+</script>
+
+<p>Authenticating… please wait.</p>