Supabase recently introduced @supabase/ssr package instead of auth-helpers. Supabase generally recommends using the new @supabase/ssr package which takes the core concepts of the Auth Helpers package and makes them available to any server framework. The Supabase Auth Helpers will be probably deprecated later on.
This tutorial walks you through the process how to use @supabase/ssr package with Sveltekit. The implementation is very easy and smooth.
Create SvelteKit project
Create the SvelteKit app and name it for example "my-sk-app-with-sb-ssr-auth".
npm create svelte@latest my-sk-app-with-sb-ssr-auth
cd my-sk-app-with-sb-ssr-auth
npm install
Now install relevant Supabase packages:
npm install @supabase/ssr @supabase/supabase-js
Create Supabase project
If you do now have your Supabase project create the new one. Just follow the instructions on " to your app website address in all Supabase email templates when you host your app eventually.
<h2>Confirm your signup</h2>
<p>Follow this link to confirm your user:</p>
<p>
<a href="http://localhost:5173/auth/confirm?token_hash={{ .TokenHash }}&type=email"
>Confirm your email</a
>
</p>
Check Email Route
Create check_email route with simple +page.svelte file.
// src/routes/check_email/+page.svelte
<p>Check your email to confirm.</p>
Route with Login and Logout Logic
Create login_logout route which will enable user to login as well as have action for logging out.
// src/routes/login_logout/+page.svelte
<script>
import { enhance } from '$app/forms';
export let form;
</script>
<h2>Log in</h2>
<form action="?/login" method="POST" use:enhance>
<label for="email">email</label>
<input name="email" type="email" value={form?.email ?? ''} required/>
<label for="password">password</label>
<input name="password" required/>
<button type="submit">Login</button>
</form>
{#if form?.invalid}<mark>{form?.message}!</mark>{/if}
<p>Forgot your password? <a href="/reset_password">Reset password</a></p>
The respective +page.server.js file contains action for login and logout.
// src/routes/login_logout/+page.server.js
import { fail, redirect } from "@sveltejs/kit"
import { AuthApiError } from '@supabase/supabase-js'
export const actions = {
login: async (event) => {
const { request, url, locals } = event
const formData = await request.formData()
const email = formData.get('email')
const password = formData.get('password')
const { data, error: err } = await locals.supabase.auth.signInWithPassword({
email: email,
password: password,
})
if (err) {
if (err instanceof AuthApiError && err.status === 400) {
return fail(400, {
error: "Invalid credentials", email: email, invalid: true, message: err.message
})
}
return fail(500, {
message: "Server error. Try again later.",
})
}
throw redirect(303, "/")
},
logout: async ({locals}) => {
await locals.supabase.auth.signOut()
throw redirect(303, "/")
}
}
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is already logged in return him to the home page
if (session) {
throw redirect(303, '/');
}
}
Reset Password
Make route for password reset called reset_password, Once again one +page.svelte file and one +page.server.js file.
// src/routes/reset_password/+page.svelte
<script>
import { enhance } from '$app/forms';
</script>
<h2>Where should we send you a link for password reset?</h2>
<form action="?/reset_password" method="POST" use:enhance>
<label for="email">email</label>
<input type="email" name="email" placeholder="[email protected]" required />
<button type="submit">Get password</button>
</form>
// src/routes/reset_password/+page.server.js
import { fail, redirect } from "@sveltejs/kit"
import { AuthApiError } from "@supabase/supabase-js"
export const actions = {
reset_password: async ({ request, locals }) => {
const formData = await request.formData()
const email = formData.get('email')
const { data, error: err } = await locals.supabase.auth.resetPasswordForEmail(
email,
{redirectTo: '/update_password'}
)
if (err) {
if (err instanceof AuthApiError && err.status === 400) {
return fail(400, {
error: "invalidCredentials", email: email, invalid: true, message: err.message
})
}
return fail(500, {
error: "Server error. Please try again later.",
})
}
throw redirect(303, "/check_email")
},
}
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is already logged in return him to the home page
if (session) {
throw redirect(303, '/');
}
}
The Supabase email template for Reset password looks like this.
<h2>Reset Password</h2>
<p>Follow this link to reset the password for your user:</p>
<p>
<a
href="http://localhost:5173/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/update_password"
>Reset Password</a
>
</p>
Resetting password needs also the route to insert new password.
// src/routes/update_password/+page.svelte
<script>
import { enhance } from '$app/forms';
export let form
</script>
<h2>Change your password</h2>
{#if form?.invalid}<mark>{form?.message}!</mark>{/if}
<form action="?/update_password" method="POST" use:enhance>
<label for="new_password"> New password </label>
<input name="new_password" required/>
<label for="password_confirm">Confirm new password</label>
<input name="password_confirm" required/>
<button>Update password</button>
</form>
// src/routes/update_password/+page.server.js
import { AuthApiError } from "@supabase/supabase-js"
import { fail, redirect } from "@sveltejs/kit"
export const actions = {
update_password: async ({ request, locals }) => {
const formData = await request.formData()
const password = formData.get('new_password')
const { data, error: err } = await locals.supabase.auth.updateUser({
password
})
if (err) {
if (err instanceof AuthApiError && err.status >= 400 && err.status < 500) {
return fail(400, {
error: "invalidCredentials", invalid: true, message: err.message
})
}
return fail(500, {
error: "Server error. Please try again later.",
})
}
throw redirect(303, "/user_profile")
},
}
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is not logged in redirect back to the home page
if (!session) {
throw redirect(303, '/');
}
}
Update Email Route
User may wish to update her/his emial so here is the update_email route to do this. Remeber the confirmaton from both email (the old as well as the new one) have to be provided.
// src/routes/update_email/+page.svelte
<script>
import { enhance } from '$app/forms';
</script>
<h2>Change your email</h2>
<form action="?/update_email" method="POST" use:enhance>
<label for="email"> new email </label>
<input type="email" name="email" required />
<button>Change email</button>
</form>
// src/routes/update_email/+page.server.js
import { AuthApiError } from "@supabase/supabase-js"
import { fail, redirect } from "@sveltejs/kit"
export const actions = {
update_email: async ({ request, locals }) => {
const formData = await request.formData()
const email = formData.get('email')
const { data, error: err } = await locals.supabase.auth.updateUser({
email
})
if (err) {
if (err instanceof AuthApiError && err.status >= 400 && err.status < 500) {
return fail(400, {
error: "invalidCredentials", invalid: true, message: err.message
})
}
return fail(500, {
error: "Server error. Please try again later.",
})
}
throw redirect(303, "/check_email")
},
}
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is not logged in redirect back to the home page
if (!session) {
throw redirect(303, '/');
}
}
And the Supabase email template for Change Email Address looks like this
<h2>Confirm Change of Email</h2>
<p>Follow this link to confirm the update of your email from {{ .Email }} to {{ .NewEmail }}:</p>
<p>
<a href="http://localhost:5173/auth/confirm?token_hash={{ .TokenHash }}&type=email_change">
Change Email
</a>
</p>
User Profile Route
We are still missing user profile route where user can manage the account. Let create user_profile route and respetive files.
// src/routes/user_profile/+page.svelte
<script>
export let data
</script>
<h2>User profile</h2>
{data.session.user.email}
<p><a href="/update_email">Change your email</a></p>
<p><a href="/update_password">Change password</a></p>
<p><a href="/delete_user">Delete my account</a></p>
The page should be accesible only to logged in user I guess.
// src/routes/user_profile/+page.server.js
import { redirect } from "@sveltejs/kit"
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is not logged in redirect back to the home page
if (!session) {
throw redirect(303, '/');
}
}
Delete User Account Route
The opinions may differ wheter we should enable user to delete her/his account. But as this may seem trkicky in Supabase here is the way. So make delete_user route.
// src/routes/delete_user/+page.svelte
<script>
import { enhance } from '$app/forms';
export let data
</script>
<h2>Delete your user account</h2>
<form action="?/delete_user" method="POST" use:enhance>
<input type="hidden" name="storageKey" value={data.supabase.storageKey} />
<button type="submit">Delete my user account</button>
</form>
Supbase uses special auth client created with secrete service role key to delete user. If you do not want to deal with this mighty key here is a trick.
In Supabase dashboard go to SQL Editor and paste in and run this function.
CREATE or replace function delete_user()
returns void
LANGUAGE SQL SECURITY DEFINER
AS $$
--delete from public.profiles where id = auth.uid();
delete from auth.users where id = auth.uid();
$$;
Now you can use this Supabase database delete_user() function from client like this. It is also important to delete user cookie, which name can be found in data.supabase.storageKey. We have sent its name from client throut a hidden input hereabove. Because of this cookie deletion application kick you out from all pages where session is requested.
// src/routes/delete_user/+page.server.js
import { redirect } from "@sveltejs/kit"
export const actions = {
delete_user: async ({ locals, request, cookies }) => {
const formData = await request.formData()
const storageKey = formData.get('storageKey')
await locals.supabase.rpc('delete_user');
cookies.delete(storageKey);
throw redirect(303, "/")
}
}
export async function load({locals: { getSession } }) {
const session = await getSession();
// if the user is not logged in redirect back to the home page
if (!session) {
throw redirect(303, '/');
}
}
Project Structure Overview
Here goes project structure printscreen.
Thank You for Reading
So this is it. Feel free to commnet if something does not work for you. I hope to post something soon, been busy this year with a SvelteKit project but now it is nearly done so more time for blogging.
SOCIAL SHARE CARD GENERATOR