h•10mo ago

Auth through trpc procedures

Has Anyone Successfully Implemented Supabase Auth through tRPC Procedures in a Next.js App? Hello everyone 👋, I'm currently working on a Next.js project and trying to handle authentication using Supabase and tRPC. While I've been able to perform authentication directly via the Supabase client, I'm running into some issues when attempting to do the same through tRPC procedures. Specifically, sessions are not being added to cookies. Here's a snippet of my tRPC auth service routes:

export const authServiceRoutes = router({
  signup: publicProcedure
    .input(SignupInput)
    .mutation(async ({ ctx: { supabase }, input: { email, password } }) => {
      // Signup Logic
    }),
  login: publicProcedure
    .input(LoginInput)
    .mutation(async ({ ctx: { supabase }, input: { email, password } }) => {
      // Login Logic
    })
})

export const authServiceRoutes = router({
  signup: publicProcedure
    .input(SignupInput)
    .mutation(async ({ ctx: { supabase }, input: { email, password } }) => {
      // Signup Logic
    }),
  login: publicProcedure
    .input(LoginInput)
    .mutation(async ({ ctx: { supabase }, input: { email, password } }) => {
      // Login Logic
    })
})

When I perform authentication directly using Supabase like so:

await supabase.auth.signInWithPassword({ email, password });

await supabase.auth.signInWithPassword({ email, password });

Everything works as expected. However, using my tRPC procedures doesn't seem to set the session in the cookies. Has anyone faced a similar issue or successfully implemented this kind of setup? Any help would be much appreciated

5 Replies

Lucas•10mo ago

which trpc link are you using? (httpLink, batchLink, httpBatchStreamLink, etc..) if the link you are using provides a streamed response, then there is your problem since httpBatchStreamLink does not support setting headers once the stream has begun (thus you cannot set cookies on a response)

h•10mo ago

Unfortunately unstable_httpBatchStreamLink https://github.com/wojtekKrol/NextBase-DevKit/blob/main/src/trpc/server-http.ts

GitHub

NextBase-DevKit/src/trpc/server-http.ts at main · wojtekKrol/NextBa...

Robust web application template built with Next.js, Drizzle ORM, Supabase, tRPC, Zod, React Query, and TailwindCSS. Designed for scalable and maintainable development, this template offers a custom...

h•10mo ago

Is it good idea to have separate api declaration with httpBatchLink just for actions that requires setting headers?

Lucas•10mo ago

I think the easiest approach would be to just use a splitLink that uses httpBatchStreamLink for queries and httpBatchLink for mutations

splitLink({
  condition: (op) => op.type === 'mutation', // or it can be something like op.path === 'auth.login'
  true: httpBatchStreamLink(...),
  false: httpBatchLink(...),
})

splitLink({
  condition: (op) => op.type === 'mutation', // or it can be something like op.path === 'auth.login'
  true: httpBatchStreamLink(...),
  false: httpBatchLink(...),
})

something like that

h•10mo ago

I set up this but im not sure if it works I mean its set in my api definition for calling trpc on server components and im calling login mutation on client component

export const api = createTRPCReact<AppRouter>({
  overrides: {
    useMutation: {
      async onSuccess(opts) {
        await opts.originalFn()
        await opts.queryClient.invalidateQueries()
      },
    },
  },
  abortOnUnmount: true,
})

export const api = createTRPCReact<AppRouter>({
  overrides: {
    useMutation: {
      async onSuccess(opts) {
        await opts.originalFn()
        await opts.queryClient.invalidateQueries()
      },
    },
  },
  abortOnUnmount: true,
})