Loopback-next: Loopback 4 static `/` homepage fails with authentication

[milindsingh]

Description / Steps to reproduce / Feature proposal

I have followed and set up via @loopback/authentication, But the static homepage is not accessable after adding it.
Error while accessing / .

My open source repo: https://github.com/opencommerce/questionnaire-server/

Also, asked a question on stackoverflow with complete details.

application.ts:

    import {BootMixin} from '@loopback/boot';
      import {ApplicationConfig} from '@loopback/core';
      import {
        RestExplorerBindings,
        RestExplorerComponent,
      } from '@loopback/rest-explorer';
      import {RepositoryMixin} from '@loopback/repository';
      import {RestApplication} from '@loopback/rest';
      import {ServiceMixin} from '@loopback/service-proxy';
      import {
        AuthenticationComponent,
        AuthenticationBindings,
      } from '@loopback/authentication';
      import {MyAuthStrategyProvider} from './providers';
      import * as path from 'path';
      import {MySequence} from './sequence';

      export class QuestionnaireApplication extends BootMixin(
        ServiceMixin(RepositoryMixin(RestApplication)),
      ) {
        constructor(options: ApplicationConfig = {}) {
          super(options);

          // Set up the custom sequence
          this.sequence(MySequence);

          // Set up default home page
          this.static('/', path.join(__dirname, '../../public'));

          // Customize @loopback/rest-explorer configuration here
          this.bind(RestExplorerBindings.CONFIG).to({
            path: '/explorer',
          });
          this.component(RestExplorerComponent);

          this.projectRoot = __dirname;

          this.component(AuthenticationComponent);
          this.bind(AuthenticationBindings.STRATEGY).toProvider(
              MyAuthStrategyProvider,
          );

          // Customize @loopback/boot Booter Conventions here
          this.bootOptions = {
            controllers: {
              // Customize ControllerBooter Conventions here
              dirs: ['controllers'],
              extensions: ['.controller.js'],
              nested: true,
            },
          };
        }
      }

sequence.ts:

    import {inject} from '@loopback/context';
      import {
        FindRoute,
        InvokeMethod,
        ParseParams,
        Reject,
        RequestContext,
        RestBindings,
        Send,
        SequenceHandler,
      } from '@loopback/rest';
      import {AuthenticationBindings, AuthenticateFn} from '@loopback/authentication';

      const SequenceActions = RestBindings.SequenceActions;

      export class MySequence implements SequenceHandler {
        constructor(
          @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,
          @inject(SequenceActions.PARSE_PARAMS) protected parseParams: ParseParams,
          @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,
          @inject(SequenceActions.SEND) public send: Send,
          @inject(SequenceActions.REJECT) public reject: Reject,
          @inject(AuthenticationBindings.AUTH_ACTION)
          protected authenticateRequest: AuthenticateFn,
        ) {}

        async handle(context: RequestContext) {
          try {
            const {request, response} = context;
            const route = this.findRoute(request);

            // This is the important line added to the default sequence implementation
            await this.authenticateRequest(request); //Commenting this line, seems to resolve error, why?

            // Authentication successful, proceed to invoke controller
            const args = await this.parseParams(request, route);
            const result = await this.invoke(route, args);
            this.send(response, result);
          } catch (err) {
            this.reject(context, err);
          }
        }
      }

Current Behavior

Unhandled error in GET /: 500 Error: The key controller.current.ctor was not bound to any value.
at QuestionnaireApplication.getBinding (/opt/lampp7.2/htdocs/opencommerce/questionnaire-server/node_modules/@loopback/context/dist/src/context.js:225:15)
at RestServer.getBinding (/opt/lampp7.2/htdocs/opencommerce/questionnaire-server/node_modules/@loopback/context/dist/src/context.js:221:33)
at RequestContext.getBinding (/opt/lampp7.2/htdocs/opencommerce/questionnaire-server/node_modules/@loopback/context/dist/src/context.js:221:33)

Expected Behavior

Homepage is rendered.

_See Reporting Issues for more tips on writing good issues_

[vvdwivedi]

How does your custom sequence look like? Can you paste that code here. This is mostly coming because your static assets are also going through the auth process. You can try this once in your sequence:

if (!(route instanceof StaticAssetsRoute)) {
  // do your login stuff here
}

[milindsingh]

@vvdwivedi thanks it works fine for the static index page.
I am wondering why wouldnt the authentication by default skips the static index page?
Also, if I need some static assets with authentication and some without, what would be the way?

[bajtos]

Thank you for reporting this issue. I believe it has been recently fixed by https://github.com/strongloop/loopback-next/pull/2218. /cc @jannyHou