nomadics9/spock

Spock - Svelte + Pocketbase

My boilerplate for

1.  Sveltekit + Pocketbase DB
2.  Tailwindcss
3.  SkeletonUI

Auth Ready

Snippet from login.svelete component - populating name and avatar from Google provider

<script lang="ts">
	import { currentUser, pb } from '$lib/pocketbase';

	async function login() {
		try {
			const authData = await pb.collection('users').authWithOAuth2({ provider: 'google' });
			const meta = authData.meta;
            console.log(meta)

			if (meta?.isNew) {
				const formData = new FormData();

				const response = await fetch(meta.avatarUrl);

				if (response.ok) {
					const file = await response.blob();
					formData.append('avatar', file);
				}

				formData.append('name', meta.name);

				await pb.collection('users').update(authData.record.id, formData);
			}
		} catch (err) {
			console.error(err);
		}
	}

	function signOut() {
		pb.authStore.clear();
	}
</script>

currentUser as a store to use example $currentUser.avatar

import { env } from '$env/dynamic/public';
import PocketBase from 'pocketbase';
import { writable } from 'svelte/store';

export const pb = new PocketBase(env.PUBLIC_DB_URL);

export const currentUser = writable(pb.authStore.model);

pb.authStore.onChange((auth) => {
	//console.log('auth changed ', auth)
	currentUser.set(pb.authStore.model);
});

use .env for pocketbase URL

PUBLIC_DB_URL=http://localhost:8090

Usage:

1. run DB in same dir

pocketbase serve

2. dev mode

BUN 🐰

bun install && bun dev

NPM 🪟

npm run install && npm run dev