I want to add a basic auth to access swagger url in nestjs application

Question

I am trying to add an @fastify/basic-auth and try to intercept the route to ask for username and password. But it is not working.

Adding my main ts file:

import { AppModule } from './app/app.module'
import { HttpAdapterHost, NestFactory } from '@nestjs/core'
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify'
import { GlobalExceptionFilter } from './common/exceptions/globalException.filter'
import compression from '@fastify/compress'
import fastifyHelmet from '@fastify/helmet'
import { VersioningType, ValidationPipe } from '@nestjs/common'
import { setupSwagger } from './config/swagger.config'
import * as xhr2 from 'xhr2'

//TODO https://emeritus.atlassian.net/browse/MI-436

global.XMLHttpRequest = xhr2.XMLHttpRequest

async function bootstrap() {
  const PORT = process.env.PORT || 3010
  const app = await NestFactory.create<NestFastifyApplication>(AppModule, new FastifyAdapter())
  app.enableVersioning({
    type: VersioningType.URI,
    defaultVersion: '1',
    prefix: 'growth/api/v'
  })
  app.enableCors()
  app.useGlobalPipes(
    new ValidationPipe({
      transform: true, // Automatically transform payload to DTO instance
      whitelist: true, // Strip unknown properties from DTO instance
      forbidNonWhitelisted: false // Throw error for unknown properties in DTO
    })
  )
  // useGlobalFilters should be after useGlobalPipes so that we can log error from validation
  app.useGlobalFilters(new GlobalExceptionFilter(app.get(HttpAdapterHost)))
  //protect your app from some well-known web vulnerabilities by setting HTTP headers appropriately.
  await app.register(fastifyHelmet, {
    contentSecurityPolicy:
      process.env.NODE_ENV === 'development'
        ? false
        : {
            directives: {
              defaultSrc: [`'self'`, 'unpkg.com'],
              styleSrc: [`'self'`, `'unsafe-inline'`, 'cdn.jsdelivr.net', 'fonts.googleapis.com', 'unpkg.com'],
              fontSrc: [`'self'`, 'fonts.gstatic.com', 'data:'],
              imgSrc: [`'self'`, 'data:', 'cdn.jsdelivr.net'],
              scriptSrc: [`'self'`, `https: 'unsafe-inline'`, `cdn.jsdelivr.net`, `'unsafe-eval'`]
            }
          }
  })
  await app.register(compression, { encodings: ['gzip', 'deflate'] })
  // swagger setup refer config file
  setupSwagger(app)
  await app.listen(PORT, '0.0.0.0', async (error) => {
    if (error) console.error(`Error in server setup - ${error}`)
    else console.log(`Application is running at ${await app.getUrl()}`)
  })
  // Starts listening for shutdown hooks
  app.enableShutdownHooks()
}
bootstrap()

I tried using the @fastify/basic-auth package but not able to get the requests in the plugin.

I want the url to be popped by like this:

enter image description here

If the username and password are correct, then it should enter else do nothing