Supabase + Sveltekit Authentication

README.md

Supabase and Sveltekit Authentication

Supabase + Sveltekit needs a second library for authentication

• read these docs

npm i @supabase/auth-helpers-sveltekit -D

• create hooks.server.js and hooks.client.js in /src

---

Supabase Authentication Basics

Note: you will need to set the URL Configuration in Supabase (authentication tab) to point to your actual site (localhost needs to be changed to http://localhost:5173)

Access users in SQL

1. Supabase Users: select * from auth.users
   • this can be used to get the values that a user will enter on the frontend
2. Directus Users: select * from directus_users
   • this is useful for accessing the directus admins

Sign Up

• Done by using built in supabase.auth method and await syntax.
• This can be in any js file. Use the +page.server.js file in Sveltekit

// make sure to import your env variables
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
// use the supabase method auth.signUp
let { user, error } = await supabase.auth.signUp({
  email: "[email protected]",
  password: "scoobysnacks",
});

• TIP: the [email protected] suffix is useful for testing user creation without actually needing to make a new email

Sveltekit Form Tutorial

• set form method in the form element +page.svelte
• set the actions in the server route +page.server.js
  • this is where the supabase code above goes

---

User Auth Keys

• test by adding a user key gained from a magic_url with the anon key

---

Form Data and Sveltekit

form data needs to be handled by an action in sveltekit

let formData = await request.formData()
const email = formData.get('email')
const password = formData.get('password')