Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the pages directory called account.vue and add the following code:
Vue
<!-- pages/account.vue -->
<script setup>
const { context } = useEvent();
const { user } = context;
</script>
<template>
<ul>
<li>
<strong>Email:</strong> {{ user.email }}
</li>
<li>
<strong>Name:</strong> {{ user.name }}
</li>
<li>
<strong>ID: </strong> {{ user.$id }}
</li>
</ul>
<form method="post" action="/api/signout">
<button type="submit">Log out</button>
</form>
</template>
This page will display the user's email, name, and ID. It also contains a form that will log the user out when submitted. The form will send a POST request to the /api/signout endpoint. We need to create this endpoint in the server. Create a new file in the server/routes/api directory called signout.post.js and add the following code:
// server/routes/api/signout.post.js
import { SESSION_COOKIE, createSessionClient } from "~/server/lib/appwrite";
export default defineEventHandler(async (event) => {
const { account } = createSessionClient(event);
await account.deleteSession("current");
deleteCookie(event, SESSION_COOKIE);
await sendRedirect(event, "/signup");
});