Setup Supabase Auth with React Router 7

[angelod1as]

I don't even know where to start from.

I'm moving a NextJS app to React Router 7 and I'm blocked at authentication — especifically, Supabase Auth.

I've read this but I'm looking for a server-side alternative, like something shown here.

The issue is: even though Supabase has some docs on building it with Remix, I can't make it work with RR7.

I've tried using the NextJS config but had no success — RR7 doesn't do Middlewares yet.

I've even tried to build it using auth-helpers-remix and then migrate, but zero success.

I've read a few repos: this, this, this, this, even this one (kinda confusing btw).

Is doing an AuthContext like in here the only solution?

Why does this doesn't write any cookies apparently (because when navigating, it reads zero cookies):

import {
  createServerClient,
  parseCookieHeader,
  serializeCookieHeader,
} from "@supabase/ssr"
import type { Database } from "~types/database.types"
import type { DBClient } from "~types/utils.types"

const { VITE_SUPABASE_URL = "", VITE_SUPABASE_ANON_KEY = "" } = import.meta.env

export function createClient(request: Request): {
  supabase: DBClient
  headers: Headers
} {
  const headers = new Headers()

  const supabase = createServerClient<Database>(
    VITE_SUPABASE_URL,
    VITE_SUPABASE_ANON_KEY,
    {
      cookies: {
        getAll() {
          return parseCookieHeader(request.headers.get("Cookie") ?? "") as {
            name: string
            value: string
          }[]
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            headers.append(
              "Set-Cookie",
              serializeCookieHeader(name, value, options),
            ),
          )
        },
      },
    },
  )

  return { supabase, headers }
}

Well, that's all. I'm confused and spent my whole day doing this — and as I'm doing it alone I don't have anyone to ask for help. Maybe you all can at least point in the right direction.

Here's the very WIP repo.