- Supabase Login

Issue: #725

package.json

@@ -55,6 +55,7 @@
     "@nanostores/react": "^0.7.1",
     "@react-three/fiber": "^8.13.6",
     "@supabase/supabase-js": "^2.32.0",
+    "@sveltejs/kit": "^1.22.5",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.4",
     "@tailwindcss/line-clamp": "^0.4.4",

src/components/API/storage.ts

@@ -7,13 +7,26 @@ export const email$: WritableAtom<string> = atom("");
 export const khash$: WritableAtom<number> = atom(0);
 //?         [DATA]->[UX]
 export const error$: WritableAtom<string> = atom("");
+export const notification$: WritableAtom<string> = atom("");
+export const fetchProfile$: WritableAtom<string> = atom("");
 //?         [DATA]=>[DX]
 export const log$: WritableAtom<string> = atom("");
 
-
 export const log = async( log : string) => {
     task(async() => {
         log$.set(log);
         console.log(`[LOG] ${log$.get()}`);
     })
-}
+}
+
+export const __getProfile = async () => {
+	task(async () => {
+        log("Starting Cache -> Profile");
+    });
+};
+
+export const notification = async( error: string) => {
+    task(async() => {
+        notification$.set(error);
+    })    
+}

src/components/API/supabase.ts

@@ -5,6 +5,7 @@ import { persistentAtom } from "@nanostores/persistent";
 import * as Storage from "./storage";
 
 //TODO      [ENV-MIGRATION]
+//TODO		[SESSION-MANAGEMENT]
 //TODO      [PERSISTENT-ATOM]
 //TODO      [POLICY-ABSTRACT]
 
@@ -22,47 +23,33 @@ export const supabase = createClient(
 );
 
 supabase.auth.getSession().then(({ data: { session } }) => {
-	if (session) {
-		isUser.set(session);
-	} else {
-		isUser.set(undefined);
-	}
+	session ? isUser.set(session) : isUser.set(undefined);
+});
+
+supabase.auth.onAuthStateChange((_event, session) => {
+	session ? isUser.set(session) : isUser.set(undefined);
 });
 
 isUser.subscribe(async (session) => {
-	if (session?.user?.id) {
-		supabase_user$.set(await supabase_account());
-	}
+	session?.user?.id
+		? supabase_user$.set(await supabase_account())
+		: supabase_user$.set(undefined);
 });
 
 export const supabase_account = async () => {
-	return supabase.auth.getSession().then(({ data: { session } }) => {
-		if (session) {
-			isUser.set(session);
-			return session.user;
-		} else {
-			isUser.set(undefined);
-			return undefined;
-		}
-	});
+	try {
+		return (await supabase.auth.getSession()).data.session?.user
+	} catch (error) {
+		return undefined;
+	}
 };
 
 export const getProfile = async ({ cache = true }: { cache: boolean }) => {
-	if (cache) {
-		__getProfile();
-	} else {
-		_getProfile();
-	}
+	cache ? Storage.__getProfile() : _getProfile();
 };
 
 export const _getProfile = async () => {
 	task(async () => {
-		Storage.log(" Starting Supabase -> Profile Table")
-
-
+		Storage.log(" Starting Supabase -> Profile Table");
 	});
 };
-
-export const __getProfile = async () => {
-	task(async () => {});
-};

