h
hโ€ข13mo 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
Lucasโ€ข13mo 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
hโ€ข13mo ago
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
hโ€ข13mo ago
Is it good idea to have separate api declaration with httpBatchLink just for actions that requires setting headers?
Lucas
Lucasโ€ข13mo 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
hโ€ข13mo 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,
})