Implement change email functionality
The new section "Change email" similar to "2FA" should be added to the account page.
The flow for changing email is next:
- User clicks the "Change email" button on the account page;
- New modal opens. There are 2 fields "New email address" and "Verification code". User need to file one of these fields;
- If "New email address" filled:
- The next step is to request user credentials (password, 2FA code if 2FA enabled).
- Then we send new email and credentials to the backend. Backed generates and sends verification code to the new email address.
- Show a message that the verification code will be sent to the new email address and should be used on the 2d step of this flow.
- If "Verification code" filled:
- We send verification code to the backend.
- Backend checks verification code and if it's valid changes email address.
- Show the user message that the email address was changed or the verification code is not valid.
I would avoid doing the whole process in one flow because of a possible delay in email delivery but we still need to verify the new email address before changing it in DB. The flow above will allow requesting verification code if needed several times. On the other hand, there is no need to wait for the verification code because it could be verified any time after request.
As an improvement, we can add a timestamp to the verification code to make it valid for only a short period of time. In this case, it won't be possible to use the verification code generated a while ago.
UPD
In the security_fields
we'll need to save:
- New email address
- Verification code
- Timestamp
Edited by Anton Panteleev