Add Auth

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>
-	<a href="/login">Kirjaudu</a>
+
+	{#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
+			class="input"
+			type="password"
+			id="password"
+			placeholder="Salasana"
+			bind:value={password}
+		/>
 	</div>
-	<button type="button" class="btn variant-filled-surface">Kirjaudu</button>
-</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)