A LoopBack 4 application that uses JWT authentication

Overview

LoopBack 4 has an authentication package @loopback/authentication which allowsyou to secure your application’s API endpoints with custom authenticationstrategies and an @authenticate decorator.

This tutorial showcases how authentication was added to theloopback4-example-shoppingapplication by creating and registering a custom authentication strategybased on the JSON Web Token (JWT) approach.

Here is a brief summary of the JSON Web Token (JWT) approach.

JSON Web Token Authentication Overview

In the JSON Web Token (JWT) authentication approach, when the user providesthe correct credentials to a login endpoint, the server creates a JWTtoken and returns it in the response. The token is of type string andconsists of 3 parts: the header, the payload, and the signature.Each part is encrypted using a secret, and the parts are separated by aperiod.

For example:

  1. // {encrypted-header}.{encrypted-payload}.{encrypted-signature}
  2. eyJhbXVCJ9.eyJpZCI6Ij.I3wpRNCH4;
  3. // actual parts have been reduced in size for viewing purposes

Note:The payload can contain anythingthe application developer wants, but at the very least contains the user id. It should never contain the user password.

After logging in and obtaining this token, whenever the user attempts to accessa protected endpoint, the token must be provided in the Authorizationheader. The server verifies that the token is valid and not expired, and thenpermits access to the protected endpoint.

Please see JSON Web Token (JWT)for more details.

To view and run the completed loopback4-example-shopping application, followthe instructions in the Try it out section.

To understand the details of how JWT authentication can be added to a LoopBack 4application, read theAdding JWT Authentication to a LoopBack 4 Applicationsection.

Try it out

If you’d like to see the final results of this tutorial as an exampleapplication, follow these steps:

  • Start the application:
  1. git clone https://github.com/strongloop/loopback4-example-shopping.git
  2. cd loopback4-example-shopping
  3. npm install
  4. npm run docker:start
  5. npm start

Wait until you see:

  1. Recommendation server is running at http://127.0.0.1:3001.
  2. Server is running at http://[::1]:3000
  3. Try http://[::1]:3000/ping

  • In a browser, navigate to http://[::1]:3000 orhttp://127.0.0.1:3000, and click on /explorer toopen the API Explorer.

  • In the UserController section, click on POST /users, click on'Try it out', specify:

  1. {
  2. "id": "1",
  3. "email": "user1@example.com",
  4. "password": "thel0ngp@55w0rd",
  5. "firstName": "User",
  6. "lastName": "One"
  7. }

and click on 'Execute' to add a new user named 'User One'.

  • In the UserController section, click on POST /users/login, click on'Try it out', specify:
  1. {
  2.   "email":    "user1@example.com",
  3.   "password": "thel0ngp@55w0rd"
  4. }

and click on 'Execute' to log in as 'User One'.

A JWT token is sent back in the response.

For example:

  1. {
  2.   "token": "some.token.value"
  3. }
  • Perform a GET request on the secured endpoint /users/me making sure toprovide the JWT token in the Authorization header. If authenticationsucceeds, theuser profileof the currently authenticated user will be returned in the response. Ifauthentication fails due to a missing/invalid/expired token, anHTTP 401 UnAuthorizedis thrown.
  1. curl -X GET \
  2. --header 'Authorization: Bearer some.token.value' \
  3. http://127.0.0.1:3000/users/me

The response is:

  1. {"id":"1","name":"User One"}

Adding JWT Authentication to a LoopBack 4 Application

In this section, we will demonstrate how authentication was added to theloopback4-example-shoppingapplication using theJSON Web Token (JWT) approach.

Installing @loopback/authentication

The loopback4-example-shopping application already has the@loopback/authentication dependency set up in its package.json

It was installed as a project dependency by performing:

  1. npm install --save @loopback/authentication

Adding the AuthenticationComponent to the Application

