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
L
Lucasโ€ข192d 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)
M
mlody_krolโ€ข192d 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...
M
mlody_krolโ€ข192d ago
Is it good idea to have separate api declaration with httpBatchLink just for actions that requires setting headers?
L
Lucasโ€ข192d 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
M
mlody_krolโ€ข192d 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,
})
More Posts
supabase + trpcdid anyone handle to make it work -> context and all signup signin etc methods?How to update query data after mutationAny idea?standaloneMiddleware: Merge ctx/meta/input typesUsing standaloneMiddleware, it would be great to merge the types (ctx, input, meta) with what is alrDoes `fetchRequestHandler()` automatically opt out of /app Route Handler caching?I noticed that Next.js always skips cache for my TRPC API Route Handlers even though the request URLCold Boot OptimizationsI have a next.js app that uses trcp for all of the routes. I am noticing cold boots are slow. It is Cancel useQueries with single functionis there a way to abort useQueries with function call (e.g. cancel, abort)?There is a logger middleware like morgan for express?There is a package with a nice logger middleware? ThanksImplementing wsLink causes issues on ReactI get an error within the console stating ``` Uncaught (in promise) TypeError: Cannot read propertieUnderstanding how too reuse TRPC with React Server ComponentsHopefully I am understanding this correctly, but I have created a `experimental_createTRPCNextAppDirWhat would be considered best practice for getting data and invalidating queries?I have a really simple task management app (doing it to learn stuff). Tasks are grouped in projects Calls to specific table not working in production, fine locallyI am having a strange issue since yesterday. I am using nextjs TRPC and Prisma to connect to a planeanyone else getting a failed to fetch in latest next versionsnot sure if this is happening to more people, I tried literally everything, changing to 127.0.01, upMissing keys in TRPCError when returning as JSONHey all! I am returning a TRPCError from a custom TRPC server but only the code and name keys seems How to close a Standalone adapter server?I want to run some integration tests with Vitest and for some reason I don't want to use the `createtRPC Client within Next.js but with external standalone server?Hi, I have an old Next.js project that used tRPC and we're currently in the process of separating oReview of inner and outer context with expressHello, I didn't find any example that uses inner (for testing) and outer context with express. ThatShould i use lint rule explicit-function-return-type when use trpc?I got warning for this lint https://typescript-eslint.io/rules/explicit-function-return-type/ When how to delete next-auth modules from trpc stacjas the title saysWrapper Component: Unable to retrieve application context.Hello tRPC-Community, I have ran into a funny "issue" while gaining my first experiences with tRPC. handling errors server sideHow do you guys handle server side errors 500 request on production