ToDo

• infinite scroll
  • https://stackoverflow.com/questions/67624601/how-to-implement-infinite-scroll-in-next-js
• authentication with Google
  • https://www.telerik.com/blogs/how-to-implement-google-authentication-nextjs-app-using-nextauth
• multi-user support
• bill amount entry
  • monthly bill amount summery
• build & deploy via docker

Authentication

Authentication consists of the following parts:

• next-auth boilerplate
  • middleware.ts = hooks-up next-auth into the page processing pipeline
    • auth.config.ts = defines how user session is to be checked and redirects anonymous user to login page
  • auth.ts = verifies user credentials during the log-in action (i.e. against a database)
    • exports auth, signIn, signOut actions
• UI boilerplate
  • sidenav.tsx = implements logout action - calls signOut from auth.ts
  • login-form.tsx = implements login form
  • actions.ts = handles login-form validation and submition - calls signIn from auth.ts