The core of authentication framework is found in theAuthenticationComponent,so it is important to add the component in the ShoppingApplication class inloopback4-example-shopping/packages/shopping/src/application.ts.

  1. import {
  2.   AuthenticationComponent
  3. } from '@loopback/authentication';
  5. export class ShoppingApplication extends BootMixin(
  6.   ServiceMixin(RepositoryMixin(RestApplication)),
  7. ) {
  8.   constructor(options?: ApplicationConfig) {
  9.     super(options);
  11.     // ...
  13.     // Bind authentication component related elements
  14.     this.component(AuthenticationComponent);
  16.     // ...

Securing an Endpoint with 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)

In the loopback4-example-shopping application, there is only one endpoint thatis secured.

In the UserController class in theloopback4-example-shopping/packages/shopping/src/controllers/user.controller.ts,a user can print out his/her user profile by performing a GET request on the/users/me endpoint which is handled by the printCurrentUser() function.

  1.   // ...
  3.   @get('/users/me', {
  4.     responses: {
  5.       '200': {
  6.         description: 'The current user profile',
  7.         content: {
  8.           'application/json': {
  9.             schema: UserProfileSchema,
  10.           },
  11.         },
  12.       },
  13.     },
  14.   })
  15.   @authenticate('jwt')
  16.   async printCurrentUser(
  17.     @inject(SecurityBindings.USER)
  18.     currentUserProfile: UserProfile,
  19.   ): Promise<UserProfile> {
  20.     return currentUserProfile;
  21.   }
  23.   // ...

Note:Since this controller method is obtaining CURRENT_USER via method injection (instead of constructor injection) and this method is decorated with the @authenticate decorator, there is no need to specify @inject(SecurityBindings.USER, {optional:true}). See Using the Authentication Decorator for details.

The /users/me endpoint is decorated with

  1. @authenticate('jwt')

and authentication will only succeed if a valid JWT token is provided in theAuthorization header of the request.

Basically, theAuthenticateFnaction in the custom sequence MyAuthenticationSequence (discussed in a latersection) asksAuthenticationStrategyProviderto resolve the registered authentication strategy with the name 'jwt' (whichis JWTAuthenticationStrategy and discussed in a later section). ThenAuthenticateFn calls JWTAuthenticationStrategy’s authenticate(request)function to authenticate the request.

If the provided JWT token is valid, then JWTAuthenticationStrategy’sauthenticate(request) function returns the user profile. AuthenticateFn thenplaces the user profile on the request context using the SecurityBindings.USERbinding key. The user profile is available to the printCurrentUser()controller function in a variable currentUserProfile: UserProfile throughdependency injection via the same SecurityBindings.USER binding key. The userprofile is returned in the response.

If the JWT token is missing/expired/invalid, then JWTAuthenticationStrategy’sauthenticate(request) function fails and anHTTP 401 UnAuthorizedis thrown.

If an unknown authentication strategy name is specified in the@authenticate decorator:

  1. @authenticate('unknown')

thenAuthenticationStrategyProvider’sfindAuthenticationStrategy(name: string) function cannot find a registeredauthentication strategy by that name, and anHTTP 401 UnAuthorizedis thrown.

So, be sure to specify the correct authentication strategy name when decoratingyour endpoints with the @authenticate decorator.

Creating a Custom Sequence and Adding the Authentication Action

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

Authentication is not part of the default sequence of actions, so you mustcreate a custom sequence and add the authentication action.

The custom sequence MyAuthenticationSequence inloopback4-example-shopping/packages/shopping/src/sequence.ts implements theSequenceHandlerinterface.

  1. export class MyAuthenticationSequence 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. }

The authentication action/function is injected via theAuthenticationBindings.AUTH_ACTION binding key, is given the nameauthenticateRequest and has the typeAuthenticateFn.

Calling

  1. await this.authenticateRequest(request);

before

  1. // ...
  2. const result = await this.invoke(route, args);
  3. this.send(response, result);
  4. // ...

ensures that authentication has succeeded before a controller endpoint isreached.

To add the custom sequence MyAuthenticationSequence in the application, wemust code the following inloopback4-example-shopping/packages/shopping/src/application.ts:

  1. export class ShoppingApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     // ...
  9.     // Set up the custom sequence
  10.     this.sequence(MyAuthenticationSequence);
  12.     // ...
  13.   }
  14. }

Creating a Custom JWT Authentication Strategy

When creating a custom authentication strategy, it is necessary to implement theAuthenticationStrategyinterface.

