From 869be67c546c2222323e7f6d035b16bfc75f3fa8 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Sat, 6 Apr 2024 21:46:04 +0100
Subject: [PATCH] feat(#9): Add sign in and sign out

---
 src/lib/components/SignIn.svelte  | 30 +++++++++++++++++++++
 src/lib/components/SignOut.svelte | 20 ++++++++++++++
 src/routes/+page.svelte           | 44 +++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+)
 create mode 100644 src/lib/components/SignIn.svelte
 create mode 100644 src/lib/components/SignOut.svelte

diff --git a/src/lib/components/SignIn.svelte b/src/lib/components/SignIn.svelte
new file mode 100644
index 0000000..d1e2d86
--- /dev/null
+++ b/src/lib/components/SignIn.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function emitSignedInEvent() {
+		dispatch('signedIn', {});
+	}
+
+	let email = '';
+	let password = '';
+
+	// Access the supabase client from the layout data
+	export let supabase: any;
+
+	async function signInWithEmail() {
+		// TODO use the data and error from the response
+		const { data, error } = await supabase.auth
+			.signInWithPassword({
+				email: email,
+				password: password
+			})
+			.then(() => {
+				emitSignedInEvent();
+			});
+	}
+</script>
+
+<input type="email" bind:value={email} placeholder="Email" />
+<input type="password" bind:value={password} placeholder="Password" />
+<button on:click={signInWithEmail}>Sign In</button>
diff --git a/src/lib/components/SignOut.svelte b/src/lib/components/SignOut.svelte
new file mode 100644
index 0000000..a4cc2bf
--- /dev/null
+++ b/src/lib/components/SignOut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	function emitSignedOutEvent() {
+		dispatch('signedOut', {});
+	}
+
+	// Access the supabase client from the layout data
+	export let supabase: any;
+
+	async function signOut() {
+		// TODO use the error from the response
+		const { error } = await supabase.auth.signOut().then(() => {
+			emitSignedOutEvent();
+		});
+	}
+</script>
+
+<button on:click={signOut}>Sign Out</button>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 34fcbc6..0e3b845 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,9 +1,53 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import SignUp from '$lib/components/SignUp.svelte';
+	import SignIn from '$lib/components/SignIn.svelte';
+	import SignOut from '$lib/components/SignOut.svelte';
 
 	export let data;
 	let { supabase } = data;
 	$: ({ supabase } = data);
+
+	let userEmail = null as string | null | undefined;
+
+	onMount(async () => {
+		await setUserEmail();
+	});
+
+	async function getUser() {
+		const {
+			data: { session }
+		} = await supabase.auth.getSession();
+
+		if (session) {
+			console.log(session.user);
+			return session.user;
+		}
+
+		return null;
+	}
+
+	async function getUserEmail() {
+		const user = await getUser();
+
+		if (user) {
+			return user.email;
+		}
+
+		return null;
+	}
+
+	async function setUserEmail() {
+		userEmail = await getUserEmail();
+	}
 </script>
 
+{#if userEmail}
+	<span>Welcome back {userEmail}</span>
+	<br />
+{/if}
 <SignUp {supabase} />
+<br />
+<SignIn {supabase} on:signedIn={setUserEmail} />
+<br />
+<SignOut {supabase} on:signedOut={setUserEmail} />