Reset Password

[rwx-yxu]

Summary

The user needs to reset their password

Basic Flow

1. The use case starts when the user indicates they want to reset their password.
2. The system requests the username.
3. The system emails the user a password reset link.
4. On clicking the link, the system allows the user to set a new password.
5. The system starts a new login session.

   Preconditions

   The user is registered. The username is the user’s email address.

   Postconditions

   The user can now login.

[LiamSingh64]

Could either have the same Components for when a User Logs In with some conditional formatting to hide/disable the password input field, and show/enable once the separate link has been clicked so they can enter a new password.

Or, could just have own components of an input field for username and directs the User to the Login Page once the link has been clicked but the logic now SETS a password instead of checking it exists?

Depends on HOW the password is reset, I'm not sure if the link acts as a simple verification/authentication for us so we know this is the correct User to change their password, so there is a timeout mechanism for when the link expires, and if it's clicked before timeout, update the components and logic to allow a new password to be entered/update document.

[advweb-grp1]

Investigate firebase - It might already have a way to verify user emails

[LiamSingh64]

Documentation for Sending a User Password Reset email: https://firebase.google.com/docs/auth/web/manage-users#send_a_password_reset_email

I will probably add my own personal email address to FireStore so I can test whether or not an email is sent, and if the password is reset.

[LiamSingh64]

Resetting User Password through Email

import { getAuth, sendPasswordResetEmail } from "firebase/auth";

const auth = getAuth(); sendPasswordResetEmail(auth, email) .then(() => { // Password reset email sent! }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; // .. });

[LiamSingh64]

Once the Email is successfully sent, Firebase takes care of literally everything else in terms of resetting the Password. Could sort out a redirect back to the Login page but I'd rather just have the proof-of-concept finished first before adding fancy extras (K.I.S.S principle)

[LiamSingh64]

• [x] Add my own Email to Firebase
• [x] Create new RouterView called "ResetUserPasswordView"
• [x] ResetUserPasswordView should contain an <input type="email"> and a <button @click="sendResetLink">Send Link</button>. Could be contained in a Form but not sure if it's necessary?
• [x] Add path to router/index.js
• [x] Add function called sendResetLink to Composables folder from https://github.com/advweb-grp1/advanced-web-final-year-project/issues/6#issuecomment-1497657053
• [x] Test with personal Email
• [x] Once verified to be working, add a link to ResetUserPasswordView from Login page

[LiamSingh64]

Could have a Modal stating an Email has been successfully sent and prompting User to check inbox (and spam)

[LiamSingh64]

Unit Test: Have a set of valid and invalid emails for trying to find Users (and sending emails) in firebase

[LiamSingh64]

Email/link was successfully sent to my email address (in spam). From there, firebase lets you change password and confirms your password change, however I can't actually verify password (before/after) on Firebase console because it doesn't show user passwords for security reasons.

But I still think it works properly:thumbsup:

Could wait for #4 (Login) to properly verify whether or not password has changed??... even though firebase says it has!