82 lines
1.8 KiB
Markdown
82 lines
1.8 KiB
Markdown
|
|
|
|
### 🔹 1. **User Sign-Up Flow**
|
|
|
|
- React modal (SignUpModal component)
|
|
|
|
- Fields: `PhoneNumber`, `Password`, `ConfirmPassword`
|
|
|
|
- Frontend validation (empty fields, password length match, etc.)
|
|
|
|
- Send request to `/api/auth/register` (POST)
|
|
|
|
- Backend controller:
|
|
|
|
- Check if user with phone exists
|
|
|
|
- Validate password (min length, maybe complexity rules)
|
|
|
|
- Hash password
|
|
|
|
- Store new user in DB
|
|
|
|
- Return success/failure
|
|
|
|
|
|
✅ **Backend helper**: Use `PasswordHasher<TUser>` to hash passwords securely
|
|
✅ **Phone number** can act as username or unique field
|
|
|
|
---
|
|
|
|
### 🔹 2. **User Login Flow**
|
|
|
|
- React modal (LoginModal component)
|
|
|
|
- Fields: `PhoneNumber`, `Password`
|
|
|
|
- Submit to `/api/auth/login` (POST)
|
|
|
|
- Backend checks:
|
|
|
|
- Find user by phone
|
|
|
|
- Verify password (using PasswordHasher)
|
|
|
|
- Generate **JWT**
|
|
|
|
- Return token (and optionally refresh token)
|
|
|
|
|
|
✅ Token should include claims like user ID and role
|
|
✅ Sign token with your secret key
|
|
|
|
---
|
|
|
|
### 🔹 3. **Store Token + Access Protected Page**
|
|
|
|
- Save token to `localStorage` or `cookie`
|
|
|
|
- Attach it to future API requests using Axios interceptor
|
|
|
|
- Use `jwt-decode` to extract roles and validate access in frontend
|
|
|
|
- Restrict `/profile` page using custom React `PrivateRoute`
|
|
|
|
|
|
Backend: Secure `/api/profile` with `[Authorize]` (or `[Authorize(Roles = "X")]`)
|
|
|
|
---
|
|
|
|
## 🛠 Technologies to Use
|
|
|
|
|Area|Tool|
|
|
|---|---|
|
|
|Frontend|React, Axios, React Router, jwt-decode|
|
|
|Backend|ASP.NET Core API, EF Core, JWT Bearer Auth|
|
|
|Security|PasswordHasher, Authorization attributes, Token signing key|
|
|
|
|
---
|
|
|
|
|
|
# Mention adding User Role in Database
|
|
# Becareful not to put Jwt inside another thing in the appsettings |