Project made to registrate an understandment about implementation of an Angular mfa application. In this project, it used two concepts, one of them is authentication token by sending directly to the user email the temporary token, and the another one is authentication with QrCode using a mobile app (preferably Google Authenticator ) to read the QrCode and generate the secret token.
Was used Angular to made the frontend part of this project, divide it in the follow segment:
./src
βββ src
β βββ app
β βββ infrastructure
β β βββ utils.ts
β βββ services
β β βββ auth
β β βββ auth.service.ts // requests and the mock
β β
β βββ shared
β β βββmultifactorauth
β β β
β β βββauthTokenAuthentication // component authentication by email
β β β
β β βββgoogleAuthentication // component authentication by QrCode
β β β
β β βββmultifactorauth.component.html
β β βββmultifactorauth.component.ts
βββββββββββ views
β βββ login
β βββ dashboard
βββ app-routing.module.ts
βββ app-component.html
βββ app-component.scss
βββ app.component.ts
βββ app.module.ts
User Interface
QrCode Generator
TOTP Generator and Validator of secret token
API REST FAKE
- clone the repository to your machine:
git clone https://github.com/Marincor/multi-factor-auth_lab.git
; - go to the path of the project and run the command to download the dependencies:
npm install
oryarn install
; - in the root create a file called db.json and follow the db.example.json in this repository to guides you, conform you will use the application it will be filled like if beeing an api, using the fake api from json-server:
{
"authToken": [
{
"email": "AN_EMAIL",
"password": "AN_PASSWORD",
"generatedToken": 0,
"id": 1
}
],
"authGoogleGenerate": [
{
"id": "LOGGED_EMAIL",
"temp_secret": "TEMP_SECRET"
}
],
"authGoogleAuthenticated": [
{
"id": "LOGGED_EMAIL",
"secret": "TEMP_SECRET TURNED PERMANENT_SECRET"
}
]
}
- in the /src/environments/ create a file environment.ts and follow environment.example.ts in this repository to guides you, complete the apiBaseUrl with 'http://localhost:3000' if you will use json-server to create a local server or filled it with the real api url;
- to run the json-server and it create the server to your db.json run
npx json-server --watch db.json
, the default door of json-server is 3000; - to run your angular project run
npm start
.