Add Auth

package.json

@@ -23,6 +23,7 @@
     "@types/eslint": "^9.6.0",
     "@types/node": "22.7.5",
     "autoprefixer": "10.4.20",
+    "dotenv": "^16.4.5",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
@@ -41,6 +42,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "1.6.11",
+    "@supabase/supabase-js": "^2.45.4",
     "supabase": "^1.204.3"
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@floating-ui/dom':
         specifier: 1.6.11
         version: 1.6.11
+      '@supabase/supabase-js':
+        specifier: ^2.45.4
+        version: 2.45.4
       supabase:
         specifier: ^1.204.3
         version: 1.204.3
@@ -48,6 +51,9 @@ importers:
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20([email protected])
+      dotenv:
+        specifier: ^16.4.5
+        version: 16.4.5
       eslint:
         specifier: ^9.0.0
         version: 9.12.0([email protected])
@@ -550,6 +556,28 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0'
 
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-+wboHfZufAE2Y612OsKeVP4rVOeGZzzMLD/Ac3HrTQkkY4qXNjI6Af9gtmxwccE5nFvTiF114FEbIQ1hRq5uUw==}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==}
+    engines: {node: 4.x || >=6.0.0}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-EOSEZFm5pPuCPGCmLF1VOCS78DfkSz600PBuvBND/IZmMciJ1pmsS3ss6TkB6UkuvTybYiBh7gKOYyxoEO3USA==}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-iZenEdO6Mx9iTR6T7wC7sk6KKsoDPLq8rdu5VRy7+JiT1i8fnqfcOr6mfF2Eaqky9VQzhP8zZKQYjzozB65Rig==}
+
+  '@supabase/[email protected]':
+    resolution: {integrity: sha512-E5p8/zOLaQ3a462MZnmnz03CrduA5ySH9hZyL03Y+QZLIOO4/Gs8Rdy4ZCKDHsN7x0xdanVEWWFN3pJFQr9/hg==}
+
   '@sveltejs/[email protected]':
     resolution: {integrity: sha512-27LR+uKccZ62lgq4N/hvyU2G+hTP9fxWEAfnZcl70HnyfAjMSsGk1z/SjAPXNCD1mVJIE7IFu3TQ8cQ/UH3c0A==}
     peerDependencies:
@@ -610,6 +638,12 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-jML7s2NAzMWc//QSJ1a3prpk78cOPchGvXJsC3C6R6PSMoooztvRVQEz89gmBTBY1SPMaqo5teB4uNHPdetShQ==}
 
+  '@types/[email protected]':
+    resolution: {integrity: sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==}
+
+  '@types/[email protected]':
+    resolution: {integrity: sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==}
+
   '@typescript-eslint/[email protected]':
     resolution: {integrity: sha512-Y1n621OCy4m7/vTXNlCbMVp87zSd7NH0L9cXD8aIpOaNlzeWxIK4+Q19A68gSmTNRZn92UjocVUWDthGxtqHFg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -874,6 +908,10 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  [email protected]:
+    resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==}
+    engines: {node: '>=12'}
+
   [email protected]:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -1636,6 +1674,9 @@ packages:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
 
+  [email protected]:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+
   [email protected]:
     resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==}
     engines: {node: '>=16'}
@@ -1734,6 +1775,12 @@ packages:
     resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
     engines: {node: '>= 8'}
 
+  [email protected]:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+
+  [email protected]:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+
   [email protected]:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}
