Server-side authentication with Nuxt

6

Create account page

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");
});