A custom JWT authentication strategy JWTAuthenticationStrategy inloopback4-example-shopping/packages/shopping/src/authentication-strategies/jwt-strategy.tswas implemented as follows:

  1. import {inject} from '@loopback/context';
  2. import {HttpErrors, Request} from '@loopback/rest';
  3. import {
  4.   AuthenticationStrategy,
  5.   UserProfile,
  6.   TokenService,
  7. } from '@loopback/authentication';
  8. import {TokenServiceBindings} from '../keys';
  10. export class JWTAuthenticationStrategy implements AuthenticationStrategy {
  11.   name: string = 'jwt';
  13.   constructor(
  14.     @inject(TokenServiceBindings.TOKEN_SERVICE)
  15.     public tokenService: TokenService,
  16.   ) {}
  18.   async authenticate(request: Request): Promise<UserProfile | undefined> {
  19.     const token: string = this.extractCredentials(request);
  20.     const userProfile: UserProfile = await this.tokenService.verifyToken(token);
  21.     return userProfile;
  22.   }
  24.   extractCredentials(request: Request): string {
  25.     if (!request.headers.authorization) {
  26.       throw new HttpErrors.Unauthorized(`Authorization header not found.`);
  27.     }
  29.     // for example: Bearer xxx.yyy.zzz
  30.     const authHeaderValue = request.headers.authorization;
  32.     if (!authHeaderValue.startsWith('Bearer')) {
  33.       throw new HttpErrors.Unauthorized(
  34.         `Authorization header is not of type 'Bearer'.`,
  35.       );
  36.     }
  38.     //split the string into 2 parts: 'Bearer ' and the `xxx.yyy.zzz`
  39.     const parts = authHeaderValue.split(' ');
  40.     if (parts.length !== 2)
  41.       throw new HttpErrors.Unauthorized(
  42.         `Authorization header value has too many parts. It must follow the pattern: 'Bearer xx.yy.zz' where xx.yy.zz is a valid JWT token.`,
  43.       );
  44.     const token = parts[1];
  46.     return token;
  47.   }
  48. }

It has a name 'jwt', and it implements theasync authenticate(request: Request): Promise<UserProfile | undefined>function.

An extra function extractCredentials(request: Request): string was added toextract the JWT token from the request. This authentication strategy expectsevery request to pass a valid JWT token in the Authorization header.

JWTAuthenticationStrategy also makes use of a token service tokenService oftype TokenService that is injected via theTokenServiceBindings.TOKEN_SERVICE binding key. It is used to verify thevalidity of the JWT token and return a user profile.

This token service is explained in a later section.

Registering the Custom JWT Authentication Strategy

To register the custom authentication strategy JWTAuthenticationStrategy withthe name 'jwt' as a part of the authentication framework, we need to codethe following inloopback4-example-shopping/packages/shopping/src/application.ts.

  1. import {registerAuthenticationStrategy} from '@loopback/authentication';
  3. export class ShoppingApplication extends BootMixin(
  4.   ServiceMixin(RepositoryMixin(RestApplication)),
  5. ) {
  6.   constructor(options?: ApplicationConfig) {
  7.     super(options);
  8.     // ...
  9.     registerAuthenticationStrategy(this, JWTAuthenticationStrategy);
  10.     // ...
  11.   }
  12. }

Creating a Token Service

The token service JWTService inloopback4-example-shopping/packages/shopping/src/services/jwt-service.tsimplements an optional helperTokenServiceinterface.

  1. import {inject} from '@loopback/context';
  2. import {HttpErrors} from '@loopback/rest';
  3. import {promisify} from 'util';
  4. import {TokenService, UserProfile} from '@loopback/authentication';
  5. import {TokenServiceBindings} from '../keys';
  7. const jwt = require('jsonwebtoken');
  8. const signAsync = promisify(jwt.sign);
  9. const verifyAsync = promisify(jwt.verify);
  11. export class JWTService implements TokenService {
  12.   constructor(
  13.     @inject(TokenServiceBindings.TOKEN_SECRET)
  14.     private jwtSecret: string,
  15.     @inject(TokenServiceBindings.TOKEN_EXPIRES_IN)
  16.     private jwtExpiresIn: string,
  17.   ) {}
  19.   async verifyToken(token: string): Promise<UserProfile> {
  20.     if (!token) {
  21.       throw new HttpErrors.Unauthorized(
  22.         `Error verifying token: 'token' is null`,
  23.       );
  24.     }
  26.     let userProfile: UserProfile;
  28.     try {
  29.       // decode user profile from token
  30.       const decryptedToken = await verifyAsync(token, this.jwtSecret);
  31.       // don't copy over  token field 'iat' and 'exp', nor 'email' to user profile
  32.       userProfile = Object.assign(
  33.         {id: '', name: ''},
  34.         {id: decryptedToken.id, name: decryptedToken.name},
  35.       );
  36.     } catch (error) {
  37.       throw new HttpErrors.Unauthorized(
  38.         `Error verifying token: ${error.message}`,
  39.       );
  40.     }
  42.     return userProfile;
  43.   }
  45.   async generateToken(userProfile: UserProfile): Promise<string> {
  46.     if (!userProfile) {
  47.       throw new HttpErrors.Unauthorized(
  48.         'Error generating token: userProfile is null',
  49.       );
  50.     }
  52.     // Generate a JSON Web Token
  53.     let token: string;
  54.     try {
  55.       token = await signAsync(userProfile, this.jwtSecret, {
  56.         expiresIn: Number(this.jwtExpiresIn),
  57.       });
  58.     } catch (error) {
  59.       throw new HttpErrors.Unauthorized(`Error encoding token: ${error}`);
  60.     }
  62.     return token;
  63.   }
  64. }

