Overview

Security is of paramount importance when developing a web or mobile applicationand usually consists of two distinct pieces:

  • Authentication
  • AuthorizationAuthentication is a process ofverifying someone’s identity before a protected resource is accessed.

Authorization is a process ofdeciding if a user can perform an action on a protected resource.

Note:

For a description of an Authorization process, please see Authorization.

This document describes the details of the LoopBack 4 Authentication componentfrom the @loopback/authentication package.

Here is a high level overview of the authentication component.

authentication_overview_highlevel

  • A decorator to express an authentication requirement on controller methods
  • A provider to access method-level authentication metadata
  • An action in the REST sequence to enforce authentication
  • An extension point to discover all authentication strategies and handle thedelegationHere is a detailed overview of the authentication component.

authentication_overview_detailed

Basically, to secure your API endpoints, you need to:

  • decorate the endpoints of a controller with the@authenticate(strategyName, options?) decorator (app developer)
  • insert the authentication action in a custom sequence (app developer)
  • create a custom authentication strategy with a unique name (extensiondeveloper)
  • register the custom authentication strategy (app developer)The Authentication Component takes care of the rest.

Installation

  1. npm install --save @loopback/authentication

Authentication Component

To utilize authentication in an application application.ts, you must loadthe authentication component named AuthenticationComponent.

  1. export class MyApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     //...
  9.     this.component(AuthenticationComponent);
  11.     //...
  12.   }
  13. }

The AuthenticationComponent is defined as follows:

  1. export class AuthenticationComponent implements Component {
  2.   providers?: ProviderMap;
  4.   constructor() {
  5.     this.providers = {
  6.       [AuthenticationBindings.AUTH_ACTION.key]: AuthenticateActionProvider,
  7.       [AuthenticationBindings.STRATEGY.key]: AuthenticationStrategyProvider,
  8.       [AuthenticationBindings.METADATA.key]: AuthMetadataProvider,
  9.     };
  10.   }
  11. }

As you can see, there are a few providerswhich make up the bulk of the authenticaton component.

Essentially

  • The binding key AuthenticationBindings.AUTH_ACTION.key is bound toAuthenticateActionProvider which returns an authenticating function of typeAuthenticateFn
  • The binding key AuthenticationBindings.STRATEGY.key is bound toAuthenticationStrategyProvider which resolves and returns an authenticationstrategy of type AuthenticationStrategy
  • The binding key AuthenticationBindings.METADATA.key is bound toAuthMetadataProvider which returns authentication decorator metadata of typeAuthenticationMetadataThe purpose of these providers and the values they return will be explained inthe sections below.

Using the Authentication Decorator

Securing your application’s API endpoints is done by decorating controllerfunctions with theAuthentication Decorator.

The decorator’s syntax is:

  1. @authenticate(strategyName: string, options?: object)

The strategyName is the unique name of the authentication strategy.

When the options object is specified, it must be relevant to that particularstrategy.

Here is an example of the decorator using a custom authentication strategy named‘basic’ without options, for the endpoint /whoami in a controller namedWhoAmIController. (We willcreate andregister the ‘basic’authentication strategy in later sections)

  1. import {inject} from '@loopback/context';
  2. import {
  3.   AuthenticationBindings,
  4.   UserProfile,
  5.   authenticate,
  6. } from '@loopback/authentication';
  7. import {SecurityBindings} from '@loopback/security';
  8. import {get} from '@loopback/rest';
  10. export class WhoAmIController {
  11.   constructor(
  12.     // After extracting the CURRENT_USER key to module `@loopback/security`,
  13.     // `AuthenticationBindings.CURRENT_USER` is turned to an alias of
  14.     // `SecurityBindings.USER`
  15.     @inject(SecurityBindings.USER)
  16.     private userProfile: UserProfile,
  17.   ) {}
  19.   @authenticate('basic')
  20.   @get('/whoami')
  21.   whoAmI(): string {
  22.     return this.userProfile.id;
  23.   }
  24. }

