Forgot password flow

[TimMikeladze]

At the moment it's not possible to reset a forgotten password.

I suggest a basic reset password flow by sending the user a password reset link to their email.

Maybe using resend? But should be easily swappable with other email libraries.

[leerob]

💯 I am thinking we'd use Resend and react-email for both this, as well as the team invite flow.

https://github.com/leerob/next-saas-starter/blob/afff269d7ad8d6b90f5bf2c50dbf15b2ebc285d6/app/(login)/actions.ts#L417-L420
https://github.com/resend/react-email/tree/main/examples/resend

[MJomaa]

@leerob Yes please! react-email is also very easy, I can add it to the repo.

My favorite is the Vercel theme:

[atikkk]

hey @leerob can you please help me in local setup?

[jonkurtis]

hey @leerob can you please help me in local setup?

where are you getting stuck? The PR I made might be helpful. #14

[samueltesfayegari]

hey @leerob can you please help me in local setup?

Yes tutorial Video missing 🙌

[sanjomathew09]

// Get references to the form and its elements
const form = document.getElementById('forgot-password-form');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');

// Email validation regex
const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;

// Handle form submission
form.addEventListener('submit', (e) => {
e.preventDefault(); // Prevent the default form submission

const email = emailInput.value.trim();

// Validate the email input
if (!emailRegex.test(email)) {
errorMessage.style.display = 'block';
return;
}

// Hide the error message if validation passes
errorMessage.style.display = 'none';

// Simulate sending a reset link (replace with actual API call)
alert(A password reset link has been sent to: ${email});
emailInput.value = ''; // Clear the input field
});