DxD•9mo ago

Need help how to send headers in trpc

project is setup with express on 2 parts,cleint and server i have this pice of cod in client side

  const { mutate: mutateCreateUser } = trpcApi.register.register.useMutation({
    onError: (error) => {
      const errorMessage = error.data?.httpStatus === 409 ? error.message : 'Passowrd must contains 6 characters';
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    // onSuccess:()=>{}
  });

  const createUser = (): void => {
    mutateCreateUser({
      ...logInUser,
    });
  };

  const { mutate: mutateCreateUser } = trpcApi.register.register.useMutation({
    onError: (error) => {
      const errorMessage = error.data?.httpStatus === 409 ? error.message : 'Passowrd must contains 6 characters';
      if (errorMessage) {
        setShowError(errorMessage);
        setIsError(true);
        setTimeout(() => {
          setShowError('');
          setIsError(false);
        }, 5000);
      }
    },
    // onSuccess:()=>{}
  });

  const createUser = (): void => {
    mutateCreateUser({
      ...logInUser,
    });
  };

here i send a small obj(email,password,confirm password) to create an user ,, this is my context

import { inferAsyncReturnType } from '@trpc/server';
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import superjson from 'superjson';

export function createContext(opts: trpcExpress.CreateExpressContextOptions) {
  let token: string | null = null;
  if (opts.req.headers.authorization) {
    token = opts.req.headers.authorization.split(' ')[1];
  }
  return { req: opts.req, res: opts.res, token };
}

export type Context = inferAsyncReturnType<typeof createContext>;

export const t = initTRPC.context<Context>().create({ transformer: superjson });

import { inferAsyncReturnType } from '@trpc/server';
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import superjson from 'superjson';

export function createContext(opts: trpcExpress.CreateExpressContextOptions) {
  let token: string | null = null;
  if (opts.req.headers.authorization) {
    token = opts.req.headers.authorization.split(' ')[1];
  }
  return { req: opts.req, res: opts.res, token };
}

export type Context = inferAsyncReturnType<typeof createContext>;

export const t = initTRPC.context<Context>().create({ transformer: superjson });

and my middleware

import { TRPCError } from '@trpc/server';
import { decodeAndVerifyJwtToken } from 'utils/check/jwtToken';

import { t } from '../context';

export const authMiddleware = t.middleware((opts) => {
  const { ctx } = opts;
  if (!ctx.token) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'aici se opreste' });
  }
  const user = decodeAndVerifyJwtToken(ctx.token);
  return opts.next({
    ctx: {
      req: ctx.req,
      res: ctx.res,
      user,
    },
  });
});

import { TRPCError } from '@trpc/server';
import { decodeAndVerifyJwtToken } from 'utils/check/jwtToken';

import { t } from '../context';

export const authMiddleware = t.middleware((opts) => {
  const { ctx } = opts;
  if (!ctx.token) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'aici se opreste' });
  }
  const user = decodeAndVerifyJwtToken(ctx.token);
  return opts.next({
    ctx: {
      req: ctx.req,
      res: ctx.res,
      user,
    },
  });
});

7 Replies

DxD•9mo ago

here is my index

import { t } from './context';
import { authMiddleware } from './middleware/auth';

export const router = t.router;
export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(authMiddleware);

import { t } from './context';
import { authMiddleware } from './middleware/auth';

export const router = t.router;
export const publicProcedure = t.procedure;

export const protectedProcedure = t.procedure.use(authMiddleware);

When i use a route that has protectedProcedure how can i send with

headers.authorization

headers.authorization

?Like on client when i do a mutation/query i need to send smt or what ? every idea is wellcome

Nick•9mo ago

Have you read the docs? https://trpc.io/docs/client/headers

Custom header | tRPC

The headers option can be customized in the config when using the httpBatchLink or the httpLink.

DxD•9mo ago

Yes sir @Nick Lucas I really don’t understand Any chance you have something else ?

Nick•9mo ago

Not sure how we can provide anything simpler than that example showing setting the auth header in a Link? You could copy and paste the whole thing and it would probably work for you

DxD•9mo ago

Even is setup for express ? Cuz in doc if for next And I use express For next I understand how to use it But not for express @Nick Lucas

Nick•9mo ago

It shouldn’t matter, that’s client setup and that’s the piece you’re missing. Express is the backend

DxD•9mo ago

Aha I am really confused 😕 i will check how to set up in client