Note:If only some of the controller methods are decorated with the @authenticate decorator, then the injection decorator for CURRENT_USER in the controller’s constructor must be specified as @inject(SecurityBindings.USER, {optional:true}) to avoid a binding error when an unauthenticated endpoint is accessed. Alternatively, do not inject CURRENT_USER in the controller constructor, but in the controller methods which are actually decorated with the @authenticate decorator. See Method Injection, Constructor Injection and Optional Dependencies for details.

An example of the decorator when options are specified looks like this:

  1. @authenticate('basic', { /* some options for the strategy */})

Tip: To avoid repeating the same options in the @authenticate decorator for many endpoints in a controller, you can instead define global options which can be injected into an authentication strategy thereby allowing you to avoid specifying the options object in the decorator itself. For controller endpoints that need to override a global option, you can specify it in an options object passed into the decorator. Your authentication strategy would need to handle the option overrides. See Managing Custom Authentication Strategy Options for details.

After a request is successfully authenticated, the current user profile isavailable on the request context. You can obtain it via dependency injection byusing the SecurityBindings.USER binding key.

Parameters of the @authenticate decorator can be obtained via dependencyinjection using the AuthenticationBindings.METADATA binding key. It returnsdata of type AuthenticationMetadata provided by AuthMetadataProvider. TheAuthenticationStrategyProvider, discussed in a later section, makes use ofAuthenticationMetadata to figure out what name you specified as aparameter in the @authenticate decorator of a specific controller endpoint.

Adding an Authentication Action to a Custom Sequence

In a LoopBack 4 application with REST API endpoints, each request passes througha stateless grouping of actions called a Sequence.

Here is an example of the default sequence that is created in a LoopBack 4application.

  1. export class DefaultSequence implements SequenceHandler {
  2.   /**
  3.    * Constructor: Injects findRoute, invokeMethod & logError
  4.    * methods as promises.
  5.    *
  6.    * @param {FindRoute} findRoute Finds the appropriate controller method,
  7.    *  spec and args for invocation (injected via SequenceActions.FIND_ROUTE).
  8.    * @param {ParseParams} parseParams The parameter parsing function (injected
  9.    * via SequenceActions.PARSE_PARAMS).
  10.    * @param {InvokeMethod} invoke Invokes the method specified by the route
  11.    * (injected via SequenceActions.INVOKE_METHOD).
  12.    * @param {Send} send The action to merge the invoke result with the response
  13.    * (injected via SequenceActions.SEND)
  14.    * @param {Reject} reject The action to take if the invoke returns a rejected
  15.    * promise result (injected via SequenceActions.REJECT).
  16.    */
  17.   constructor(
  18.     @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,
  19.     @inject(SequenceActions.PARSE_PARAMS) protected parseParams: ParseParams,
  20.     @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,
  21.     @inject(SequenceActions.SEND) public send: Send,
  22.     @inject(SequenceActions.REJECT) public reject: Reject,
  23.   ) {}
  25.   /**
  26.    * Runs the default sequence. Given a handler context (request and response),
  27.    * running the sequence will produce a response or an error.
  28.    *
  29.    * Default sequence executes these steps
  30.    *  - Finds the appropriate controller method, swagger spec
  31.    *    and args for invocation
  32.    *  - Parses HTTP request to get API argument list
  33.    *  - Invokes the API which is defined in the Application Controller
  34.    *  - Writes the result from API into the HTTP response
  35.    *  - Error is caught and logged using 'logError' if any of the above steps
  36.    *    in the sequence fails with an error.
  37.    *
  38.    * @param context The request context: HTTP request and response objects,
  39.    * per-request IoC container and more.
  40.    */
  41.   async handle(context: RequestContext): Promise<void> {
  42.     try {
  43.       const {request, response} = context;
  44.       const route = this.findRoute(request);
  45.       const args = await this.parseParams(request, route);
  46.       const result = await this.invoke(route, args);
  48.       debug('%s result -', route.describe(), result);
  49.       this.send(response, result);
  50.     } catch (error) {
  51.       this.reject(context, error);
  52.     }
  53.   }
  54. }

