Интеграция tRPC с React Query и авторизацией

Контекст tRPC — это объект, который функция createTRPCContext создаёт заново для каждого запроса. Он может содержать клиент базы данных, аутентифицированную сессию, заголовки запроса или любые другие данные для конкретного запроса, необходимые Вашим процедурам.

Контекст создаётся до выполнения любой процедуры, поэтому это подходящее место для настройки аутентификации и подключения к базе данных.

В createTRPCContext вызовите getServerSession(authOptions) из next-auth/next. Добавьте результат в объект контекста: return { session: await getServerSession(authOptions), db }. Теперь все процедуры получают доступ к ctx.session.

Если session имеет значение null, пользователь не аутентифицирован. Процедуры могут проверять это и в зависимости от результата возвращать данные или выбрасывать ошибку.

Определите промежуточный обработчик, проверяющий ctx.session: const isAuthenticated = t.middleware(({ ctx, next }) => { if (!ctx.session) throw new TRPCError({ code: 'UNAUTHORIZED' }); return next({ ctx: { session: ctx.session } }); }).

Вызов next() передаёт уточнённый контекст (сессию, которая не может быть null) следующим промежуточным обработчикам и обработчику процедуры.

Объедините промежуточный обработчик с publicProcedure: const protectedProcedure = publicProcedure.use(isAuthenticated). Теперь любой обработчик, определённый через protectedProcedure.query() или protectedProcedure.mutation(), автоматически получает в ctx непустую сессию.

TypeScript определяет, что ctx.session внутри защищённых процедур не равна null, поскольку промежуточный обработчик вызвал бы ошибку до передачи управления обработчику.

Заменяйте publicProcedure на protectedProcedure для конечных точек, требующих аутентификации: protectedProcedure.query(({ ctx }) => getProfileFor(ctx.session.user.id)). TypeScript знает, что ctx.session здесь не равна null, поэтому доступ к ctx.session.user.id безопасен без проверки на null.

Неаутентифицированные запросы автоматически получают ответ 401 UNAUTHORIZED до выполнения обработчика.

Передайте функцию headers в httpBatchLink: links: [httpBatchLink({ url: '/api/trpc', headers: async () => { const token = await getToken(); return { Authorization: 'Bearer ' + token }; } })]. Функция выполняется перед каждой группой запросов.

Это используется при аутентификации tRPC с клиента React Native или любого клиента не на Next.js, который самостоятельно управляет токенами аутентификации.

Для SSR в Pages Router Next.js создайте вспомогательный объект для сервера: createServerSideHelpers({ router: appRouter, ctx: await createContext({ req, res }) }). Используйте helpers.post.getAll.prefetch() в getServerSideProps.

Дегидратируйте предварительно загруженное состояние с помощью dehydrate(queryClient) и передайте его в props. На клиенте QueryClient восстановит данные из этого состояния, что позволит избежать повторного запроса при первой загрузке.

Оберните _app.tsx в Next.js компонентом Hydrate из @tanstack/react-query. Передайте pageProps.trpcState в свойство state. Это восстановит на клиенте предварительно загруженный кэш запросов из сериализованного состояния сервера.

При такой настройке пользователи сразу увидят полностью заполненные страницы без индикаторов загрузки на клиенте при первоначальной навигации.

Выбрасывайте TRPCError с подходящими кодами, соответствующими семантике HTTP: UNAUTHORIZED (401), FORBIDDEN (403), NOT_FOUND (404), BAD_REQUEST (400), INTERNAL_SERVER_ERROR (500). Клиент tRPC преобразует их в соответствующие состояния ошибок в результате хука.

Поле message может содержать сведения, предназначенные для пользователя, но в рабочей среде не допускайте утечки конфиденциальной информации сервера в сообщениях об ошибках.

tRPC работает с клиентами React Native, используя тот же тип AppRouter. Замените httpBatchLink на httpLink (механизм получения данных в RN работает так же) и настройте заголовки аутентификации. Адаптер @trpc/react-query работает так же, как и в веб-приложении.

Это означает, что монорепозиторий может использовать один маршрутизатор tRPC одновременно в веб-приложении на Next.js и приложении Expo React Native, обеспечивая полную типобезопасность в обоих случаях.

Расширьте шаблон промежуточного обработчика для управления доступом на основе ролей: проверяйте ctx.session.user.role и выбрасывайте TRPCError({ code: 'FORBIDDEN' }), если роль недостаточна. Создайте adminProcedure = publicProcedure.use(isAdmin) для конечных точек, доступных только администраторам.

Объединяйте несколько промежуточных обработчиков для сложной авторизации: publicProcedure.use(isAuthenticated).use(hasFeatureFlag('beta')).query(...).

Как в tRPC создаётся защищённая процедура для обязательной проверки аутентификации?

Контекст tRPC создаётся для каждого запроса и содержит сессию, клиент базы данных и другие данные, относящиеся к конкретному запросу. Защищённые процедуры создаются добавлением проверяющего сессию промежуточного обработчика к publicProcedure с помощью .use(). Для серверного рендеринга используется createServerSideHelpers для предварительной загрузки данных и Hydrate для восстановления кэша на клиенте.

Заголовки аутентификации для клиентов не на Next.js передаются через параметр headers в httpBatchLink.