JWTService generates or verifies JWT tokens using the sign and verifyfunctions of jsonwebtoken.

It makes use of jwtSecret and jwtExpiresIn string values that areinjected via the TokenServiceBindings.TOKEN_SECRET and theTokenServiceBindings.TOKEN_EXPIRES_IN binding keys respectively.

The async generateToken(userProfile: UserProfile): Promise<string> functiontakes in a user profile of typeUserProfile,generates a JWT token of type string using: the user profile as thepayload, jwtSecret and jwtExpiresIn.

The async verifyToken(token: string): Promise<UserProfile> function takes in aJWT token of type string, verifies the JWT token, and returns the payload ofthe token which is a user profile of type UserProfile.

To bind the JWT secret, expires in values and the JWTService class tobinding keys, we need to code the following inloopback4-example-shopping/packages/shopping/src/application.ts:

  1. export class ShoppingApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     // ...
  8.     this.setUpBindings();
  9.     // ...
  10.   }
  12.   setUpBindings(): void {
  13.     // ...
  15.     this.bind(TokenServiceBindings.TOKEN_SECRET).to(
  16.       TokenServiceConstants.TOKEN_SECRET_VALUE,
  17.     );
  19.     this.bind(TokenServiceBindings.TOKEN_EXPIRES_IN).to(
  20.       TokenServiceConstants.TOKEN_EXPIRES_IN_VALUE,
  21.     );
  23.     this.bind(TokenServiceBindings.TOKEN_SERVICE).toClass(JWTService);
  25.     // ...
  26.   }
  27. }

In the code above, TOKEN_SECRET_VALUE has a value of 'myjwts3cr3t' andTOKEN_EXPIRES_IN_VALUE has a value of '600'.

JWTService is used in two places within the application:JWTAuthenticationStrategy inloopback4-example-shopping/packages/shopping/src/authentication-strategies/jwt-strategy.ts,and UserController inloopback4-example-shopping/packages/shopping/src/controllers/user.controller.ts.

Creating a User Service

The user service MyUserService inloopback4-example-shopping/packages/shopping/src/services/user-service.tsimplements an optional helperUserServiceinterface.

  1. export class MyUserService implements UserService<User, Credentials> {
  2.   constructor(
  3.     @repository(UserRepository) public userRepository: UserRepository,
  4.     @inject(PasswordHasherBindings.PASSWORD_HASHER)
  5.     public passwordHasher: PasswordHasher,
  6.   ) {}
  8.   async verifyCredentials(credentials: Credentials): Promise<User> {
  9.     const foundUser = await this.userRepository.findOne({
  10.       where: {email: credentials.email},
  11.     });
  13.     if (!foundUser) {
  14.       throw new HttpErrors.NotFound(
  15.         `User with email ${credentials.email} not found.`,
  16.       );
  17.     }
  18.     const passwordMatched = await this.passwordHasher.comparePassword(
  19.       credentials.password,
  20.       foundUser.password,
  21.     );
  23.     if (!passwordMatched) {
  24.       throw new HttpErrors.Unauthorized('The credentials are not correct.');
  25.     }
  27.     return foundUser;
  28.   }
  30.   convertToUserProfile(user: User): UserProfile {
  31.     // since first name and lastName are optional, no error is thrown if not provided
  32.     let userName = '';
  33.     if (user.firstName) userName = `${user.firstName}`;
  34.     if (user.lastName)
  35.       userName = user.firstName
  36.         ? `${userName} ${user.lastName}`
  37.         : `${user.lastName}`;
  38.     return {id: user.id, name: userName};
  39.   }
  40. }