By default, authentication is not part of the sequence of actions, so youmust create a custom sequence and add the authentication action.

An authentication action AuthenticateFn is provided by theAuthenticateActionProvider class.

AuthenticateActionProvider is defined as follows:

  1. export class AuthenticateActionProvider implements Provider<AuthenticateFn> {
  2.   constructor(
  3.     // The provider is instantiated for Sequence constructor,
  4.     // at which time we don't have information about the current
  5.     // route yet. This information is needed to determine
  6.     // what auth strategy should be used.
  7.     // To solve this, we are injecting a getter function that will
  8.     // defer resolution of the strategy until authenticate() action
  9.     // is executed.
  10.     @inject.getter(AuthenticationBindings.STRATEGY)
  11.     readonly getStrategy: Getter<AuthenticationStrategy>,
  12.     @inject.setter(SecurityBindings.USER)
  13.     readonly setCurrentUser: Setter<UserProfile>,
  14.   ) {}
  16.   /**
  17.    * @returns authenticateFn
  18.    */
  19.   value(): AuthenticateFn {
  20.     return request => this.action(request);
  21.   }
  23.   /**
  24.    * The implementation of authenticate() sequence action.
  25.    * @param request The incoming request provided by the REST layer
  26.    */
  27.   async action(request: Request): Promise<UserProfile | undefined> {
  28.     const strategy = await this.getStrategy();
  29.     if (!strategy) {
  30.       // The invoked operation does not require authentication.
  31.       return undefined;
  32.     }
  34.     const userProfile = await strategy.authenticate(request);
  35.     if (!userProfile) {
  36.       // important to throw a non-protocol-specific error here
  37.       let error = new Error(
  38.         `User profile not returned from strategy's authenticate function`,
  39.       );
  40.       Object.assign(error, {
  41.         code: USER_PROFILE_NOT_FOUND,
  42.       });
  43.       throw error;
  44.     }
  46.     this.setCurrentUser(userProfile);
  47.     return userProfile;
  48.   }
  49. }

AuthenticateActionProvider’s value() function returns a function of typeAuthenticateFn. This function attempts to obtain an authentication strategy(resolved by AuthenticationStrategyProvider via theAuthenticationBindings.STRATEGY binding). If no authentication strategywas specified for this endpoint, the action immediately returns. If anauthentication strategy was specified for this endpoint, itsauthenticate(request) function is called. If a user profile is returned, thismeans the user was authenticated successfully, and the user profile is added tothe request context (via the SecurityBindings.USER binding); otherwise anerror is thrown.

Here is an example of a custom sequence which utilizes the authenticationaction.

  1. export class MyAuthenticatingSequence implements SequenceHandler {
  2.   constructor(
  3.     @inject(SequenceActions.FIND_ROUTE) protected findRoute: FindRoute,
  4.     @inject(SequenceActions.PARSE_PARAMS)
  5.     protected parseParams: ParseParams,
  6.     @inject(SequenceActions.INVOKE_METHOD) protected invoke: InvokeMethod,
  7.     @inject(SequenceActions.SEND) protected send: Send,
  8.     @inject(SequenceActions.REJECT) protected reject: Reject,
  9.     @inject(AuthenticationBindings.AUTH_ACTION)
  10.     protected authenticateRequest: AuthenticateFn,
  11.   ) {}
  13.   async handle(context: RequestContext) {
  14.     try {
  15.       const {request, response} = context;
  16.       const route = this.findRoute(request);
  18.       //call authentication action
  19.       await this.authenticateRequest(request);
  21.       // Authentication successful, proceed to invoke controller
  22.       const args = await this.parseParams(request, route);
  23.       const result = await this.invoke(route, args);
  24.       this.send(response, result);
  25.     } catch (error) {
  26.       //
  27.       // The authentication action utilizes a strategy resolver to find
  28.       // an authentication strategy by name, and then it calls
  29.       // strategy.authenticate(request).
  30.       //
  31.       // The strategy resolver throws a non-http error if it cannot
  32.       // resolve the strategy. When the strategy resolver obtains
  33.       // a strategy, it calls strategy.authenticate(request) which
  34.       // is expected to return a user profile. If the user profile
  35.       // is undefined, then it throws a non-http error.
  36.       //
  37.       // It is necessary to catch these errors and add HTTP-specific status
  38.       // code property.
  39.       //
  40.       // Errors thrown by the strategy implementations already come
  41.       // with statusCode set.
  42.       //
  43.       // In the future, we want to improve `@loopback/rest` to provide
  44.       // an extension point allowing `@loopback/authentication` to contribute
  45.       // mappings from error codes to HTTP status codes, so that application
  46.       // don't have to map codes themselves.
  47.       if (
  48.         error.code === AUTHENTICATION_STRATEGY_NOT_FOUND ||
  49.         error.code === USER_PROFILE_NOT_FOUND
  50.       ) {
  51.         Object.assign(error, {statusCode: 401 /* Unauthorized */});
  52.       }
  54.       this.reject(context, error);
  55.       return;
  56.     }
  57.   }
  58. }

