Solid Start Auth Helpers

[SaileshBechar]

Can auth helpers be created for Solid Start?

I am new to SSR and Solid Start and it almost seems impossible to get going without any of the helper libraries.

Also, if anyone has resources that show how Solid Start can be integrated with Supabase, it would be greatly appreciated. Sadly, the docs seem scattered and inconsistent regarding SSR.

[ZanzyTHEbar]

I second this - seems there should be a SolidStart example in the supabase-ssr docs.

[LucaPizzagalli]

Hey @SaileshBechar I'm looking for exactly the same, solid start server side rendering and integration with supabase.

Did you manage to find some nice starters / guides?

[michaelvangelovski]

I managed to get this working this evening. Hope this helps you.

client.ts

import { createBrowserClient } from '@supabase/ssr'

export const supabase = createBrowserClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY
)

server.ts

"use server"
import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
import { getRequestEvent } from 'solid-js/web'

export function createClient() {
  console.log
  return createServerClient(
    import.meta.env.VITE_SUPABASE_URL,
    import.meta.env.VITE_SUPABASE_ANON_KEY,
    {
      cookies: {
        getAll() {
          return parseCookieHeader(getRequestEvent()?.request.headers.get('Cookie') ?? '')
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            getRequestEvent()?.response.headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
          )
        },
      },
    }
  )
}

auth.ts

"use server"
import { createClient } from '~/utils/supabase/server'

export async function login(email: string, password: string) { 
  const supabase = createClient()
  const { error } = await supabase.auth.signInWithPassword({email, password})

  if (error) {
    return ({error: "Invalid login credentials"})
  }

  return ({message: "Login success"})
}

export async function logout() {
  const supabase = createClient()
  await supabase.auth.signOut();
}

[caseybaggz]

This saved me so much time. Thank you for sharing 🙌

[Sananes]

Hey, thanks for this, really helped!

I have a question, has anyone run into the issue where logging out or signing in works, but if you manually refresh the page it won't recognise your signed in until you refresh yet again?

I've also tried setting up middleware.ts as follows:

import { createMiddleware } from "@solidjs/start/middleware"

import { createClient } from "~/libs/supabase/server"

export default createMiddleware({
  onRequest: async (event) => {
    try {
      const supabase = await createClient()
      const {
        data: { session },
        error,
      } = await supabase.auth.getSession()
      const requestUrl = new URL(event.request.url)
      const isAuthRoute = requestUrl.pathname.startsWith("/auth")

      // If there's an error or no session
      if (error || !session || !session.access_token) {
        if (!isAuthRoute) {
          return Response.redirect(`${requestUrl.origin}/auth/signin`)
        }
        return undefined
      }

      // Check session expiration
      if (new Date(session.expires_at! * 1000) <= new Date()) {
        if (!isAuthRoute) {
          await supabase.auth.signOut()
          return Response.redirect(`${requestUrl.origin}/auth/signin`)
        }
        return undefined
      }

      if (isAuthRoute) {
        return Response.redirect(`${requestUrl.origin}/dashboard`)
      }

      return undefined
    } catch (error) {
      console.error("Middleware error:", error)
      const requestUrl = new URL(event.request.url)
      return Response.redirect(`${requestUrl.origin}/auth/signin`)
    }
  },
})

Any help will be appreciated!