Authentication

Make sure you have completed the Supabase setup before continuing with the section

Authentication in sveltepack

Out of the box, sveltepack has traditional email/password authentication for users

A logged in user can log out by clicking the avatar on the top right, then clicking sign out in the dropdown menu. The authentication state is available globally through the app and a logout button can be created anywhere through following snippet:

{#if $userTokenStore}
    <button on:click={() => supabase.auth.signOut()}>Sign Out</button>
{/if}

The $userTokenStore will hold the auth state and you can use it to dynamically display a sign out button on your app.

Don’t forget to import the store from your $lib

Setup

Navigate to Supabase and head to your project’s dashboard.

Configure Site URL

Go to Authentication, then click URL Configuration, change your site url. For testing you can use localhost if you wish.

Adjust Email Template

Still under Authentication, click Email Templates. Go to the Reset Password template and enter the following:

<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p><a href="{{ .ConfirmationURL }}update-password">Reset Password</a></p>

You may wish to change the styling but ensure that the your reset link points to {{ .ConfirmationURL }}update-password as shown above

Usage

The /reset-password route hosts a form for users reset their own password.

The resetPasswordHandler function handles requests in the following ways:

A toast will be trigger and if account is found a magic link will be sent to the user’s email. Clicking the link will log in the user and they can update their password.

Supabase has rate limits for emails and it is recommended that you send emails through your own provider

Protecting Routes

In an effort to preserve simplicity, client side authentication is used. As a result, route protection will occur on the client side and should be paired with RLS policies to prevent sensitive data from getting into the wrong hands.

With that, there is a handy route protection function in your $lib called protectedRoute. It can be imported to any page or layout using the following line:

import { protectedRoute } from '$lib';

And you can use it by wrapping it in an onMount function within your page or layout.

onMount(async () => {
    protectedRoute()
})

The function will redirect unauthenticated users to the login page.

Data fetching may still occur before user is redirected, so be sure to use RLS on your tables. The Database section will cover this in more detail.

Third-Party Authentication Providers

Supabase offers several authentication methods and providers. An in depth guide for each one can be found here.

Features

Components

Extra

Authentication in sveltepack

Setup

Usage

Protecting Routes

Third-Party Authentication Providers

Features

Components

Extra

​Authentication in sveltepack

Setup

Usage

​Protecting Routes

​Third-Party Authentication Providers

Authentication in sveltepack

Protecting Routes

Third-Party Authentication Providers