Let user singin and log out

app/pages/app/index.vue

@@ -10,11 +10,37 @@
  * @todo [ ] Integration test.
  * @todo [✔] Update the typescript.
  */
+import { signOut, useSession } from '~~/lib/auth-client';
+const router = useRouter();
+
+const HandleSingOut =async () => {
+     await signOut();
+     router.push('/login');
+ }
+
+
+ const { data: session,isPending,error } =await  useSession(useFetch);
 </script>
 
 <template>
     <div>
-        Dashboard page
+        <button class="px-5 py-3 border border-slate-400 rounded-lg" @click="HandleSingOut">
+            Logout
+        </button>
+
+
+        <section>
+            Pending: {{ isPending }}
+        </section>
+        <section>
+            Error: {{ error }}
+        </section>
+        <section>
+            User: 
+            <code>{{ session?.user }}</code>
+
+        </section>
+
     </div>
 </template>
 <style scoped></style>

app/pages/login.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { signIn } from '~~/lib/auth-client';
 /**
  *
  * Login view
@@ -10,11 +11,58 @@
  * @todo [ ] Integration test.
  * @todo [✔] Update the typescript.
  */
+
+const loginForm = ref({
+    email: '',
+    password: '',
+});
+ 
+const loginFormSchema = [
+    {
+        $el: 'h1',
+        children: 'Login',
+        attrs: {
+            class: 'text-2xl font-bold mb-4',
+        },
+    },
+    {
+        $formkit: 'text',
+        name: 'email',
+        label: 'Email',
+        help: 'This will be used for your account.',
+        validation: 'required|email',
+    },
+    {
+        $formkit: 'password',
+        name: 'password',
+        label: 'Password',
+        help: 'Enter your new password.',
+        validation: 'required|length:5,16',
+    }
+]
+
+
+const HandleLoginUser = async () => {
+    await signIn.email({
+        email: loginForm.value.email,
+        password: loginForm.value.password,
+        callbackURL: '/app/',
+        fetchOptions: {
+            onError: (err) => console.log(err)
+        }
+    })
+}
 </script>
 
 <template>
-    <div>
-        Login form here
+    <div class='grid place-content-center min-h-screen'>
+        <section class='max-w-2xl'>
+            <FormKit id="login-form" type="form" :actions="false" @submit="HandleLoginUser"
+                v-slot="{ state: { valid } }" v-model="loginForm">
+                <FormKitSchema :schema="loginFormSchema" />
+                <FormKit type="submit" label="Login" :disabled="!valid" />
+            </FormKit>
+        </section>
     </div>
 </template>
 <style scoped></style>

app/pages/register.vue

@@ -69,7 +69,6 @@ const registerForm = computed(() => ([
 
 
 const HandleRegisterUser = async () => {
-    console.log(userInformation.value);
 
     await signUp.email({
         email: userInformation.value.email,