Working nice, still looking kinda shit

src/routes/auth/+layout.svelte

@@ -1,11 +0,0 @@
-<script>
-  let { children } = $props()
-</script>
-
-<header>
-  <nav>
-    <a href="/">Home</a>
-  </nav>
-</header>
-
-{@render children()}

src/routes/auth/+page.svelte

@@ -1,16 +1,2 @@
-<form method="POST" action="?/login">
-  <label>
-    Email
-    <input name="email" type="email" />
-  </label>
-  <label>
-    Password
-    <input name="password" type="password" />
-  </label>
-  <label>
-    Display name
-    <input name="display_name" type="text" />
-  </label>
-  <button>Login</button>
-  <button formaction="?/signup">Sign up</button>
-</form>
+<a href="/auth/login"><button>Login</button></a>
+<a href="/auth/singup"><button>Signup</button></a>

src/routes/auth/login/+page.svelte

@@ -0,0 +1,11 @@
+<form method="POST" action="?/login">
+  <label>
+    Email
+    <input name="email" type="email" />
+  </label>
+  <label>
+    Password
+    <input name="password" type="password" />
+  </label>
+  <button>Login</button>
+</form>

src/routes/auth/signup/+page.server.ts

@@ -0,0 +1,41 @@
+import { redirect } from '@sveltejs/kit'
+
+import type { Actions } from './$types'
+
+export const actions: Actions = {
+  signup: async ({ request, locals: { supabase } }) => {
+    const formData = await request.formData()
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+    const display_name = formData.get('display_name') as string
+
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+      options: {
+        data: {
+          display_name: display_name
+        }
+      }
+    });
+    if (error) {
+      console.error(error)
+      redirect(303, '/auth/error')
+    } else {
+      redirect(303, '/')
+    }
+  },
+  login: async ({ request, locals: { supabase } }) => {
+    const formData = await request.formData()
+    const email = formData.get('email') as string
+    const password = formData.get('password') as string
+
+    const { error } = await supabase.auth.signInWithPassword({ email, password })
+    if (error) {
+      console.error(error)
+      redirect(303, '/auth/error')
+    } else {
+      redirect(303, '/private/home')
+    }
+  },
+}

src/routes/auth/signup/+page.svelte

@@ -0,0 +1,15 @@
+<form method="POST" action="?/login">
+  <label>
+    Email
+    <input name="email" type="email" />
+  </label>
+  <label>
+    Password
+    <input name="password" type="password" />
+  </label>
+  <label>
+    Display name
+    <input name="display_name" type="text" />
+  </label>
+  <button formaction="?/signup">Sign up</button>
+</form>

src/routes/private/home/+page.svelte

@@ -1,6 +1,36 @@
 <script lang="ts">
+import { onMount } from 'svelte';
+import { goto } from '$app/navigation'
+
+let { data } = $props();
+let user_data = $state();
+
+onMount(async () => {
+    const { data: { user } } = await data.supabase.auth.getUser();
+    user_data = user;
+});
+
+async function signOut() {
+    const { error } = await data.supabase.auth.signOut();
+    if (error) {
+        console.error('Sign out error:', error);
+    } else {
+        user_data = null; // Clear user data on sign out
+        await goto('/');
+    }
+};
 
 </script>
 
-
-heyy
+{#if user_data}
+    <div class="user-profile">
+        <h2>Currently logged in</h2>
+        <p><strong>Username:</strong> {user_data.user_metadata.display_name}</p>
+        <p><strong>Email:</strong> {user_data.email}</p>
+    </div>
+    <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600" onclick={signOut}>
+        Sign Out
+    </button>
+{:else}
+    <p>Loading user profile...</p>
+{/if}