User Story - Register & Login with Authentication

[angelajholden]

User Story

As a new user, I want to securely register for an account and log in, so that I can safely perform transactions and access my user profile on the e-commerce platform.

Feature Description

<action> the <result> <by|for|of|to> <object>

Secure the user's data by encrypting their password during registration and login.

Input User signs up or signs in with their name, email and password, then clicks submit button.

Activation User's password is hashed and stored securely in the database.

Action Password is compared with bcryptjs to hashed password in database.

Output User's data is sent to frontend in a JWT.

Fully Dressed Use Case

Input	Action
User inputs name. email, password	User data is sent to frontend in JWT

[angelajholden]

Noun Extraction

• User
• Password
• Hashed password
• Bcryptjs
• JWT
• Database
• Frontend

CRC Cards

User Model CRC Card

Class Name	User Model
Responsibilities	Store user details (name, email, password). Validate user data integrity. Encrypt and check passwords.
Collaborators	AuthService bcryptjs MongoDB (implicitly via the Mongoose model)

AuthService CRC Card

Class Name	AuthService
Responsibilities	Authenticate users. Register new users. Generate JWTs for sessions. Retrieve user profile data.
Collaborators	User Model bcryptjs jsonwebtoken asyncHandler

AuthController CRC Card

Class Name	AuthController
Responsibilities	Handle HTTP requests for user authentication (POST /api/users/login). Handle HTTP requests for user registration (POST /api/users). Handle HTTP requests to retrieve user profile (GET /api/users/me).
Collaborators	AuthService express.Router asyncHandler

[angelajholden]

Register & Login Narration

I have to give credit to ChatGPT for the dramatic flair of this play!

Cast

• User
• Password
• Hashed password
• Bcryptjs
• JWT
• Database
• Frontend

Act 1: Registration

User: "I wish to enter this realm and claim my space. Here are my credentials."

Frontend: "Welcome, traveler! Let me secure these for you."

Bcryptjs: "Ah, a password fresh for transformation! Now, it is secure!"

Database: "The secrets are safe with me. New identity, now recorded."

JWT: "With this token, you shall pass. It holds your access and identity, guarding them until you choose to return."

Frontend: "You are now one of us. Carry this token with pride and care."

User: "I am ready to explore! Thank you, guardians of my gateway."

Act 2: Login

User: "I return, seeking passage into the secured domain."

Frontend: "Let us verify your claims."

Bcryptjs: "True indeed, this one speaks the correct words."

JWT: "Your passage remains true, and here is your renewed token, crafted to carry you further into our world."

Frontend: "Your path is clear, esteemed traveler. Venture forth with our blessings and protections."

User: "Thank you once again, for keeping the gates and ensuring my journey is safe."

[angelajholden]

UML Class Diagram

[angelajholden]

Links

• Website: https://fiberandkraft.herokuapp.com/
• Frontend repo: https://github.com/angelajholden/fiberandkraft
• Backend repo: https://github.com/angelajholden/fiberandkraftDB