DEV Community

Supabase SSR Auth with SvelteKit

kvetoslavnovak on December 01, 2023

EDIT: Having discussion with Supabase concerning best parctices. My actual recomended way can be followd here The SvelteKit SSR Documentation Examp...

Read full post

Maksymilian Kozlowski • Dec 2 '23

Awesome article, thank you!

Have you tried doing OAuth? Any chance you could add this to the article too?

kvetoslavnovak • Dec 2 '23

Thank you for your interest.
I definitely plan to look into OAuth as well.

uwork • Dec 3 '23

Something I noticed when duplicating a logged-in session on 2 browser tabs. If I log out on the second tab and click around on the first tab, the behavior is 'interesting'.

I observed the cookie is cleared so the user session is gone as expected in both tabs
On the first tab: If I refresh the page from the profile page or one of its sub-pages, it redirects back to the home page and updates the nav bar properly as expected.
On the first tab: if I am on the profile page and click a sub-page (eg: change password) the body of the page is updated (redirected to home) but the nav bar is not updated and still shows the 'Logout' button. Any idea what's causing this difference in behavior?

Comment deleted

uwork • Dec 3 '23

I am still seeing the same behavior on the browser (logout button is still visible). I added a console.log on onMount and noticed it doesn't get printed when following this sequence of actions.

Not sure if related, I am using TS, and the IDE warns me on the line onMount(async () => {
that:
Svelte: Argument of type () => Promise<() => void> is not assignable to parameter of type () => (() => any) | Promise<never>

Comment deleted

uwork • Dec 3 '23

Thank you for your efforts. I'll take a look!

Comment deleted

uwork • Dec 8 '23 • Edited

Hey, this video explains this problem well and suggests a solution:
Hope it helps anyone else as well!

To reload the layout view after clicking on a navigation item do this:

<a href="/sub-page" class:text-muted-foreground={$page.url.pathname !== '/sub-page'}>your sub page</a>

This appends a CSS class if the URL does not match the path name.

kvetoslavnovak • Feb 11

I have updated the tutorial. Now everything works correctly and in sync. The point was to properly implement invalidation listeninng to supabase.auth.onAuthStateChange.

Please test the app and let me know if it works for you as well.

Kennedy • Feb 20

Thanks again for the article. I am still not all the way there though. Everything works as expected in development but when I try to deploy on vercel, I get the error:

RollupError: "PUBLIC_SUPABASE_URL" is not exported by "virtual:$env/static/public", imported by "src/routes/+layout.ts".

kvetoslavnovak • Feb 21

Hi, thank you for yout thank you.
Concernig Vercel did you set up all your environment varaibles in Vercel? vercel.com/docs/projects/environme...

Asahel • Apr 21

Great article! I'm new with sveltekit, Is there a form to avoid duplicate load function for session validation?

kvetoslavnovak • Apr 22

Hi, thank you.
I am not sure which duplicate load function do you mean? Could you be more specific, please?

Asahel • Apr 22 • Edited

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) {
        redirect(303, '/');
    }
  }

Each +page.server.js is checking if user is already looged in. Is there a way to check it in the +layout.server.js?

kvetoslavnovak • Apr 22 • Edited

I would not recommend using +layout.server.js for auth checking. See more details in this discussion
github.com/sveltejs/kit/issues/6315 or this video https://www.youtube.com/watch?v=UbhhJWV3bmI&ab_channel=Huntabyte

Conrening protected routes and redirects in one place you may follow this advice https://www.youtube.com/watch?v=K1Tya6ovVOI&ab_channel=Huntabyte and move the logic to src/hooks.server.js

Alejandro • May 1

Thank you for this post kvetoslanovak!

Works perfectly! 😁😍

uwork • Dec 3 '23

Awesome article, you have helped me so much as I am new to the JS world. Please do an OAuth one with Supabase+SK as well! Thanks!!

kvetoslavnovak • Dec 3 '23

Glad to hear you did like the tutorial.

Jaco • Dec 12 '23

Thanks for the great article!
Pls share the ./utils/addUserprofileToUser.js file

kvetoslavnovak • Dec 12 '23 • Edited

Thank you, I am sharing this function in a second edit in the bottom of the article.

Kennedy • Feb 14

Thanks for the tutorial. What would the app.d.ts file look like for those of us in love with typescript?

kvetoslavnovak • Feb 14 • Edited

I am just discussing the update of the official documentaton with Supanase. This documentaton uses TS and can be found here: supabase.com/docs/guides/auth/serv...

In previous documentation for Supabase Auth Helpers there is src/app.d.ts supabase.com/docs/guides/auth/auth...

// src/app.d.ts

import { SupabaseClient, Session } from '@supabase/supabase-js'
import { Database } from './DatabaseDefinitions'

declare global {
  namespace App {
    interface Locals {
      supabase: SupabaseClient<Database>
      getSession(): Promise<Session | null>
    }
    interface PageData {
      session: Session | null
    }
    // interface Error {}
    // interface Platform {}
  }
}

dylanb-101 • Dec 12 '23

just started a new project and decide to use these two; great article!

but I was wondering what the addUserprofileToUser function did?

kvetoslavnovak • Dec 12 '23

Thank you, I have added the explanaton as a second edit in the bottom of the article.