add oauth

Dockerfile

@@ -6,6 +6,12 @@ RUN npm install
 
 RUN --mount=type=secret,id=VITE_HF_TOKEN,mode=0444,required=true \
     echo "VITE_HF_TOKEN=$(cat /run/secrets/VITE_HF_TOKEN)" > /app/.env
+RUN --mount=type=secret,id=VITE_CLIENT_ID,mode=0444,required=true \
+    echo "VITE_CLIENT_ID=$(cat /run/secrets/VITE_CLIENT_ID)" >> /app/.env
+RUN --mount=type=secret,id=VITE_CLIENT_SECRET,mode=0444,required=true \
+    echo "VITE_CLIENT_SECRET=$(cat /run/secrets/VITE_CLIENT_SECRET)" >> /app/.env
+RUN --mount=type=secret,id=VITE_REDIRECT_URI,mode=0444,required=true \
+    echo "VITE_REDIRECT_URI=$(cat /run/secrets/VITE_REDIRECT_URI)" >> /app/.env
 
 COPY / /app
 RUN npm run build

src/routes/Vote.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { onMount, onDestroy } from "svelte";
-    import { v4 as uuidv4 } from "uuid";
     import type { IViewer } from "./viewers/IViewer";
     import { createViewer } from "./viewers/ViewerFactory";
     import { Cube, WatsonHealth3DPrintMesh } from "carbon-icons-svelte";
@@ -35,27 +34,15 @@
     let errorMessage: string = "";
     let data: Data;
 
-    function getUsername() {
-        let storedUsername = sessionStorage.getItem("username");
-        if (!storedUsername) {
-            storedUsername = uuidv4();
-            sessionStorage.setItem("username", storedUsername);
-        }
-        return storedUsername;
-    }
-
     async function fetchScenes() {
         statusMessage = "Loading...";
         errorMessage = "";
 
         try {
-            const username = getUsername();
-            console.log(`Fetching with username: ${username}`);
             const url = "/api/fetchScenes";
             const response = await fetch(url, {
                 method: "GET",
                 headers: {
-                    username: username,
                     "Cache-Control": "no-cache",
                 },
             });
@@ -99,6 +86,7 @@
             window.addEventListener("resize", handleResize);
             handleResize();
         } catch (error) {
+            console.log(error);
             errorMessage = "Failed to load scenes.";
         }
 
@@ -112,7 +100,6 @@
         voteOverlayB.classList.add("show");
 
         const payload = {
-            username: getUsername(),
             input: data.input,
             better: option == "A" ? data.model1 : data.model2,
             worse: option == "A" ? data.model2 : data.model1,
@@ -144,7 +131,13 @@
                     loadScenes();
                 }, remainingTime);
             } else {
-                errorMessage = "Failed to process vote.";
+                if (response.status === 401) {
+                    statusMessage = "Unauthorized. Redirecting to login...";
+                    await new Promise((resolve) => setTimeout(resolve, 1000));
+                    window.location.href = "/api/authorize";
+                } else {
+                    errorMessage = "Failed to process vote.";
+                }
             }
         } catch (error) {
             errorMessage = "Failed to process vote.";

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

@@ -0,0 +1,17 @@
+import { redirect } from "@sveltejs/kit";
+
+export const GET = async () => {
+    const clientId = import.meta.env.VITE_CLIENT_ID;
+    const redirectUri = import.meta.env.VITE_REDIRECT_URI;
+    const url = "https://huggingface.co/oauth/authorize";
+    const body = new URLSearchParams({
+        client_id: clientId,
+        redirect_uri: redirectUri,
+        response_type: "code",
+        scope: "openid",
+        prompt: "consent",
+        state: "12345",
+    });
+
+    throw redirect(302, `${url}?${body}`);
+};

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

@@ -1,8 +1,15 @@
-import type { RequestHandler } from "@sveltejs/kit";
+import { RequestHandler } from "@sveltejs/kit";
 
 export const GET: RequestHandler = async ({ request }) => {
-    const username = request.headers.get("username");
-    const url = `https://dylanebert-3d-arena-backend.hf.space/pair?username=${username}`;
+    const cookies = request.headers.get("cookie");
+    const accessToken = cookies
+        ?.split(";")
+        .map((cookie) => cookie.trim())
+        .find((cookie) => cookie.startsWith("access_token="))
+        ?.split("=")[1];
+
+    const url = `https://dylanebert-3d-arena-backend.hf.space/pair?access_token=${accessToken}`;
+    // const url = `http://localhost:8000/pair?access_token=${access_token}`;
 
     try {
         const response = await fetch(url, {

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

@@ -1,6 +1,4 @@
-import type { RequestHandler } from "@sveltejs/kit";
-
-export const GET: RequestHandler = async ({ request }) => {
+export const GET = async () => {
     const url = `https://dylanebert-3d-arena-backend.hf.space/leaderboard`;
 
     try {

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

@@ -0,0 +1,34 @@
+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,8 +1,20 @@
 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) {
+        return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401 });
+    }
+
     const payload = await request.json();
     const url = `https://dylanebert-3d-arena-backend.hf.space/vote`;
+    // const url = `http://localhost:8000/vote`;
 
     try {
         const response = await fetch(url, {