The async verifyCredentials(credentials: Credentials): Promise<User> functiontakes in a credentials of typeCredentials,and returns a user of typeUser.It searches through an injected user repository of type UserRepository.

The convertToUserProfile(user: User): UserProfile function takes in a userof type User and returns a user profile of typeUserProfile.A user profile, in this case, is the minimum set of user properties whichindentify an authenticated user.

MyUserService is used in by UserController inloopback4-example-shopping/packages/shopping/src/controllers/user.controller.ts.

To bind the MyUserService class, and the password hashing utility it uses, tobinding keys, we need to code the following inloopback4-example-shopping/packages/shopping/src/application.ts:

  1. export class ShoppingApplication extends BootMixin(
  2.   ServiceMixin(RepositoryMixin(RestApplication)),
  3. ) {
  4.   constructor(options?: ApplicationConfig) {
  5.     super(options);
  7.     // ...
  9.     this.setUpBindings();
  11.     // ...
  12.   }
  14.   setUpBindings(): void {
  15.     // ...
  17.     // Bind bcrypt hash services - utilized by 'UserController' and 'MyUserService'
  18.     this.bind(PasswordHasherBindings.ROUNDS).to(10);
  19.     this.bind(PasswordHasherBindings.PASSWORD_HASHER).toClass(BcryptHasher);
  21.     this.bind(UserServiceBindings.USER_SERVICE).toClass(MyUserService);
  23.     // ...
  24.   }
  25. }

Adding Users