@@ -1755,6 +1802,18 @@ packages:
     resolution: {integrity: sha512-GmqrO8WJ1NuzJ2DrziEI2o57jKAVIQNf8a18W3nCYU3H7PNWqCCVTeH6/NQE93CIllIgQS98rrmVkYgTX9fFJQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
+  [email protected]:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
     engines: {node: '>=18'}
@@ -2103,6 +2162,48 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.13
 
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/[email protected]':
+    dependencies:
+      whatwg-url: 5.0.0
+
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+      '@types/phoenix': 1.6.5
+      '@types/ws': 8.5.12
+      ws: 8.18.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/node-fetch': 2.6.15
+
+  '@supabase/[email protected]':
+    dependencies:
+      '@supabase/auth-js': 2.65.0
+      '@supabase/functions-js': 2.4.1
+      '@supabase/node-fetch': 2.6.15
+      '@supabase/postgrest-js': 1.16.1
+      '@supabase/realtime-js': 2.10.2
+      '@supabase/storage-js': 2.7.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@sveltejs/[email protected](@sveltejs/[email protected](@sveltejs/[email protected]([email protected])([email protected](@types/[email protected])))([email protected])([email protected](@types/[email protected])))':
     dependencies:
       '@sveltejs/kit': 2.7.0(@sveltejs/[email protected]([email protected])([email protected](@types/[email protected])))([email protected])([email protected](@types/[email protected]))
@@ -2187,6 +2288,12 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
+  '@types/[email protected]': {}
+
+  '@types/[email protected]':
+    dependencies:
+      '@types/node': 22.7.5
+
   '@typescript-eslint/[email protected](@typescript-eslint/[email protected]([email protected]([email protected]))([email protected]))([email protected]([email protected]))([email protected])':
     dependencies:
       '@eslint-community/regexpp': 4.11.1
@@ -2456,6 +2563,8 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -3269,6 +3378,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]([email protected]):
     dependencies:
       typescript: 5.6.3
@@ -3342,6 +3453,13 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
+  [email protected]:
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+
   [email protected]:
     dependencies:
       isexe: 2.0.0
@@ -3365,6 +3483,8 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}

src/components/Header.svelte

@@ -1,4 +1,24 @@
 <script>
+	import { supabase } from '../supabaseClient';
+	import { goto } from '$app/navigation';
+
+	let username = '';
+
+	export async function logout() {
+		await supabase.auth.signOut();
+
+		goto('/');
+	}
+
+	async function getUser() {
+		const {
+			data: { user }
+		} = await supabase.auth.getUser();
+
+		username = user?.email || '';
+	}
+
+	getUser();
 </script>
 
 <header class="bg-zinc-800 text-white mb-20 p-4 flex items-center justify-between shadow-2xl">
@@ -8,10 +28,15 @@
 			<h1 class="text-white text-xl font-bold">Levyraati <span class="revived">Revived</span></h1>
 		</a>
 	</div>
+
+	{#if username === ''}
 		<a href="/login">Kirjaudu</a>
+	{:else}
+		<a href="/" on:click={logout}>Hei {username}, Kirjaudu Ulos</a>
+	{/if}
 </header>
 
-<style>
+<style lang="postcss">
 	@import url('https://fonts.cdnfonts.com/css/albero');
 
 	.revived {

src/lib/auth.ts

@@ -0,0 +1,5 @@
+import { supabase } from "../supabaseClient"
+
+export async function logout() {
+    await supabase.auth.signOut()
+}

src/routes/login/+page.svelte

@@ -1,14 +1,50 @@
-<div
+<script>
+	import { supabase } from '../../supabaseClient';
+	import { goto } from '$app/navigation';
+
+	let email = '';
+	let password = '';
+
+	const handleLogin = async () => {
+		const { data, error } = await supabase.auth.signInWithPassword({
+			email: email,
+			password: password
+		});
+
+		if (error) {
+			alert(error.message);
+		} else {
+			goto('/members');
+		}
+	};
+</script>
+
+<form
 	class="flex flex-col gap-10 justify-center items-center bg-zinc-700 mx-auto max-w-sm p-10 rounded-3xl shadow-2xl variant-glass"
+	on:submit|preventDefault={handleLogin}
 >
 	<h1 class="h2">Kirjaudu</h1>
 	<div class="w-full flex flex-col gap-4">
 		<label for="username" class="label">Käyttäjätunnus</label>
-		<input class="input" type="text" id="username" placeholder="Käyttäjätunnus" />
+		<input
+			class="input"
+			type="text"
+			id="username"
+			placeholder="Käyttäjätunnus"
+			bind:value={email}
+		/>
 	</div>
 	<div class="w-full flex flex-col gap-4">
 		<label for="password">Salasana</label>
-		<input class="input" type="password" id="password" placeholder="Salasana" />
+		<input
-	</div>
+			class="input"
-	<button type="button" class="btn variant-filled-surface">Kirjaudu</button>
+			type="password"
+			id="password"
+			placeholder="Salasana"
+			bind:value={password}
+		/>
 	</div>
+	<button on:submit|preventDefault={handleLogin} type="submit" class="btn variant-filled-surface"
+		>Kirjaudu</button
+	>
+</form>

src/routes/members/+page.svelte

@@ -1 +1 @@
-<div></div>
+<div><h1>Members</h1></div>

src/supabaseClient.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)