Notice the new dependency injection in the sequence’s constructor.

  1. @inject(AuthenticationBindings.AUTH_ACTION)
  2. protected authenticateRequest: AuthenticateFn,

The binding key AuthenticationBindings.AUTH_ACTION gives us access to theauthentication function authenticateRequest of type AuthenticateFn providedby AuthenticateActionProvider.

Now the authentication function authenticateRequest can be called in ourcustom sequence anywhere before the invoke action in order secure theendpoint.

There are two particular protocol-agnostic errorsAUTHENTICATION_STRATEGY_NOT_FOUND and USER_PROFILE_NOT_FOUND which must beaddressed in the sequence, and given an HTTP status code of 401 (UnAuthorized).

It is up to the developer to throw the appropriate HTTP error code from within acustom authentications strategy or its custom services.

If any error is thrown during the authentication process, the controllerfunction of the endpoint is never executed.

Binding the Authenticating Sequence to the Application

Now that we’ve defined a custom sequence that performs an authentication actionon every request, we must bind it to the application application.ts

  1. export class MyApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     //...
  9.     this.sequence(MyAuthenticatingSequence);
  11.     //...
  12.   }
  13. }

Creating a Custom Authentication Strategy

Support for multiple authentication strategies is possible with a commonauthentication strategy interface, and an extensionPoint/extensions patternused to register and discover authentication strategies.

The AuthenticationComponent declares a common authentication strategyinterface named AuthenticationStrategy.

  1. export interface AuthenticationStrategy {
  2.   /**
  3.    * The 'name' property is a unique identifier for the
  4.    * authentication strategy (for example: 'basic', 'jwt', etc)
  5.    */
  6.   name: string;
  8.   /**
  9.    * The 'authenticate' method takes in a given request and returns a user profile
  10.    * which is an instance of 'UserProfile'.
  11.    * (A user profile is a minimal subset of a user object)
  12.    * If the user credentials are valid, this method should return a 'UserProfile' instance.
  13.    * If the user credentials are invalid, this method should throw an error
  14.    * If the user credentials are missing, this method should throw an error, or return 'undefined'
  15.    * and let the authentication action deal with it.
  16.    *
  17.    * @param request - Express request object
  18.    */
  19.   authenticate(request: Request): Promise<UserProfile | undefined>;
  20. }

Developers that wish to create a custom authentication strategy must implementthis interface. The custom authentication strategy must have a unique nameand have an authenticate function which takes in a request and returns theuser profile of an authenticated user.

