Custom route decorators

Nest is built around a language feature called decorators. Decorators are a well-known concept in a lot of commonly used programming languages, but in the JavaScript world, they’re still relatively new. In order to better understand how decorators work, we recommend reading this article. Here’s a simple definition:

An ES2016 decorator is an expression which returns a function and can take a target, name and property descriptor as arguments. You apply it by prefixing the decorator with an @ character and placing this at the very top of what you are trying to decorate. Decorators can be defined for either a class or a property.

Param decorators

Nest provides a set of useful param decorators that you can use together with the HTTP route handlers. Below is a list of the provided decorators and the plain Express (or Fastify) objects they represent

@Request()req
@Response()res
@Next()next
@Session()req.session
@Param(param?: string)req.params / req.params[param]
@Body(param?: string)req.body / req.body[param]
@Query(param?: string)req.query / req.query[param]
@Headers(param?: string)req.headers / req.headers[param]
@Ip()req.ip

Additionally, you can create your own custom decorators. Why is this useful?

In the node.js world, it’s common practice to attach properties to the request object. Then you manually extract them in each route handler, using code like the following:

  1. const user = req.user;

In order to make your code more readable and transparent, you can create a @User() decorator and reuse it across all of your controllers.

user.decorator.ts

  1. import { createParamDecorator, ExecutionContext } from '@nestjs/common';
  2. export const User = createParamDecorator(
  3. (data: unknown, ctx: ExecutionContext) => {
  4. const request = ctx.switchToHttp().getRequest();
  5. return request.user;
  6. },
  7. );

Then, you can simply use it wherever it fits your requirements.

  1. @Get()
  2. async findOne(@User() user: UserEntity) {
  3. console.log(user);
  4. }
  1. @Get()
  2. @Bind(User())
  3. async findOne(user) {
  4. console.log(user);
  5. }

Passing data

When the behavior of your decorator depends on some conditions, you can use the data parameter to pass an argument to the decorator’s factory function. One use case for this is a custom decorator that extracts properties from the request object by key. Let’s assume, for example, that our authentication layer validates requests and attaches a user entity to the request object. The user entity for an authenticated request might look like:

  1. {
  2. "id": 101,
  3. "firstName": "Alan",
  4. "lastName": "Turing",
  5. "email": "alan@email.com",
  6. "roles": ["admin"]
  7. }

Let’s define a decorator that takes a property name as key, and returns the associated value if it exists (or undefined if it doesn’t exist, or if the user object has not been created).

user.decorator.ts

  1. import { createParamDecorator, ExecutionContext } from '@nestjs/common';
  2. export const User = createParamDecorator(
  3. (data: string, ctx: ExecutionContext) => {
  4. const request = ctx.switchToHttp().getRequest();
  5. const user = request.user;
  6. return data ? user && user[data] : user;
  7. },
  8. );
  1. import { createParamDecorator } from '@nestjs/common';
  2. export const User = createParamDecorator((data, ctx) => {
  3. const request = ctx.switchToHttp().getRequest();
  4. const user = request.user;
  5. return data ? user && user[data] : user;
  6. });

Here’s how you could then access a particular property via the @User() decorator in the controller:

  1. @Get()
  2. async findOne(@User('firstName') firstName: string) {
  3. console.log(`Hello ${firstName}`);
  4. }
  1. @Get()
  2. @Bind(User('firstName'))
  3. async findOne(firstName) {
  4. console.log(`Hello ${firstName}`);
  5. }

You can use this same decorator with different keys to access different properties. If the user object is deep or complex, this can make for easier and more readable request handler implementations.

Hint For TypeScript users, note that createParamDecorator<T>() is a generic. This means you can explicitly enforce type safety, for example createParamDecorator<string>((data, ctx) => ...). Alternatively, specify a parameter type in the factory function, for example createParamDecorator((data: string, ctx) => ...). If you omit both, the type for data will be any.

Working with pipes

Nest treats custom param decorators in the same fashion as the built-in ones (@Body(), @Param() and @Query()). This means that pipes are executed for the custom annotated parameters as well (in our examples, the user argument). Moreover, you can apply the pipe directly to the custom decorator:

  1. @Get()
  2. async findOne(@User(new ValidationPipe()) user: UserEntity) {
  3. console.log(user);
  4. }
  1. @Get()
  2. @Bind(User(new ValidationPipe()))
  3. async findOne(user) {
  4. console.log(user);
  5. }

Decorator composition

Nest provides a helper method to compose multiple decorators. For example, suppose you want to combine all decorators related to authentication into a single decorator. This could be done with the following construction:

  1. import { applyDecorators } from '@nestjs/common';
  2. export function Auth(...roles: Role[]) {
  3. return applyDecorators(
  4. SetMetadata('roles', roles),
  5. UseGuards(AuthGuard, RolesGuard),
  6. ApiBearerAuth(),
  7. ApiUnauthorizedResponse({ description: 'Unauthorized"' }),
  8. );
  9. }

You can then use this custom @Auth() decorator as follows:

  1. @Get('users')
  2. @Auth('admin')
  3. findAllUsers() {}

This has the effect of applying all four decorators with a single declaration.

Warning The @ApiHideProperty() decorator from the @nestjs/swagger package is not composable and won’t work properly with the applyDecorators function.