@svuick/supabase NPM

@svuick/supabase

Install

Install with npm

npm i @svuick/supabase

Install with pnpm

pnpm i @svuick/supabase

Install with yarn

yarn add @svuick/supabase

Setup

This plugins depends on @svuick/cookie.

src/hooks.ts

import { register } from '@svuick/core/hooks';
import cookie from '@svuick/cookie/hooks';
import supabase from '@svuick/supabase/hooks';

register(cookie);
register(supabase, {
	supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
	supabaseKey: import.meta.env.VITE_SUPABASE_KEY,
	apiPath: '/api/supabase'
});

export { handle, getSession } from '@svuick/core/hooks';

src/routes/__layout.svelte

<script context="module">
	import { register, load, Svuick } from '@svuick/core/app';
	import supabase from '@svuick/supabase/app';

	register(supabase, {
	    supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
		supabaseKey: import.meta.env.VITE_SUPABASE_KEY,
		apiPath: '/api/supabase'
	});

	export { load };
</script>

<Svuick />

The plugin creates a supabase instance scoped to the user in the stuff object and provides the current user and accesstoken in the session. When initialized, the client will automatically sync the session with the server.

Usage

src/routes/index.svelte

<script context="module">
	export const load: Svuick.Load = async ({ stuff, session }) => {
		const { data: profile } = await stuff.supabase
			.from('profile')
			.select()
			.match({ userId: session.user.id })
			.single();

		return {
			props: {
				profile
			}
		};
	};
</script>

<script context="module">
	export let profile;
</script>

import { supabase } from '@svuick/supabase';

// make sure to import from /hooks in api request handlers
// this supabase instance is NOT scoped to the user
import { supabase } from '@svuick/supabase/hooks';