In the UserController class in theloopback4-example-shopping/packages/shopping/src/controllers/user.controller.ts,users can be added by performing a POST request to the /users endpoint whichis handled by the create() function.

  1. export class UserController {
  2.   constructor(
  3.     // ...
  4.     @repository(UserRepository) public userRepository: UserRepository,
  5.     @inject(PasswordHasherBindings.PASSWORD_HASHER)
  6.     public passwordHasher: PasswordHasher,
  7.     @inject(TokenServiceBindings.TOKEN_SERVICE)
  8.     public jwtService: TokenService,
  9.     @inject(UserServiceBindings.USER_SERVICE)
  10.     public userService: UserService<User, Credentials>,
  11.   ) {}
  13.   // ...
  15.   @post('/users')
  16.   async create(@requestBody() user: User): Promise<User> {
  17.     // ensure a valid email value and password value
  18.     validateCredentials(_.pick(user, ['email', 'password']));
  20.     // encrypt the password
  21.     user.password = await this.passwordHasher.hashPassword(user.password);
  23.     // create the new user
  24.     const savedUser = await this.userRepository.create(user);
  25.     delete savedUser.password;
  27.     return savedUser;
  28.   }
  30.   // ...

A user of typeUseris added to the database via the user repository if the user’s email andpassword values are in an acceptable format.

Issuing a JWT Token on Successful Login

In the UserController class in theloopback4-example-shopping/packages/shopping/src/controllers/user.controller.ts,a user can log in by performing a POST request, containing an email andpassword, to the /users/login endpoint which is handled by the login()function.

  1. export class UserController {
  2.   constructor(
  3.     // ...
  4.     @repository(UserRepository) public userRepository: UserRepository,
  5.     @inject(PasswordHasherBindings.PASSWORD_HASHER)
  6.     public passwordHasher: PasswordHasher,
  7.     @inject(TokenServiceBindings.TOKEN_SERVICE)
  8.     public jwtService: TokenService,
  9.     @inject(UserServiceBindings.USER_SERVICE)
  10.     public userService: UserService<User, Credentials>,
  11.   ) {}
  13.   // ...
  15.   @post('/users/login', {
  16.     responses: {
  17.       '200': {
  18.         description: 'Token',
  19.         content: {
  20.           'application/json': {
  21.             schema: {
  22.               type: 'object',
  23.               properties: {
  24.                 token: {
  25.                   type: 'string',
  26.                 },
  27.               },
  28.             },
  29.           },
  30.         },
  31.       },
  32.     },
  33.   })
  34.   async login(
  35.     @requestBody(CredentialsRequestBody) credentials: Credentials,
  36.   ): Promise<{token: string}> {
  37.     // ensure the user exists, and the password is correct
  38.     const user = await this.userService.verifyCredentials(credentials);
  40.     // convert a User object into a UserProfile object (reduced set of properties)
  41.     const userProfile = this.userService.convertToUserProfile(user);
  43.     // create a JSON Web Token based on the user profile
  44.     const token = await this.jwtService.generateToken(userProfile);
  46.     return {token};
  47.   }
  48. }

The user service returns a user object when the email and password are verifiedas valid; otherwise it throws anHTTP 401 UnAuthorized.The user service is then called to create a slimmer user profile from the userobject. Then this user profile is used as the payload of the JWT token createdby the token service. The token is returned in the response.

Summary

We’ve gone through the steps that were used to add JWT authentication to theloopback4-example-shopping application.

The final ShoppingApplication class inloopback4-example-shopping/packages/shopping/src/application.tsshould look like this:

  1. import {BootMixin} from '@loopback/boot';
  2. import {ApplicationConfig, BindingKey} from '@loopback/core';
  3. import {RepositoryMixin} from '@loopback/repository';
  4. import {RestApplication} from '@loopback/rest';
  5. import {ServiceMixin} from '@loopback/service-proxy';
  6. import {MyAuthenticationSequence} from './sequence';
  7. import {
  8.   TokenServiceBindings,
  9.   UserServiceBindings,
  10.   TokenServiceConstants,
  11. } from './keys';
  12. import {JWTService} from './services/jwt-service';
  13. import {MyUserService} from './services/user-service';
  15. import * as path from 'path';
  16. import {
  17.   AuthenticationComponent,
  18.   registerAuthenticationStrategy,
  19. } from '@loopback/authentication';
  20. import {PasswordHasherBindings} from './keys';
  21. import {BcryptHasher} from './services/hash.password.bcryptjs';
  22. import {JWTAuthenticationStrategy} from './authentication-strategies/jwt-strategy';
  24. /**
  25.  * Information from package.json
  26.  */
  27. export interface PackageInfo {
  28.   name: string;
  29.   version: string;
  30.   description: string;
  31. }
  32. export const PackageKey = BindingKey.create<PackageInfo>('application.package');
  34. const pkg: PackageInfo = require('../package.json');
  36. export class ShoppingApplication extends BootMixin(
  37.   ServiceMixin(RepositoryMixin(RestApplication)),
  38. ) {
  39.   constructor(options?: ApplicationConfig) {
  40.     super(options);
  42.     this.setUpBindings();
  44.     // Bind authentication component related elements
  45.     this.component(AuthenticationComponent);
  47.     registerAuthenticationStrategy(this, JWTAuthenticationStrategy);
  49.     // Set up the custom sequence
  50.     this.sequence(MyAuthenticationSequence);
  52.     // Set up default home page
  53.     this.static('/', path.join(__dirname, '../public'));
  55.     this.projectRoot = __dirname;
  56.     // Customize @loopback/boot Booter Conventions here
  57.     this.bootOptions = {
  58.       controllers: {
  59.         // Customize ControllerBooter Conventions here
  60.         dirs: ['controllers'],
  61.         extensions: ['.controller.js'],
  62.         nested: true,
  63.       },
  64.     };
  65.   }
  67.   setUpBindings(): void {
  68.     // Bind package.json to the application context
  69.     this.bind(PackageKey).to(pkg);
  71.     this.bind(TokenServiceBindings.TOKEN_SECRET).to(
  72.       TokenServiceConstants.TOKEN_SECRET_VALUE,
  73.     );
  75.     this.bind(TokenServiceBindings.TOKEN_EXPIRES_IN).to(
  76.       TokenServiceConstants.TOKEN_EXPIRES_IN_VALUE,
  77.     );
  79.     this.bind(TokenServiceBindings.TOKEN_SERVICE).toClass(JWTService);
  81.     // // Bind bcrypt hash services
  82.     this.bind(PasswordHasherBindings.ROUNDS).to(10);
  83.     this.bind(PasswordHasherBindings.PASSWORD_HASHER).toClass(BcryptHasher);
  85.     this.bind(UserServiceBindings.USER_SERVICE).toClass(MyUserService);
  86.   }
  87. }

Running the Completed Application

To run the completed application, follow the instructions in theTry it out section.

For more information, please visitAuthentication Component.

Bugs/Feedback

Open an issue inloopback4-example-shoppingand we’ll take a look!

Contributions

Tests

Run npm test from the root folder.

Contributors

Seeall contributors.

License

MIT