AuthMFA -

lab project to implements Multi-factor authentication

🛈 About

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.

🏢 Architeture

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

📚 Libraries

• 👤 PrimeNG

User Interface

• node QrCode

QrCode Generator

• 🔑 OTPAuth

TOTP Generator and Validator of secret token

• ☁️ JSON-Server

API REST FAKE

⚙️ Instructions and configurations

• 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 or yarn 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.