Here is an example of a basic authentication strategyBasicAuthenticationStrategy with the name 'basic' inbasic-strategy.ts:

  1. export interface Credentials {
  2.   username: string;
  3.   password: string;
  4. }
  6. export class BasicAuthenticationStrategy implements AuthenticationStrategy {
  7.   name: string = 'basic';
  9.   constructor(
  10.     @inject(UserServiceBindings.USER_SERVICE)
  11.     private userService: UserService,
  12.   ) {}
  14.   async authenticate(request: Request): Promise<UserProfile | undefined> {
  15.     const credentials: Credentials = this.extractCredentials(request);
  16.     const user = await this.userService.verifyCredentials(credentials);
  17.     const userProfile = this.userService.convertToUserProfile(user);
  19.     return userProfile;
  20.   }
  22.   extractCredentials(request: Request): Credentials {
  23.     let creds: Credentials;
  25.     /**
  26.      * Code to extract the 'basic' user credentials from the Authorization header
  27.      */
  29.     return creds;
  30.   }
  31. }

As you can see in the example, an authentication strategy can inject customservices to help it accomplish certain tasks. See the complete examples forbasic authentication strategyandjwt authentication strategy.

The AuthenticationComponent component also provides two optional serviceinterfaces which may be of use to your application:UserServiceandTokenService.

Registering a Custom Authentication Strategy

The registration and discovery of authentication strategies is possiblevia the Extension Point and Extensionspattern.

You don’t have to worry about the discovery of authentication strategies,this is taken care of by AuthenticationStrategyProvider which resolves andreturns an authentication strategy of type AuthenticationStrategy.

The AuthenticationStrategyProvider class (shown below) declares anextension point namedAuthenticationBindings.AUTHENTICATION_STRATEGY_EXTENSION_POINT_NAME via the@extensionPoint decorator. The binding scope is set to transient becausean authentication strategy may differ with each request.

With the aid of metadata of type AuthenticationMetadata (provided byAuthMetadataProvider and injected via the AuthenticationBindings.METADATAbinding key), the name of the authentication strategy, specified in the@authenticate decorator for this request, is obtained.

Then, with the aid of the @extensions() getter decorator,AuthenticationStrategyProvider is responsible for finding andreturning the authentication strategy which has that specific name andhas been registered as an extension of the aforementioned extensionpoint.

  1. @extensionPoint(
  2.   AuthenticationBindings.AUTHENTICATION_STRATEGY_EXTENSION_POINT_NAME,
  3.   {scope: BindingScope.TRANSIENT},
  4. ) //this needs to be transient, e.g. for request level context.
  5. export class AuthenticationStrategyProvider
  6.   implements Provider<AuthenticationStrategy | undefined> {
  7.   constructor(
  8.     @extensions()
  9.     private authenticationStrategies: Getter<AuthenticationStrategy[]>,
  10.     @inject(AuthenticationBindings.METADATA)
  11.     private metadata?: AuthenticationMetadata,
  12.   ) {}
  13.   async value(): Promise<AuthenticationStrategy | undefined> {
  14.     if (!this.metadata) {
  15.       return undefined;
  16.     }
  17.     const name = this.metadata.strategy;
  18.     const strategy = await this.findAuthenticationStrategy(name);
  19.     if (!strategy) {
  20.       // important to throw a non-protocol-specific error here
  21.       let error = new Error(`The strategy '${name}' is not available.`);
  22.       Object.assign(error, {
  23.         code: AUTHENTICATION_STRATEGY_NOT_FOUND,
  24.       });
  25.       throw error;
  26.     }
  27.     return strategy;
  28.   }
  30.   async findAuthenticationStrategy(name: string) {
  31.     const strategies = await this.authenticationStrategies();
  32.     const matchingAuthStrategy = strategies.find(a => a.name === name);
  33.     return matchingAuthStrategy;
  34.   }
  35. }

In order for your custom authentication strategy to be found, it needs to beregistered.

