Add authentication
User store
In Vue, you can use the reactive API to share data between components. We'll create a store to share the user's data between components.
Create a new file src/lib/stores/user.js and add the following code to it.
import { ID } from "appwrite";
import { account } from "../appwrite";
import { reactive } from "vue";
export const user = reactive({
current: null,
async init() {
try {
this.current = await account.get();
} catch (e) {
this.current = null;
}
},
async register(email, password) {
await account.create(ID.unique(), email, password);
await this.login(email, password);
},
async login(email, password) {
await account.createEmailPasswordSession(email, password);
window.location.href = "/"; // Redirect to home page
},
async logout() {
await account.deleteSession("current");
this.current = null;
},
});
Now, we can import the user store in any component and use it to login, logout, or register a user. However, we'll need to call the init method to initialize the user's data.
Basic routing
First, import the user store in src/App.vue and call the init method when the component is mounted.
Update src/App.vue to the following code.
<script setup>
import { onMounted } from "vue";
import { user } from "./stores/user.js";
onMounted(() => {
user.init();
});
</script>
<template>
<div>
<main>Home page</main>
</div>
</template>
You can use the Vue Router to handle routing in your app. However, we'll keep it simple for now. Optionally render a Login component if the path is /login, otherwise render the Home component.
Update src/App.vue to the following code.
<script setup>
import { onMounted } from "vue";
import Home from "./pages/Home.vue";
import Login from "./pages/Login.vue";
import { user } from "./stores/user.js";
const isLoginPage = window.location.pathname === "/login";
onMounted(() => {
user.init();
});
</script>
<template>
<div>
<main>
<Login v-if="isLoginPage" />
<Home v-else />
</main>
</div>
</template>
Home page
Create a new file src/pages/Home.vue and add the following stub code to it.
<template>
<!-- We'll complete this component later -->
<h1>Home page</h1>
</template>
Login page
Finally, we are able to create the login page. Users will be able to login or register from this page, so we'll need to add two buttons.
Create a new file src/pages/Login.vue and add the following code to it.
<script setup>
import { user } from "../stores/user";
import { ref } from "vue";
const email = ref("");
const password = ref("");
</script>
<template>
<section>
<h1>Login or register</h1>
<form>
<input type="email" placeholder="Email" v-model="email" />
<input type="password" placeholder="Password" v-model="password" />
<div>
<button type="button" @click="user.login(email, password)">
Login
</button>
<button type="button" @click="user.register(email, password)">
Register
</button>
</div>
</form>
</section>
</template>