Basic account and session system

Provide a basic account system with login and server side session store
identified by a cookie.  Upon successful login a signed session cookie
is set by the server with the session stored on the server identifying
which account it is logged in as.  The client uses a shared useFetch on
the session endpoint to identify if it's logged in and which account it
is logged in as, and refreshes this when loggin in or out.
This commit is contained in:
Hornwitser 2025-03-07 12:41:57 +01:00
parent abdcc83eb9
commit 150cb82f5c
11 changed files with 276 additions and 4 deletions

33
pages/login.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<main>
<h1>Log In</h1>
<form @submit.prevent="logIn">
<input v-model="name" type="text" placeholder="Name" required>
<button type="submit">Log In</button>
</form>
<pre><code>{{ result }}</code></pre>
<pre><code>Session: {{ session }}</code></pre>
</main>
</template>
<script lang="ts" setup>
const { data: session, refresh: sessionRefresh } = useAccountSession();
const name = ref("");
const result = ref("")
async function logIn() {
try {
const res = await $fetch.raw("/api/auth/login", {
method: "POST",
body: { name: name.value },
});
result.value = `Server replied: ${res.status} ${res.statusText}`;
await sessionRefresh();
} catch (err: any) {
console.log(err);
console.log(err.data);
result.value = `Server replied: ${err.statusCode} ${err.statusMessage}`;
}
}
</script>