Everything I have

package-lock.json

@@ -1017,6 +1017,19 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/anymatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/arg": {
 			"version": "5.0.2",
 			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -1817,6 +1830,19 @@
 				"node": ">=8.6"
 			}
 		},
+		"node_modules/micromatch/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/mini-svg-data-uri": {
 			"version": "1.4.4",
 			"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
@@ -2007,13 +2033,15 @@
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "2.3.1",
+			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
 			"dev": true,
 			"license": "MIT",
+			"optional": true,
+			"peer": true,
 			"engines": {
-				"node": ">=8.6"
+				"node": ">=12"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/jonschlinkert"
@@ -2698,6 +2726,19 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/tailwindcss/node_modules/picomatch": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.6"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
 		"node_modules/tailwindcss/node_modules/postcss-selector-parser": {
 			"version": "6.1.2",
 			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "test",
+	"name": "fin-check-front",
 	"version": "0.0.1",
 	"type": "module",
 	"scripts": {

src/hooks.server.ts

@@ -0,0 +1,24 @@
+// import type { Handle, HandleFetch } from "@sveltejs/kit";
+import type { HandleFetch } from "@sveltejs/kit";
+
+// export const handle: Handle = async ({ event, resolve }) => {
+//   console.log("handle Function")
+//   return await resolve(event)
+// }
+
+console.log("in hooks file: 1")
+export const handleFetch: HandleFetch = async ({ request, fetch }) => {
+  console.log(request)
+  console.log("handleFetch triggered for URL:", request.url);
+  console.log("in handleFetch: 2")
+  if (request.url.startsWith("https://api.fin.qowevisa.click/api")) {
+    request = new Request(
+      request.url.replace("https://api.fin.qowevisa.click/api", "http://localhost:3000/api"),
+      request
+    )
+  };
+  console.log(request)
+  console.log("in handleFetch: 3")
+
+  return fetch(request);
+};

src/lib/api.ts

@@ -1,7 +1,7 @@
 // src/lib/api.ts
 
 // Define the base URL of your API
-const BASE_API_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3111/api';
+const BASE_API_URL = import.meta.env.VITE_API_BASE_URL_SERVER || 'http://localhost:3111/api';
 
 // Interface for the login response
 interface LoginResponse {
@@ -20,6 +20,7 @@ interface UserData {
 // Generic function for making API requests
 export async function apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
   const url = `${BASE_API_URL}${endpoint}`;
+  console.log("Fetching ", url)
 
   const defaultHeaders = {
     'Content-Type': 'application/json',
@@ -57,6 +58,7 @@ export async function login(username: string, password: string): Promise<LoginRe
 // Get user data function with type annotation for the response
 export async function getUserData(token: string): Promise<UserData> {
   return apiFetch<UserData>('/user/me', {
+    credentials: 'include',
     headers: { Authorization: `Bearer ${token}` },
   });
 }

src/routes/+layout.svelte

@@ -1,6 +1,23 @@
 <script lang="ts">
 	import '../app.css';
 	let { children } = $props();
+  import { page } from '$app/stores';
+  // import { goto } from '$app/navigation';
+
+  // $effect(()=>{
+  //   if (!isAuthenticated && $page.url.pathname != "/login"){ 
+  //     // goto("/login")
+  //   }
+  // });
 </script>
 
+{#if $page.url.pathname != "/login"}
+  <nav>
+    <a href="/ping">ping</a>
+    <a href="/test">test</a>
+    <a href="/test2">test2</a>
+    <a href="/login">login</a>
+  </nav>
+{/if}
+
 {@render children()}

src/routes/+page.svelte

@@ -1,5 +1,6 @@
-<h1>Welcome to SvelteKit1</h1>
 <p>
-  Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the
+  <a href="/ping">ping</a>
-  documentation123213
+  <a href="/test">test</a>
+  <a href="/test2">test2</a>
+  <a href="/login">login</a>
 </p>

src/routes/api/auth/login/+server.js

@@ -0,0 +1,38 @@
+// src/routes/api/auth/login/+server.ts
+import { json } from '@sveltejs/kit';
+import { login } from '$lib/api';
+
+export async function POST({ request, cookies }) {
+  console.log("in POST1")
+  const authToken = request.headers.get('App-Token');
+  console.log("authToken = ", authToken)
+  console.log("it should be = ", import.meta.env.VITE_AUTH_APP_TOKEN)
+  if (authToken !== import.meta.env.VITE_AUTH_APP_TOKEN) {
+    return json({ error: 'Forbidden' }, { status: 403 });
+  }
+  console.log("in POST2")
+  const { username, password } = await request.json();
+
+  console.log("in POST3")
+  try {
+    console.log("in POST4")
+    const loginResponse = await login(username, password); // Call the backend login
+    console.log("loginResponse = ", loginResponse)
+
+    const session = loginResponse.headers.get("Set-Cookie");
+
+    // Set cookie securely on the server
+    cookies.set('session', loginResponse.token, {
+      httpOnly: true, // Prevents JavaScript access
+      secure: process.env.NODE_ENV === 'production', // Only send over HTTPS in production
+      sameSite: 'Strict', // Ensures the cookie is only sent in a first-party context
+      maxAge: 3600 // Expiry time in seconds (e.g., 1 hour)
+    });
+
+    console.log("in POST5")
+    return json({ id: loginResponse.id, name: loginResponse.name }); // Return necessary data
+  } catch (error) {
+    return json({ error: error.message }, { status: 401 });
+  }
+}
+

src/routes/login/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { login } from "$lib/api";
   import { addSuccessToast } from "$lib/components/store";
   import Toasts from "$lib/components/Toasts.svelte";
   let username = $state("");
@@ -14,8 +13,18 @@
       return;
     }
     try {
-      const resp = await login(username, password);
+      const resp = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "App-Token": import.meta.env.VITE_AUTH_APP_TOKEN,
+        },
+        body: JSON.stringify({ username, password }),
+        credentials: "include", // Important to send cookies with requests
+      });
       addSuccessToast("Login successful!");
+      // setToken(resp.token);
+      // goto("/test");
       console.log(resp);
     } catch (err) {
       if (err instanceof Error) {
@@ -25,8 +34,6 @@
       }
     }
   }
-  $inspect("username = ", username);
-  $inspect("password = ", password);
 </script>
 
 <Toasts />

src/routes/test/+page.svelte

@@ -0,0 +1,47 @@
+<script>
+  import { addSuccessToast } from "$lib/components/store";
+  import Toasts from "$lib/components/Toasts.svelte";
+
+  function testNotification() {
+    console.log("Tested!");
+    addSuccessToast("Test string", false);
+  }
+
+  async function test2() {
+    addSuccessToast("Test string", false);
+    const resp = await fetch("https://api.fin.qowevisa.click/api/ping");
+    // const resp = await fetch("http://localhost:3000/api/ping");
+    if (resp.ok) {
+      console.log(await resp.json());
+    }
+  }
+
+  async function test3() {
+    fetch("http://localhost:3000/api/ping")
+      .then((response) => response.json())
+      .then(console.log)
+      .catch(console.error);
+  }
+</script>
+
+<Toasts />
+<div class="flex justify-center items-center min-h-screen bg-gray-100">
+  <button
+    onclick={testNotification}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me!
+  </button>
+  <button
+    onclick={test2}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me2!
+  </button>
+  <button
+    onclick={test3}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me3!
+  </button>
+</div>

src/routes/test2/+page.server.js

@@ -0,0 +1,9 @@
+export async function load({ fetch }) {
+  const response = await fetch("https://api.fin.qowevisa.click/api/authping", {
+    credentials: "include",
+  });
+
+  return {
+    message: await response.json()
+  };
+}

src/routes/test2/+page.svelte

@@ -0,0 +1,46 @@
+<script>
+  import { addSuccessToast } from "$lib/components/store";
+  import Toasts from "$lib/components/Toasts.svelte";
+  let { data } = $props();
+
+  function testNotification() {
+    console.log("Tested!");
+    addSuccessToast("Test string", false);
+  }
+
+  async function test2() {
+    addSuccessToast("Test string", false);
+    const resp = await fetch("https://api.fin.qowevisa.click/api/ping");
+    // const resp = await fetch("http://localhost:3000/api/ping");
+    if (resp.ok) {
+      console.log(await resp.json());
+    }
+  }
+
+  async function test3() {
+    console.log(data);
+  }
+</script>
+
+<Toasts />
+<p>{data.message.message}</p>
+<div class="flex justify-center items-center min-h-screen bg-gray-100">
+  <button
+    onclick={testNotification}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me!
+  </button>
+  <button
+    onclick={test2}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me2!
+  </button>
+  <button
+    onclick={test3}
+    class="w-1/6 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-300"
+  >
+    Click Me3!
+  </button>
+</div>

vite.config.ts

@@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+  plugins: [sveltekit()],
 });