sveltekit-pocketbase-auth's Introduction

Sveltekit Pocketbase authentication

Implementation of with Sveltekit and Pocketbase authentication with email and Google OAuth.

Popup	Signup	Sign In	Homepage

Sveltekit Installation

Install packages and run.

npm install
npm run dev

Update .env if you are not using the default pocketbase url. PUBLIC_POCKETBASE_URL='http://127.0.0.1:8090'.

Pocketbase Installation & Setup

./pocketbase serve

Google OAuth setup

Get client id and client secret from Google console. Create an OAuth project.

Set uri and Redirect uri.

http://localhost:5173
http://127.0.0.1:8090/api/oauth2-redirect

Copy Client ID and Client Secret.

Set the providers in pocketbase.

Usage

Server side

// +page.server.ts

import type { ITodo } from '$lib/types';
import type { PageServerLoad } from './$types';

export const load = (async ({ locals }) => {
	try {
		const todos = await locals.pb.collection('todos').getList<ITodo>(1, 10);
		// structured clone required cause the data is not serializable by default.
		return { todos: structuredClone(todos) };
	} catch (err) {}
}) satisfies PageServerLoad;

Client side

// +page.svelte

<script lang="ts">
	import { pb } from '$lib/pocketbase';
	import type { ITodo } from '$lib/types';
	async function clientSideFn() {
		console.log(await pb.collection('todos').getList<ITodo>());
	}
</script>

<button on:click={clientSideFn}>Click Me</button>

How it works

src/hooks.server.ts sits bewteen clients and Sveltekit server. It takes cookie from user, and creates an pb instance in Sveltekit.

src/hooks.client.ts does the same and allows usage on client-side/browser.

const pb = new PocketBase(); // new instance
pb.authStore.loadFromCookie(); // loads cookie from user
event.locals.pb = pb; // now sveltekit server can access it