Today I built the entire password reset feature in my Next.js application.
I created it from scratch and connected it to my custom public API endpoints.
Now users can request a reset link and set a new password easily and securely.

Password reminder and reset flow

I added a link to remind password directly below the login form.
This link leads to a simple form that asks for the user’s email.
Next, when the user submits the form, it triggers a POST request to my API:

POST /auth/remind-password  
Content-Type: application/json

{
  "email": "user@example.com"
}

If the email is valid, a success message appears.
As a result, the user receives an email with a reset link containing a token.

Password reset

After clicking the link in the email, the user is redirected to the reset password form.
There, the user can enter a new password and confirm it.
After submission, I send the following request:

POST /auth/reset-password  
Content-Type: application/json

{
  "token": "TOKEN_FROM_EMAIL",
  "password": "NewSecurePassword123"
}

If the operation succeeds, the user sees a confirmation message.
Then I redirect the user to the login page automatically.

Reusable frontend components

To keep the code clean and consistent, I reused existing components:

• InputField handles form inputs and validation messages,
• Button supports a loading state,
• Footer stays fixed at the bottom of the page.

Moreover, I used Tailwind CSS for layout and spacing.
This keeps the interface lightweight and easy to maintain.

Good practices I followed

While building the forms, I made sure to respect frontend best practices.
For example, I used react-hook-form for validations.
I added support for language switching using i18next.
Furthermore, I provided proper feedback for all types of user errors.

This way, the whole flow remains intuitive and accessible.
And it can easily be extended in the future.