LoopBack 4 - Add 'Authorize' button in API explorer

Question

I'm new in LoopBack v4 and I'm trying to send an authorization key with every request. I used Swagger before, and I used to add the api key, after clicking on the "Authorize" button to the right. To avoid error due my inexperience, I've started with a fresh app of "Todo List" example. I tried (with not success) to follow what this post suggests: Nodejs Loopback 4 add bearer token config into swagger explorer

What I did is modify the file src/index.ts with this code:

export async function main(options: ApplicationConfig = {}) {
  const spec: OpenApiSpec = {
    openapi: '3.0.0',
    info: {
      title: 'LoopBack Application v2',
      version: '1.0.2',
    },
    paths: {
    },
    securityDefinitions: [
      {
        api_key: [
          {
            type: 'apiKey',
            name: 'api_key',
            in: 'header'
          }
        ]
      },
    ],
  };

  const app = new TodoListApplication(options);
  app.api(spec);

  await app.boot();
  await app.start();

  const url = app.restServer.url;
  console.log(`Server is running at ${url}`);
  return app;
}

Basically, I added this line: app.api(spec); and the config securityDefinitions. The spec constant changes the title and version, but I still cannot see the "Authorize" button. For sure, I'm missing something or doing something wrong.

Any help is appreciated! Thanks!

Answer 1

Finally, I added the "Authorize" button and send the api_key in the header, with this configuration:

  const spec: OpenApiSpec = {
    openapi: '3.0.0',
    info: {
      title: 'LoopBack Application v2',
      version: '1.0.2',
    },
    paths: {},
    security: [
      {
        api_key: ['api_key'],
      },
    ],
    components: {
        securitySchemes: {
          api_key: {
            type: 'apiKey',
            name: 'api_key',
            in: 'header'
          }
        }
    },
  };