Registering a custom authentication strategy BasicAuthenticationStrategyas an extension of theAuthenticationBindings.AUTHENTICATION_STRATEGY_EXTENSION_POINT_NAME extensionpoint in an application application.ts is as simple as:

  1. import {registerAuthenticationStrategy} from '@loopback/authentication';
  3. export class MyApplication extends BootMixin(
  4.   ServiceMixin(RepositoryMixin(RestApplication)),
  5. ) {
  6.   constructor(options?: ApplicationConfig) {
  7.     super(options);
  9.     //...
  11.     registerAuthenticationStrategy(this, BasicAuthenticationStrategy);
  13.     //...
  14.   }
  15. }

Using Passport-based Strategies

The earlier version of @loopback/authentication is based on an expressmiddleware called passport, which supports 500+ passport strategies forverifying an express app’s requests. In @loopback/authentication@2.0, wedefined our own interface AuthenticationStrategy that describes a strategywith different contracts than the passport strategy, but we still want to keepthe ability to support those existing 500+ community passport strategies.Therefore, we rewrote the adapter class. It now converts a passport strategy tothe one that LoopBack 4 authentication system expects and it was released in anew package @loopback/authentication-passport.

Creating and registering a passport strategy is explained inthe README.md file

The usage of authentication decorator and the change in sequence stay the same.

Managing Custom Authentication Strategy Options

This is an optional step.

If your custom authentication strategy doesn’t require special options, you canskip this section.

As previously mentioned in theUsing the Authentication Decoratorsection, a custom authentication strategy should avoid repeatedly specifying itsdefault options in the @authenticate decorator. Instead, it shoulddefine its default options in one place, and only specify overridingoptions in the @authenticate decorator when necessary.

Here are the steps for accomplishing this.

Define the Options Interface and Binding Key

Define an options interface and a binding key for the default options of thatspecific authentication strategy.

  1. export interface AuthenticationStrategyOptions {
  2.   [property: string]: any;
  3. }
  5. export namespace BasicAuthenticationStrategyBindings {
  6.   export const DEFAULT_OPTIONS = BindingKey.create<
  7.     AuthenticationStrategyOptions
  8.   >('authentication.strategies.basic.defaultoptions');
  9. }

Bind the Default Options

Bind the default options of the custom authentication strategy to theapplication application.ts via theBasicAuthenticationStrategyBindings.DEFAULT_OPTIONS binding key.

In this hypothetical example, our custom authentication strategy has adefault option of gatherStatistics with a value of true. (In a realcustom authentication strategy, the number of options could be more numerous)

  1. export class MyApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     //...
  8.     this.bind(BasicAuthenticationStrategyBindings.DEFAULT_OPTIONS).to({
  9.       gatherStatistics: true,
  10.     });
  11.     //...
  12.   }
  13. }

Override Default Options In Authentication Decorator

Specify overriding options in the @authenticate decorator only when necessary.

In this example, we only specify an overriding option gatherStatisticswith a value of false for the /scareme endpoint. We use the defaultoption value for the /whoami endpoint.

  1. import {inject} from '@loopback/context';
  2. import {
  3.   AuthenticationBindings,
  4.   UserProfile,
  5.   authenticate,
  6. } from '@loopback/authentication';
  7. import {get} from '@loopback/rest';
  9. export class WhoAmIController {
  10.   constructor(
  11.     @inject(SecurityBindings.USER)
  12.     private userProfile: UserProfile,
  13.   ) {}
  15.   @authenticate('basic')
  16.   @get('/whoami')
  17.   whoAmI(): string {
  18.     return this.userProfile.id;
  19.   }
  21.   @authenticate('basic', {gatherStatistics: false})
  22.   @get('/scareme')
  23.   scareMe(): string {
  24.     return 'boo!';
  25.   }
  26. }

Update Custom Authentication Strategy to Handle Options

The custom authentication strategy must be updated to handle the loading ofdefault options, and overriding them if they have been specified in the@authenticate decorator.

