feat: add user settings page with name and password update#130
feat: add user settings page with name and password update#130akhilachiju wants to merge 15 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| const TOKEN_KEY = 'token'; | ||
|
|
||
| export const tokenStorage = { | ||
| set(token: string): void { | ||
| localStorage.setItem(TOKEN_KEY, token); | ||
| }, | ||
|
|
||
| get(): string | null { | ||
| return localStorage.getItem(TOKEN_KEY); | ||
| }, | ||
|
|
||
| remove(): void { | ||
| localStorage.removeItem(TOKEN_KEY); | ||
| }, | ||
|
|
||
| getUserId(): string | null { | ||
| const token = this.get(); | ||
| if (!token) return null; | ||
| try { | ||
| const payload = JSON.parse(atob(token.split('.')[1])); | ||
| return payload.userId ?? null; | ||
| } catch { | ||
| return null; | ||
| } | ||
| }, | ||
| }; |
There was a problem hiding this comment.
I think we are using a cookies approach to authentication, aren't we?
There was a problem hiding this comment.
Yes, exactly! We're using httpOnly cookies. I also removed a leftover tokenStorage.set(data.token) line that was still in authService.ts from an old token-based approach — that's cleaned up now.
There was a problem hiding this comment.
If you're using cookies you do not need token storage, cookies are already stored by the browser.
There was a problem hiding this comment.
Done — tokenStorage.ts has been deleted entirely. We're using httpOnly cookies exclusively now, no local storage involved.
|
Hi! I tried to update a users password and I received an error. It seems like in the backend the update user is not implemented to change the password. is that right? async updateUser(id: string, data: { email?: string; firstName?: string; lastName?: string }) { |
…m/ReDI-School/S26-Full-Stack-Circle into feat/issue-114/user-settings-page
Good catch! The updateUser service method wasn't accepting a password field, and even if it had, it was passing it directly to Prisma which expects passwordHash. Fixed it to hash the password with bcrypt before storing it. |
|
Deployment failed with the following error: Learn More: https://vercel.com/fabio-rodrigues-projects-d0d7c49d?upgradeToPro=build-rate-limit |
FrontierPsychiatrist
left a comment
FrontierPsychiatrist
left a comment
There was a problem hiding this comment.
The token storage must be removed. You should not just casually store sensitive credentials in local storage in a PR about editing user data, especially when there is already an authentication system (cookies) in place.
The updateUser function must not be in the auth` hook, it is no authentication feature.
| } | ||
|
|
||
| async updateUser(id: string, data: { email?: string; firstName?: string; lastName?: string }) { | ||
| async updateUser(id: string, data: { email?: string; firstName?: string; lastName?: string; password?: string }) { |
There was a problem hiding this comment.
Avoid inline types like this when they get to large, it is better to extract a type for this. It's hard to read.
| } | ||
| }; | ||
|
|
||
| const updateUser = async ({ firstName, lastName, newPassword }: UpdateUserInput) => { |
There was a problem hiding this comment.
That is no authentication issue and should not be in this hook. It's also wrongly reusing state from the auth hook. Please move this to a different hook, or just keep it local to where it is needed (I don't assume the user will be updated all over the application?
There was a problem hiding this comment.
Done — updateUser has been moved out of useAuth and inlined directly into the settings page, since it's only used there. No separate hook needed.
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| headers: { 'Content-Type': 'application/json' }, |
There was a problem hiding this comment.
Please avoid unnecessary formatting changes in your PRs. This is not related to editing the user.
| @@ -0,0 +1,26 @@ | |||
| const TOKEN_KEY = 'token'; | |||
|
|
|||
| export const tokenStorage = { | |||
There was a problem hiding this comment.
Please remove this complete file, it is not related to the user editing and a substantial add to the authentication system.
| const TOKEN_KEY = 'token'; | ||
|
|
||
| export const tokenStorage = { | ||
| set(token: string): void { | ||
| localStorage.setItem(TOKEN_KEY, token); | ||
| }, | ||
|
|
||
| get(): string | null { | ||
| return localStorage.getItem(TOKEN_KEY); | ||
| }, | ||
|
|
||
| remove(): void { | ||
| localStorage.removeItem(TOKEN_KEY); | ||
| }, | ||
|
|
||
| getUserId(): string | null { | ||
| const token = this.get(); | ||
| if (!token) return null; | ||
| try { | ||
| const payload = JSON.parse(atob(token.split('.')[1])); | ||
| return payload.userId ?? null; | ||
| } catch { | ||
| return null; | ||
| } | ||
| }, | ||
| }; |
There was a problem hiding this comment.
If you're using cookies you do not need token storage, cookies are already stored by the browser.
tokenStorage.ts has been deleted — we're relying solely on httpOnly cookies now. updateUser has been moved out of useAuth and inlined directly into the settings page, since it's only used there. |
1ea161f to
183a186
Compare
|
|
||
| <div className="flex flex-col gap-4"> | ||
| <InputField | ||
| label="First name" |
There was a problem hiding this comment.
Hi, I think that could be nice to have currently first name as default value.
Imaging that the user only want to change the password, then its unnecessary to tip first name and last name again.
There was a problem hiding this comment.
Good point! I've added default values for first name and last name from the logged-in user, so they're pre-filled in the form. Only the password fields stay empty.
…entry, fix form reset and auth context sync
|
Hey, I checked just now and it looks good. Thank you that I learn a lot from your code. |
4 participants
Resolves #114
A logged-in user can update their display name and password from the settings page. The form integrates with the existing backend user service via httpOnly cookies for authentication.
What changed
Why
The app already uses httpOnly cookies for authentication set on login. No token storage in localStorage is needed or appropriate — the browser sends the cookie automatically on every request. Password
validation reuses the existing passwordSchema to stay consistent with registration rules.
Acceptance Criteria