Using cookie-parser (express middleware) in TSOA

Question

In an express app, you would use cookie-parser like this:

var express = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function (req, res) {
  // Cookies that have not been signed
  console.log('Cookies: ', req.cookies)

  // Cookies that have been signed
  console.log('Signed Cookies: ', req.signedCookies)
})

app.listen(8080)

I'm using TSOA in my application, so I'm not really sure how to use middleware in my code like so app.use(cookieParser())

What I've tried:

import { Controller, Route, Get, Tags, Request, Middlewares } from 'tsoa';
import { fetchTopFiveTracks } from './routes/fetchTopFiveTracks';
import express from 'express';
import cookieParser from 'cookie-parser';

interface MultipleArtistsResponse {
  artistsSpotify: unknown[];
}
@Middlewares({ express: [cookieParser] })
@Route('/TopFiveTracksController') // route name => localhost:xxx/TopFiveTracksController
@Tags('TopFiveTracksController') // => Under TopFiveTracksController tag
export class TopFiveTracksController extends Controller {
  @Get() //specify the request type
  public async topFiveTracks(
    @Request() request: express.Request,
  ): Promise<MultipleArtistsResponse> {
    try {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
      const accessT = request.cookies.accessToken;
      const artistsSpotify = await fetchTopFiveTracks<MultipleArtistsResponse>({
        method: 'GET',
        credentials: 'same-origin',
        headers: {
          Accept: 'application/json',
          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-call
          Authorization: `Bearer ${accessT}`,
          'Content-Type': 'application/json',
        },
      });
      console.log(accessT);
      console.log({ artistsSpotify });
      return artistsSpotify;
    } catch (error) {
      throw new Error(JSON.stringify(error));
    }
  }
}

As you can see, I've tried using the @Middlewares decorator for TSOA, but I'm getting Error: Route.get() requires a callback function but got a [object Object].

Before adding the @Middlewares decorator with the cookieParser middleware, my application was working properly. From what I know, this error is mostly related to forgetting to export a method that is required.

Any idea how I can use the cookieParser middleware in TSOA properly? Thanks!

Answer 1

Whoa! I run the same error as you. Try to make it like this: @Middlewares(cookieParser)

Also remember to have set the experimentalDecorators to true in your tsconfig.json.¹

So your code should look like this:

import { Controller, Route, Get, Tags, Request, Middlewares } from 'tsoa';
import { fetchTopFiveTracks } from './routes/fetchTopFiveTracks';
import express from 'express';
import cookieParser from 'cookie-parser';

interface MultipleArtistsResponse {
  artistsSpotify: unknown[];
}
@Middlewares(cookieParser)
@Route('/TopFiveTracksController') // route name => localhost:xxx/TopFiveTracksController
@Tags('TopFiveTracksController') // => Under TopFiveTracksController tag
export class TopFiveTracksController extends Controller {
  @Get() //specify the request type
  public async topFiveTracks(
    @Request() request: express.Request,
  ): Promise<MultipleArtistsResponse> {
    try {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
      const accessT = request.cookies.accessToken;
      const artistsSpotify = await fetchTopFiveTracks<MultipleArtistsResponse>({
        method: 'GET',
        credentials: 'same-origin',
        headers: {
          Accept: 'application/json',
          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-call
          Authorization: `Bearer ${accessT}`,
          'Content-Type': 'application/json',
        },
      });
      console.log(accessT);
      console.log({ artistsSpotify });
      return artistsSpotify;
    } catch (error) {
      throw new Error(JSON.stringify(error));
    }
  }
}

There is no mention of an object with the key "express" ({ express: [function] }). I think that this could be used as an example.

PS

There is an option to have multiple middlewares, just put them into the array: @Middlewares([funcA, funcB])

PPS

You can also define your middlewares like that:

import { Request, Response, NextFunction } from 'express';

// ... controller logic ...

// @Get('/endpoint') | @Post('/endpoint') etc.
@Middlewares([
  (req: Request, res: Response, next: NextFunction) => {
    console.log(req.headers);
    next();
  },
  (req: Request, res: Response, next: NextFunction) => {
    console.log('Second middleware, but we can also use only one!');
    next();
  },
])
// getEndpoint(): string {
//   return 'Hello World!';
// }

// ... controller logic ...

---

¹ https://github.com/lukeautry/tsoa/pull/1123#issuecomment-1018251162