/OoI-Intern-Assessment

Primary LanguageJavaScript

UNICEF Office of Innovation Intern Assessment

Go as far as you can in the allotted time.

  1. Fork the repository
  2. Clone your forked repository
  3. npm install && cd client; npm install
  4. Setup and configure a database as per the configuration included in the repo
  5. Create a new branch fullstack-assesment
  6. To start the server: node index.js
  7. To start the client: cd client; npm run start

Submission

Problem statement

Once our users log in to the application, we want to store the history of the date/time of the login in a database for auditing purposes. After logging in, show a user profile and a chart that displays the number of times they logged in for each date.

Business requirements

  • The system must be able to collect and store data about authentication events
  • An authenticated user must be able to see in their profile page, a chart of login counts per date

Implementation

Initial assessment

  • The application is a typical SPA with Node.js backend and MongoDB as database
  • It suffers of the usual problem with open source projects. The initial development environment is not easy to configure if you are not a MERN stack developer
  • My initial attempt was to setup a reproducible development environment that allows me to come back to the project some months later without worrying about Node.js/Mongo versions. Also this is the initial steps to have an isolated dev environment that can be use in a CI/CD pipeline
  • I'm aware that this is a sample application but the current security setup is not great
    • Passwords are stored in plain text in the database
    • The authentication setup is just a plain-text string stored in LocalStorage in the browser that defines if you're authenticated or not

Audit events

  • Based on the requirements to store a history of logins, we created a new Event entity (events in the database) to store the login events
  • This new Event entity records the username, date/time, but also the type of event: login_sucess, login_failure for now
  • Based on the open nature of the type property, we can store more relevant system level events for auditing purposes in the future

Logins per date

  • We added as part of the profile page a simple bar chart from the Recharts library.
  • We chose Recharts because was easy enough to start with. Depending on the requirements more sophisticated libraries can be used later.
  • We use useEffect and useState React hooks, to deal with asynchronous data fetching

Security note

  • We didn't implement any form of authentication in the new /api/users/:username/stats since the whole authentication system is weak. Something like OpenID Connect and JWT Bearer tokens can solve the problem. Delegating the authentication to an Identity Provider and doing a local JWT token verification in the backend.