Supabase Auth with SvelteKit (issue in hooks.server.ts/js code)

[uncapped1599]

Improve documentation

Supabase Auth with SvelteKit

Link

https://supabase.com/docs/guides/auth/auth-helpers/sveltekit?language=ts Add a link to the page which needs improvement (if relevant)

Describe the problem

To both create a supabase client in sveltekit and protect your routes, you need to update the hooks.server.ts/js file at the root of your project. However, the current documentation suggests updating the same file with two exported functions (See client and protect links)

You cannot export two functions in hooks.server.ts/js you must use a sequence helper function.

This is going to confuse people trying to implement the auth in sveltekit (it confused me at first).

Describe the improvement

Your final step in protecting multiple routes should suggest editing the client creation function and protecting routes function to be fed into a sequence helper function.

Here is a suggested edit to the example code in that final step:

async function supabase ({ event, resolve }) => {
  event.locals.supabase = createSupabaseServerClient({
    supabaseUrl: PUBLIC_SUPABASE_URL,
    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
    event,
  })

  /**
   * a little helper that is written for convenience so that instead
   * of calling `const { data: { session } } = await supabase.auth.getSession()`
   * you just call this `await getSession()`
   */
  event.locals.getSession = async () => {
    const {
      data: { session },
    } = await event.locals.supabase.auth.getSession()
    return session
  }

  return resolve(event, {
    filterSerializedResponseHeaders(name) {
      return name === 'content-range'
    },
  })
}

async function authorization ({ event, resolve }) => {
  // protect requests to all routes that start with /protected-routes
  if (event.url.pathname.startsWith('/protected-routes')) {
    const session = await event.locals.getSession()
    if (!session) {
      // the user is not signed in
      throw redirect(303, '/')
    }
  }

  // protect POST requests to all routes that start with /protected-posts
  if (event.url.pathname.startsWith('/protected-posts') && event.request.method === 'POST') {
    const session = await event.locals.getSession()
    if (!session) {
      // the user is not signed in
      throw error(303, '/')
    }
  }

  return resolve(event)
}

export const handle = sequence(supabase, authorization);

Additional context

This will now work as you intend and allow users to follow through the whole tutorial and get a working authentication with supabase alongside also protecting routes.

[silentworks]

I don't think this needs to change as this is not a tutorial, its a guide on how you can do various things. This would be down to the developer to have a better understanding of SvelteKit in order to know they should use a sequence to have both.

[j13n]

@silentworks, disagree. Better examples are better.

@uncapped1599, you can make a PR for the docs by editing the following: https://github.com/supabase/supabase/blob/master/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx

I'll do it if you want.

[uncapped1599]

Hi @silentworks , thanks for getting back to me. You can't really protect routes without a session so I believe this fits better in the page. The rest of this link works well to cover everything you would need, step-by-step for Supabase and Sveltekit.

@j13n - sure happy to. Have made a pull request on the doc. I would just double check the typescript, I am never great without intellisense while editing in browser.

[j4w8n]

I don't disagree with your goal, but I do with the tactics.

1. Don't use sequence. It unnecessarily complicates the example.
2. Don't include multiple examples that overlap functionality.

[uncapped1599]

Also a fair point, perhaps the last section should then suggest users can use this to protect multiple routes and direct them towards the sequence helper function docs at Sveltekit.

[silentworks]

PR got merged so closing this one out.