Theo's Typesafe Cult•6mo ago

Adding Supabase to TRPC context

I am using Supabase for auth and db in a create t3 app project and I was curious if this would be the correct way to get the user session data into the trcp context. I modified the createTRCPContext method to this... server/api/trpc.ts

import { cookies } from 'next/headers'
import { createRouteHandlerClient  } from "@supabase/auth-helpers-nextjs"
import type * as schema from "../db/schema";

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const cookieStore = cookies()

  const supabase = createRouteHandlerClient<typeof schema>({
    cookies: () => cookieStore,
  })

  const session = await supabase.auth.getSession()

  return {
    db,
    session,
    ...opts,
  };
};

import { cookies } from 'next/headers'
import { createRouteHandlerClient  } from "@supabase/auth-helpers-nextjs"
import type * as schema from "../db/schema";

export const createTRPCContext = async (opts: { headers: Headers }) => {
  const cookieStore = cookies()

  const supabase = createRouteHandlerClient<typeof schema>({
    cookies: () => cookieStore,
  })

  const session = await supabase.auth.getSession()

  return {
    db,
    session,
    ...opts,
  };
};

or alternatively is it actually possible to just create a supabaseServerClient / createRouteHandlerClient within the TRCP procedures themselves whenever I need access to the session data?

8 Replies

Benja•6mo ago

https://github.com/supabase-community/create-t3-turbo This might help you. Got it working some hours ago with a Supabase project

GitHub

GitHub - supabase-community/create-t3-turbo: Clean and simple start...

Clean and simple starter repo using the T3 Stack along with Expo React Native and Supabase - GitHub - supabase-community/create-t3-turbo: Clean and simple starter repo using the T3 Stack along with...

Tribe•6mo ago

Ill check it out thanks

Trader Launchpad•6mo ago

I an windering if you can assist me @Benja
I am trying to get this working but am having an issue. I think i finally got the supabase pooler connection string working, and got rid of the error:

'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try `createClient()` instead.]

'invalid_connection_string': This connection string is meant to be used with a direct connection. Make sure to use a pooled connection string or try `createClient()` instead.]

now that error is gone, and I am getting error:

[TypeError: Cannot read properties of undefined (reading '')]
@acme/nextjs:dev:  ⨯ [TypeError: Cannot read properties of undefined (reading '')]
@acme/nextjs:dev:  ⨯ [TypeError: Cannot read properties of null (reading 'default')]

[TypeError: Cannot read properties of undefined (reading '')]
@acme/nextjs:dev:  ⨯ [TypeError: Cannot read properties of undefined (reading '')]
@acme/nextjs:dev:  ⨯ [TypeError: Cannot read properties of null (reading 'default')]

@julius

Trader Launchpad•6mo ago

Trader Launchpad•6mo ago

I commented out

export const runtime = "edge";

export const runtime = "edge";

and it loaded up. I forgot I had that issue on another t3 project. Why does it errror out withc that line in there? Can I make it a variable value based on development or production?

julius•6mo ago

It should work on edge if you set it up correctly Unless you have other deps in your router that doesn’t

Trader Launchpad•6mo ago

it should work locally with the edge runtime? on every t3 app I have worked in it always gives me errors developing locally with runtime=edge, on my windows pc and macbook :/

julius•6mo ago

Yes

Gaming

Programming

Adding Supabase to TRPC context