❓-help

Auth through trpc procedures

Mmlody_krol

10/8/2023

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

LLucas

10/9/2023

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)

Mmlody_krol

10/9/2023

Unfortunately unstable_httpBatchStreamLink https://github.com/wojtekKrol/NextBase-DevKit/blob/main/src/trpc/server-http.ts Is it good idea to have separate api declaration with httpBatchLink just for actions that requires setting headers?

LLucas

10/9/2023

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

Mmlody_krol

10/9/2023

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,
})

Looking for more? Join the community!

❓-help

❓-help

Recommended 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 alr Does `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 URL Cold 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? Thanks Implementing wsLink causes issues on ReactI get an error within the console stating ``` Uncaught (in promise) TypeError: Cannot read propertie Understanding how too reuse TRPC with React Server ComponentsHopefully I am understanding this correctly, but I have created a `experimental_createTRPCNextAppDir What 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 plane anyone 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, up Missing 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 `create tRPC 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 o Review of inner and outer context with expressHello, I didn't find any example that uses inner (for testing) and outer context with express. That Should 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 says Wrapper 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