harry-supabase-sveltekit-auth-helpers-but-updated-deps
v0.6.10
Published
A collection of framework specific Auth utilities for working with Supabase.
Downloads
4
Maintainers
Readme
@supabase/auth-helpers-sveltekit (BETA)
This submodule provides convenience helpers for implementing user authentication in SvelteKit applications.
Installation
Using npm:
npm install @supabase/auth-helpers-sveltekit
# Main component for Svelte based frameworks (optional but recommended)
npm install @supabase/auth-helpers-svelte
Using yarn:
yarn add @supabase/auth-helpers-sveltekit
# Main component for Svelte based frameworks (optional but recommended)
yarn add @supabase/auth-helpers-svelte
This library supports the following tooling versions:
- Node.js:
^16.15.0
Getting Started
Configuration
Set up the fillowing env vars. For local development you can set them in a .env
file. See an example here.
# Find these in your Supabase project settings > API
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
SupabaseClient and SupaAuthHelper component setup
We will start off by creating a db.ts
file inside of our src/lib
directory. Now lets instantiate our supabaseClient
by using our createSupabaseClient
function from the @supabase/auth-helpers-sveltekit
library.
// src/lib/db.ts
import { createSupabaseClient } from '@supabase/auth-helpers-sveltekit';
const { supabaseClient } = createSupabaseClient(
import.meta.env.VITE_SUPABASE_URL as string,
import.meta.env.VITE_SUPABASE_ANON_KEY as string
);
export { supabaseClient };
Edit your __layout.svelte
file and add import the SupaAuthHelper
component, the supabaseClient
we just instantiated and the session
store.
// src/routes/__layout.svelte
<script>
import { session } from '$app/stores';
import { supabaseClient } from '$lib/db';
import { SupaAuthHelper } from '@supabase/auth-helpers-svelte';
</script>
<SupaAuthHelper {supabaseClient} {session}>
<slot />
</SupaAuthHelper>
Hooks setup
Our hooks.ts
file is where the heavy lifting of this library happens, we need to import our function to handle the sign in, signing out and cookie creation phase. we can import all the hooks using handleAuth
function and destructure its returned data.
// src/hooks.ts
import { handleAuth } from '@supabase/auth-helpers-sveltekit';
import type { GetSession, Handle } from '@sveltejs/kit';
import { sequence } from '@sveltejs/kit/hooks';
export const handle: Handle = sequence(...handleAuth());
export const getSession: GetSession = async (event) => {
const { user, accessToken, error } = event.locals;
return {
user,
accessToken,
error
}
}
These will create the handlers under the hood that perform different parts of the authentication flow:
/api/auth/callback
: TheUserHelper
forwards the session details here every timeonAuthStateChange
fires on the client side. This is needed to set up the cookies for your application so that SSR works seamlessly./api/auth/user
: You can fetch user profile information in JSON format./api/auth/logout
: You can logout the user.
Typings
In order to get the most out of TypeScript and its intellisense, you should import our types into the app.d.ts
type definition file that comes with your SvelteKit project.
// src/app.d.ts
/// <reference types="@sveltejs/kit" />
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare namespace App {
interface UserSession {
user: import('@supabase/supabase-js').User;
accessToken?: string;
}
interface Locals extends UserSession {
error: import('@supabase/supabase-js').ApiError;
}
interface Session extends UserSession {}
// interface Platform {}
// interface Stuff {}
}
Signing out
This library has provided a dedicated endpoint for you to use to sign a user out. This endpoint will sign the user out of the Gotrue server, clear the cookies that were set when the user logged in and redirect the user to a configurable path.
The logout handler endpoint is /api/auth/logout
, this will take a GET
request which means it can be used as the href for a normal a
tag in your html.
<a href="/api/auth/logout">Sign out</a>
Logout handler configuration
In your src/hooks.ts
file the logout handler is already setup and you can configure the redirect path from here.
By default the redirect path after logging out will be
/
.
export const handle = sequence(...handleAuth({
logout: { returnTo: '/auth/signin' }
}));
Basic Setup
You can now determine if a user is authenticated on the client-side by checking that the user
object returned by the $session
store is defined.
// example
<script>
import { session } from '$app/stores';
</script>
{#if !$session.user}
<h1>I am not logged in</h1>
{:else}
<h1>Welcome {$session.user.email}</h1>
<p>I am logged in!</p>
{/if}
Client-side data fetching with RLS
For row level security to work properly when fetching data client-side, you need to make sure to import the { supabaseClient }
from @supabase/auth-helpers-sveltekit
and only run your query once the user is defined client-side in the $session
:
<script>
import Auth from 'supabase-ui-svelte';
import { error, isLoading } from '@supabase/auth-helpers-svelte';
import { supabaseClient } from '$lib/db';
import { session } from '$app/stores';
let loadedData = [];
async function loadData() {
const { data } = await supabaseClient.from('test').select('*').single();
loadedData = data
}
$: {
if ($session.user && $session.user.id) {
loadData();
}
}
</script>
{#if !$session.user}
{#if $error}
<p>{$error.message}</p>
{/if}
<h1>{$isLoading ? `Loading...` : `Loaded!`}</h1>
<Auth
supabaseClient={supabaseClient}
providers={['google', 'github']}
/>
{:else}
<a href=="/api/auth/logout">Sign out</a>
<p>user:</p>
<pre>{JSON.stringify($session.user, null, 2)}</pre>
<p>client-side data fetching with RLS</p>
<pre>{JSON.stringify(loadedData, null, 2)}</pre>
{/if}
Server-side data fetching with RLS
For row level security to work in a server environment, you need to inject the request context into the supabase client:
<!-- src/routes/profile.svelte -->
<script>
export let user;
export let data;
</script>
<div>Protected content for {user.email}</div>
<pre>{JSON.stringify(data, null, 2)}</pre>
<pre>{JSON.stringify(user, null, 2)}</pre>
// src/routes/profile.ts
import { supabaseServerClient, withApiAuth } from "@supabase/auth-helpers-sveltekit";
import type { RequestHandler } from "./__types/profile";
interface TestTable {
id: string;
created_at: string;
}
interface GetOutput {
user: User;
data: TestTable[];
}
export const GET: RequestHandler<GetOutput> = async ({ locals }) =>
withApiAuth(
{
redirectTo: "/",
user: locals.user
},
async () => {
const { data } = await supabaseServerClient(session.accessToken)
.from<TestTable>("test")
.select("*");
return {
body: {
user: locals.user,
data
}
};
}
);
Protecting API routes
Wrap an API Route to check that the user has a valid session. If they're not logged in the handler will return a 303 and redirect header.
// src/routes/api/protected-route.ts
import { supabaseServerClient, withApiAuth } from "@supabase/auth-helpers-sveltekit";
import type { RequestHandler } from "./__types/protected-route";
interface TestTable {
id: string;
created_at: string;
}
interface GetOutput {
data: TestTable[];
}
export const GET: RequestHandler<GetOutput> = async ({ locals, request }) =>
withApiAuth({ user: locals.user }, async () => {
// Run queries with RLS on the server
const { data } = await supabaseServerClient(request).from("test").select("*");
return {
status: 200,
body: { data }
};
});
If you visit /api/protected-route
without a valid session cookie, you will get a 303 response.