src/components/Supabase/Login.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { supabase } from '@c/API/supabase';
+	
+	import { log, notification$, notification } from '@c/API/storage';
+
+	let loading = false;
+	let email = '';
+	let password = '';
+
+	const dismiss = async () => {
+		notification('');
+	};
+
+	const handleLogin = async () => {
+		try {
+			loading = true;
+			const { data, error } = await supabase.auth.signInWithPassword({
+				email,
+				password,
+			});
+			if (error) { throw error } else { 
+				location.assign('/account/profile');
+			};
+		} catch (error) {
+			if (error instanceof Error) {
+				log(error.message);
+				notification(error.message);
+			}
+		} finally {
+			loading = false;
+			
+		}
+	};
+</script>
+
+<div class="flex flex-wrap">
+	<div class="w-full px-3">
+		<div
+			class="relative flex flex-col min-w-0 break-words bg-offset shadow-soft-xl rounded-2xl bg-clip-border">
+			<div class="flex-auto">
+				<div class="flex flex-wrap">
+					<div class="rounded-lg shadow w-full">
+						<div class="w-full max-w-full px-3">
+							<div
+								class="border-black/12.5 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-offset bg-clip-border p-2">
+								<div
+									class="relative h-full overflow-hidden bg-cover rounded-xl"
+									style="background-image: url('https://images.unsplash.com/photo-1530406472580-81dc39c4babe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80')">
+									<span
+										class="absolute top-0 left-0 w-full h-full bg-center bg-cover bg-gradient-to-tl from-gray-900 to-slate-800 opacity-80" />
+									<div class="relative z-10 flex flex-col flex-auto h-full p-4">
+										<section class="">
+											<div
+												class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+												<a href="/#" class="flex items-center mb-6">
+													<img
+														class="w-32 mr-2"
+														src="https://kbve.com/assets/img/letter_logo.svg"
+														alt="logo" />
+												</a>
+												<div
+													class="w-full bg-transparent rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0">
+													<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
+														{#if $notification$}
+															<h1>
+																<div
+																	id="toast-default"
+																	class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
+																	role="alert">
+																	<div
+																		class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
+																		<svg
+																			class="w-4 h-4"
+																			aria-hidden="true"
+																			xmlns="http://www.w3.org/2000/svg"
+																			fill="none"
+																			viewBox="0 0 18 20">
+																			<path
+																				stroke="currentColor"
+																				stroke-linecap="round"
+																				stroke-linejoin="round"
+																				stroke-width="2"
+																				d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z" />
+																		</svg>
+																		<span class="sr-only">Fire icon</span>
+																	</div>
+																	<div class="ml-3 text-sm font-normal">
+																		{$notification$}
+																	</div>
+																	<button
+																		type="button"
+																		class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
+																		data-dismiss-target="#toast-default"
+																		aria-label="Close"
+																		on:click={dismiss}>
+																		<span class="sr-only">Close</span>
+																		<svg
+																			class="w-3 h-3"
+																			aria-hidden="true"
+																			xmlns="http://www.w3.org/2000/svg"
+																			fill="none"
+																			viewBox="0 0 14 14">
+																			<path
+																				stroke="currentColor"
+																				stroke-linecap="round"
+																				stroke-linejoin="round"
+																				stroke-width="2"
+																				d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+																		</svg>
+																	</button>
+																</div>
+															</h1>
+														{:else}
+															<h1
+																class="text-xl font-bold leading-tight tracking-tight gradient-text md:text-2xl">
+																Sign in to your account!
+															</h1>
+														{/if}
+														<form
+															class="space-y-4 md:space-y-6"
+															action="#"
+															on:submit|preventDefault={handleLogin}>
+															<div>
+																<label
+																	for="email"
+																	class="block mb-2 text-sm font-medium"
+																	>Your email</label>
+																<input
+																	type="email"
+																	name="email"
+																	id="email"
+																	class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+																	placeholder="[email protected]"
+																	required
+																	bind:value={email} />
+															</div>
+															<div>
+																<label
+																	for="password"
+																	class="block mb-2 text-sm font-medium"
+																	>Password</label>
+																<input
+																	type="password"
+																	name="password"
+																	id="password"
+																	placeholder="••••••••"
+																	class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+																	required
+																	bind:value={password} />
+															</div>
+															<div class="flex items-center justify-between">
+																<div class="flex items-start" />
+																<a
+																	href="/account/recovery"
+																	class="text-sm font-medium text-secondary hover:underline dark:text-primary-500"
+																	>Forgot password?</a>
+															</div>
+															<button
+																type="submit"
+																class="w-full bg-secondary hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+																disabled={loading}
+																><span>{loading ? 'Loading' : 'Login'}</span
+																></button>
+															<p
+																class="text-sm font-light text-gray-500 dark:text-gray-400">
+																Don’t have an account yet? <a
+																	href="/account/register"
+																	class="font-medium text-primary-600 hover:underline dark:text-primary-500"
+																	>Sign up</a>
+															</p>
+														</form>
+													</div>
+												</div>
+											</div>
+										</section>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>