Project: Silent MFA – 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 Silent MFA has been enabled in the Main Settings within your Console application.

Further, you will need to refer to settings available from the Console Application Details for values required to configure your server application.

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 makes use of the @haventec/mfa-client SDK. Please ensure you have run npm install to load this library.

The HaventecMfaClient client class is configured with urls corresponding to backend service routes, as well as polling preferences. When used in conjunction with the authenticate-node-server NodeJs implementation, the config object would look something like this:

new newHaventecMfaClient({
        pollTimeInMs:5000,
        checkUrl:"http://localhost:8081/smfa/check",
        registerUrl:"http://localhost:8081/smfa/register",
        loginUrl:"http://localhost:8081/smfa/login",
        restartPollOnLogin:true
    });

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

Magic Link

When your project application is running and you have been prompted for a username and password, a magic-link will be emailed to your nominated address. This link will activate a new or existing user on a new or existing device. Once you have received an email, click this link. You can then return to your running application, which will have been redirected to your landing page.

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.
>interfaces	Various interfaces corresponding to individual pages and the service calls and responses associated with them.	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>login	Login:	A new or existing user can login from this page. 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.
>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 @haventec/mfa-client SDK HaventecMfaClient This implementation calls the loginWithRegisterFallback method, providing a Config object with the following interface: { checkUrl: string; registerUrl: string; loginUrl: string; proxy?: AxiosProxyConfig; pollTimeInMs: number; restartPollOnLogin: boolean; } The SDK coordinates the login and registration process and redirects to specified server routes as required. You can find more information about the sample Node.js server here: authenticate-node-server	Form parameters are passed in from the login page. The @haventec/mfa-client SDK is configured with URLs and other information it needs to coordinate the login / registration process. Service response is returned to the Login component, which navigates to the landing page upon successful Login. Server outage, network errors and service errors are caught and handled by the service SDK instance invocation.

>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.