diff --git a/README.md b/README.md index e4eafa7..f1d90e7 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ End-to-end typesafe APIs with [tRPC.io](https://trpc.io/) in Nuxt applications. ## Install ```bash -npm i trpc-nuxt -D +npm i trpc-nuxt ``` ```ts @@ -75,7 +75,7 @@ console.log(farewell); // => 👈 goodbye ## Recipes -### Input validation with [Zod](https://github.com/colinhacks/zod) +### Validation tRPC works out-of-the-box with yup/superstruct/zod/myzod/custom validators. Learn more about input validation [here](https://trpc.io/docs/router#input-validation). @@ -99,6 +99,57 @@ export const router = trpc }) ``` +### Authorization + +The `createContext`-function is called for each incoming request so here you can add contextual information about the calling user from the request object. Learn more about authorization [here](https://trpc.io/docs/authorization). + +```ts +import * as trpc from '@trpc/server' +import type { CompatibilityEvent } from 'h3' +import { decodeAndVerifyJwtToken } from '~/somewhere/in/your/app/utils' + +// The app's context - is generated for each incoming request +export async function createContext(event: CompatibilityEvent) { + // Create your context based on the request object + // Will be available as `ctx` in all your resolvers + + // This is just an example of something you'd might want to do in your ctx fn + async function getUserFromHeader() { + if (req.headers.authorization) { + const user = await decodeAndVerifyJwtToken(req.headers.authorization.split(' ')[1]) + return user + } + return null + } + const user = await getUserFromHeader() + + return { + user, + } +} + +export const router = trpc + .router>() + // open for anyone + .query('hello', { + input: z.string().nullish(), + resolve: ({ input, ctx }) => { + return `hello ${input ?? ctx.user?.name ?? 'world'}` + }, + }) + // checked in resolver + .query('secret', { + resolve: ({ ctx }) => { + if (!ctx.user) + throw new trpc.TRPCError({ code: 'UNAUTHORIZED' }) + + return { + secret: 'sauce', + } + }, + }) +``` + Learn more about tRPC.io [here](https://trpc.io/docs). ## License diff --git a/playground/README.md b/playground/README.md index 61b9202..7257bce 100644 --- a/playground/README.md +++ b/playground/README.md @@ -1,20 +1,11 @@ -# Nuxt 3 Minimal Starter - -Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. +# dev playground ## Setup Make sure to install the dependencies: ```bash -# yarn -yarn install - -# npm -npm install - -# pnpm -pnpm install --shamefully-hoist +pnpm install ``` ## Development Server @@ -22,7 +13,7 @@ pnpm install --shamefully-hoist Start the development server on http://localhost:3000 ```bash -npm run dev +pnpm dev ``` ## Production @@ -30,13 +21,11 @@ npm run dev Build the application for production: ```bash -npm run build +pnpm build ``` Locally preview production build: ```bash -npm run preview +pnpm preview ``` - -Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information. diff --git a/playground/trpc/index.ts b/playground/server/trpc/index.ts similarity index 74% rename from playground/trpc/index.ts rename to playground/server/trpc/index.ts index 497dcdb..c943b6a 100644 --- a/playground/trpc/index.ts +++ b/playground/server/trpc/index.ts @@ -1,5 +1,6 @@ import * as trpc from '@trpc/server' import { z } from 'zod' +import type { CompatibilityEvent } from 'h3' export const router = trpc .router() @@ -14,10 +15,12 @@ export const router = trpc }) // optional -export const createContext = () => { - // ... +export const createContext = (event: CompatibilityEvent) => { return { - /** context data */ + user: { + id: 69, + name: 'robert', + }, } }