Here is the updated BasicAuthenticationStrategy:

  1. import {
  2.   AuthenticationStrategy,
  3.   UserProfile,
  4.   TokenService,
  5.   AuthenticationMetadata,
  6.   AuthenticationBindings,
  7. } from '@loopback/authentication';
  8. import {Getter} from '@loopback/core';
  10. export interface Credentials {
  11.   username: string;
  12.   password: string;
  13. }
  15. export class BasicAuthenticationStrategy implements AuthenticationStrategy {
  16.   name: string = 'basic';
  18.   @inject(BasicAuthenticationStrategyBindings.DEFAULT_OPTIONS)
  19.   options: AuthenticationStrategyOptions;
  21.   constructor(
  22.     @inject(UserServiceBindings.USER_SERVICE)
  23.     private userService: UserService,
  24.     @inject.getter(AuthenticationBindings.METADATA)
  25.     readonly getMetaData: Getter<AuthenticationMetadata>,
  26.   ) {}
  28.   async authenticate(request: Request): Promise<UserProfile | undefined> {
  29.     const credentials: Credentials = this.extractCredentials(request);
  31.     await this.processOptions();
  33.     if (this.options.gatherStatistics === true) {
  34.       console.log(`\nGathering statistics...\n`);
  35.     } else {
  36.       console.log(`\nNot gathering statistics...\n`);
  37.     }
  39.     const user = await this.userService.verifyCredentials(credentials);
  40.     const userProfile = this.userService.convertToUserProfile(user);
  42.     return userProfile;
  43.   }
  45.   extractCredentials(request: Request): Credentials {
  46.     let creds: Credentials;
  48.     /**
  49.      * Code to extract the 'basic' user credentials from the Authorization header
  50.      */
  52.     return creds;
  53.   }
  55.   async processOptions() {
  56.     /**
  57.         Obtain the options object specified in the @authenticate decorator
  58.         of a controller method associated with the current request.
  59.         The AuthenticationMetadata interface contains : strategy:string, options?:object
  60.         We want the options property.
  61.     */
  62.     const controllerMethodAuthenticationMetadata = await this.getMetaData();
  64.     if (!this.options) this.options = {}; //if no default options were bound, assign empty options object
  66.     //override default options with request-level options
  67.     this.options = Object.assign(
  68.       {},
  69.       this.options,
  70.       controllerMethodAuthenticationMetadata.options,
  71.     );
  72.   }
  73. }

Inject default options into a property options using theBasicAuthenticationStrategyBindings.DEFAULT_OPTIONS binding key.

Inject a getter named getMetaData that returns AuthenticationMetadatausing the AuthenticationBindings.METADATA binding key. This metadata containsthe parameters passed into the @authenticate decorator.

Create a function named processOptions() that obtains the default options, andoverrides them with any request-level overriding options specified in the@authenticate decorator.

Then, in the authenticate() function of the custom authentication strategy,call the processOptions() function, and have the custom authenticationstrategy react to the updated options.

Summary

We’ve gone through the main steps for adding authentication to your LoopBack 4application.

Your application.ts should look similar to this:

  1. import {
  2.   AuthenticationComponent,
  3.   registerAuthenticationStrategy,
  4. } from '@loopback/authentication';
  6. export class MyApplication extends BootMixin(
  7.   ServiceMixin(RepositoryMixin(RestApplication)),
  8. ) {
  9.   constructor(options?: ApplicationConfig) {
  10.     super(options);
  12.     /* set up miscellaneous bindings */
  14.     //...
  16.     // load the authentication component
  17.     this.component(AuthenticationComponent);
  19.     // register your custom authentication strategy
  20.     registerAuthenticationStrategy(this, BasicAuthenticationStrategy);
  22.     // use your custom authenticating sequence
  23.     this.sequence(MyAuthenticatingSequence);
  25.     this.static('/', path.join(__dirname, '../public'));
  27.     this.projectRoot = __dirname;
  29.     this.bootOptions = {
  30.       controllers: {
  31.         dirs: ['controllers'],
  32.         extensions: ['.controller.js'],
  33.         nested: true,
  34.       },
  35.     };
  36.   }

You can find a completed example and tutorial of a LoopBack 4 shoppingcart application with JWT authenticationhere.