Project: Haventec JWT (Direct Api Mode) – Support Center

Assumptions

This guide assumes proficiency in web application development using Angular, Typescript and Node.js

Stack: Angular 14, bootstrap, font-awesome, rxjs, TypeScript and Node.js. See package.json for more information

This reference code assumes that Haventec JWT (Direct Api Mode) has been selected while creating your application in Console. Further, you will need to refer to settings available from the Console Application Details for values required to configure your front-end application and your server.

Before you start

Please review the following articles before continuing:

Sample Applications

Angular Applications

You will need to have signed up your organisation in Haventec Console 2.0.

Further, you will need to have created an application which you would like to authenticate with Haventec.

Configure

Front-end project:

Your front-end network service will require the application's provisioned applicationUuid value. You will find this in your application details within Console 2.0.

Assign this value to the APPLICATION_UUID constant in your application code. An example of this can be found in the application.constants.ts file of the reference projects, described below.

Server:

Be sure to configure your local server in proxy.conf.json in the root of the the authenticate-angular-sdk folder. By default this is set to target the localhost port on which the authenticate-node-server instance will run. See authenticate-node-server for configuration details.

Running your project application

Server tokens

When your project application is running, 6-digit authentication numbers (tokens) will be requested for entry by the user. These tokens will be generated and displayed in the Node.js console log, or wherever your server logs to. Cut and paste to complete the authentication. Alternatively you can configure a mail server to send these tokens via email. Use these where prompted.

README

Please refer to the README.md files within each workspace directory for information on how to install, configure and run your project application and server.

Reference Code Overview

The >src folder of this project contains the application, assets and configuration files. Each will be explored in turn.

Please refer to the actual code pertaining to each resource mentioned for this project.

>app

Resource	Description	Details
app-routing.module.ts	Maps paths to components Defaults to landing-page (see below)	<router-outlet> for this routing module is contained in app.component.html Pages are generally loaded in response to navigation commands within components following network activity.
>constants application.constants.ts	Implementation specific configuration properties.	APPLICATION_UUID: string Please assign the Application UUID you received from Haventec Console You can find out where to locate these values for your application here: Application Details
>interfaces	Various interfaces corresponding to individual pages and the service calls and responses associated with them. Note that the properties used for the various service calls may be a subset of those available in the Haventec Authenticate APIs	The interfaces provide definitions corresponding to: objects passed from components to services. objects containing values forming the body of service calls which are passed to the proxy server or sent directly to the Haventec Authenticate APIs. objects received as responses from the various calls.
>pages>landing-page	Default route component which lists available options:	Upon selection, the user is routed to the relevant page: Add a User to this Device: Users not yet registered with this device can do so Add a Device for Existing user: Existing user can register with this device Reset your PIN on this device: Existing users previously registered with device can change their PIN Login: Existing users which have previously registered on this device can login with their username and PIN
>pages>login	Login:	A user who has previously registered with the current device can enter their unique username and their registered PIN to pass the authentication check All fields are required. The login username is assigned to current-user in local storage. Where authentication is successful the user is routed to the welcome page. In this case the welcome page is not protected. Your implementation would provide logic to guard against accessing this page until authentication is complete and the appropriate authorisation is checked.
>pages>add-user	Add a User to this Device	The user enters a username unique to this device, as well as an email address to which an activation code will be generated (when configured server side, this can be emailed to the user at the given address). Fields are required and email is validated against in-built Angular Validator. The add-user username is assigned to current-user in local storage. The Add User button remains disabled until both input fields contain valid values. Upon successful response from the server, response data is committed to local storage and the app is routed to activate-user.
>pages>activate-user		Following a user being added to the device, an activation code is generated and optionally returned by the service or emailed to the user. All fields are required. Once the user enters this code and completes PIN entry and confirmation, authentication is complete, and the user is registered with the device. Upon successful response from the server, response data is committed to local storage and the app is routed to the welcome page. In this case the welcome page is not protected. Your implementation would provide logic to guard against accessing this page until authentication is complete and the appropriate authorisation is checked.
>pages>add-device	Add a Device for an Existing User	Where the user has previously registered on another device but not the current device, this option allows registration of that user on the current device using their existing username. The add-device username is assigned to current-user in local storage. This name must be unique to this device. Where this is not the case, the server will generate and return an error, and the user will need to register which a different name.
>pages>activate-device		Following a user providing an existing username, an activation code is generated and optionally returned by the service or emailed to the user. All fields are required. Once the user enters this code and completes PIN entry and confirmation, authentication is complete, and the device is registered with the user. Upon successful response from the server, response data is committed to local storage and the app is routed to the welcome page. In this case the welcome page is not protected. Your implementation would provide logic to guard against accessing this page until authentication is complete and the appropriate authorisation is checked.
>pages>change-pin	Reset your PIN on this Device	To change an existing PIN associated with a username on this device. The change-pin username is assigned to current-user in local storage. Once submitted, a pin reset token will be generated and optionally returned in the server response or emailed to the user.
>pages>reset-pin		Once in receipt of the pin reset token, the user completes the form by entering this code, their new PIN and the confirmation PIN. All fields are required. Upon successful response from the server, response data is committed to local storage and the app is routed to the welcome page. In this case the welcome page is not protected. Your implementation would provide logic to guard against accessing this page until authentication is complete and the appropriate authorisation is checked.
>services auth.service.ts	This service provides handles to access the Haventec Authenticate SDK local storage utilities.	Information about this SDK is available at the following github repo page: https://github.com/Haventec/authenticate-web-sdk
>services authenticate.api.service.ts	Provides access to server endpoints. This implementation makes requests to a Node.js server to proxy calls to the Haventec Authentication SaaS services, and provide email services. You can find more information about the sample Node.js server here: authenticate-node-server	Form parameters are passed in from relevant components. Additional fields such as applicationUuid, deviceUuid etc are appended The Angular HttpClient is used to POST form data to relevant endpoints Service response is returned to the calling component. Service outage and other network errors are handled silently while server errors are forwarded to the calling component for handling.

>assets

Logos, fonts and font face definitions, and various styling definitions are provided as placeholders for your own styles

Configuration

Files sitting at the root of the >src folder are those typically found in Angular applications. Please refer to relevant web training resources for more information.