Day 2: Inital Authentication Setup

Welcome to the journey of re-developing my capstone project from college and navigating this job market back into a technical role.

I have implemented three groups (Admin, Tenant, Team). Each will have their own authorization rights.

Admin Group

Admin group is ideally the user who owns the property (landlord).

This user will have all authorization rights in this application (Create, Read, Update, Delete aka CRUD). This user group will have the right to only sign up for the application. They will be giving and assigning rights to Tenant and Team based on whether they are a renter or contractor of choice.

Tenant Group

Tenant group is for the renters.

This group will have create, read, and update autorization. They will be able to update their own information, create maintenance tickets and read comments on tickets along with their information and rental information.

Team Group

Team group is for contractors.

This group will have same permissions of Tenant group but won’t be able to create maintenance tickets, only update. I will consider adding a separate ticketing system between team and landlord, but will be considered as i progress with development.

AWS Amplify Authentication

All setup related answer can be found on docs here. A few features I have included are Muti-factor Authentication (MFA), domain filtering, and password restriction.

Next steps are figuring out configurations within authentication flow. Such as preSignUp to postSignUp, how I will be confirming registration.

Package Update

AWS Amplify UI won’t work with NuxtUI due to TailwindCSS taking default styling. I didn’t spend much time on this just because it’s a minimal thing but causes a 503 HTTP status code for some reason.

I haven’t tested with only TailwindCSS installed and configured (Not using NuxtUI) but I’d imagine it is the same result.

I will be configuring login portal with custom styling and show screenshots when complete in next post.

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/ui": "npm:@nuxt/ui-edge@latest",
    "nuxt": "^3.7.4",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^3.1.29", <--- will be removing
    "@nuxt/ui": "^2.9.0",
    "aws-amplify": "^5.3.11"
  }
}