Aaron K SaundersIn today's web development landscape, creating an efficient and secure backend is a crucial component of building a successful web application. Fortunately, there are open source solutions that can simplify this process. One such solution is PocketBase, a backend with an embedded SQLite database, built-in authentication management, and a REST-ish API.
In this blog post, we'll explore how to use PocketBase with Vue.js to create a single-page application that implements login and account creation functionality, as well as how to listen for changes in the authentication state.
Whether you're a seasoned developer or just getting started, checkout the video to learn how to leverage PocketBase to streamline your web development process and build something amazing
Whats Covered In The Video
- Set up Tailwind with Vue and Vite for styling your application.
- Implement login and account creation functionality to authenticate users.
- Review basic functionality of PocketBase Admin Website
- Listen for changes in the authentication state to display appropriate content.
Full Source Code From Video
<template>
<div class="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div v-if="currentUser">
<h1>Welcome {{ currentUser?.name }}</h1>
<div>
<button type="button" @click="doLogout"
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Logout</button>
</div>
</div>
<div v-else>
<h1>{{ loginMode ? "LOGIN" : "CREATE ACCOUNT" }}</h1>
<div class="sm:col-span-2 sm:col-start-1 mt-4">
<label for="username" class="block text-sm font-medium leading-6 text-gray-900">Email Address</label>
<div class="mt-2">
<input v-model="username" type="text" name="username" id="username" autocomplete="none"
placeholder="Enter Email Address "
class=" px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-2 sm:col-start-1 mt-2">
<label for="password" class="block text-sm font-medium leading-6 text-gray-900">Password</label>
<div class="mt-2">
<input v-model="password" type="password" name="password" id="password" autocomplete="none"
placeholder="Enter Password "
class=" px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div v-if="loginMode">
<div class="sm:col-span-2 sm:col-start-1 mt-2">
<button type="button" @click="doLogin"
class="mr-3 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Login</button>
<button type="button" @click="loginMode = false"
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create
Account</button>
</div>
</div>
<div v-else>
<div class="sm:col-span-2 sm:col-start-1 mt-2">
<label for="fullName" class="block text-sm font-medium leading-6 text-gray-900">Full Name</label>
<div class="mt-2">
<input v-model="fullName" type="text" name="fullName" id="fullName" autocomplete="none"
placeholder="Enter Full Name "
class=" px-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
<div class="sm:col-span-2 sm:col-start-1 mt-2">
<button type="button" @click="doCreateAccount"
class="mr-3 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save
New User</button>
<button type="button" @click="loginMode = true"
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import PocketBase from 'pocketbase';
let pb = null;
const currentUser = ref();
const username = ref("");
const password = ref("");
const fullName = ref("");
const loginMode = ref(true);
onMounted(async () => {
pb = new PocketBase('http://127.0.0.1:8090');
pb.authStore.onChange(() => {
currentUser.value = pb.authStore.model
}, true)
});
const doLogout = () => {
pb.authStore.clear();
currentUser.value = null;
}
const doLogin = async () => {
try {
const authData = await pb.collection('users')
.authWithPassword(username.value, password.value);
// after the above you can also access the auth data from the authStore
console.log(pb.authStore.isValid);
console.log(pb.authStore.token);
console.log(pb.authStore.model);
// currentUser.value = pb.authStore.model
} catch (error) {
alert(error.message)
}
}
const doCreateAccount = async () => {
try {
const data = {
"username": `user_${self.crypto.randomUUID().split("-")[0]}`,
"email": username.value,
"emailVisibility": true,
"password": password.value,
"passwordConfirm": password.value,
"name": fullName.value
};
const record = await pb.collection('users').create(data);
await doLogin();
} catch (error) {
alert(error.message)
}
}
</script>
<style scoped>
</style>
