Question

How do I add a 'forgot password' flow to my Lovable app?

Solved · 271 viewsasked 3 weeks ago by

noor_builds

Lovable made login and signup with Supabase. There is no forgot-password link, and users ask for it.

What I’ve tried

Asked Lovable to add it; it added a button that does nothing.

Comment

2 answers

Marked as helpful by the asker

mira_dev3 weeks ago

Three parts:

A page with an email field that calls supabase.auth.resetPasswordForEmail(email, { redirectTo: 'https://yourapp/reset' }).
Add https://yourapp/reset to Redirect URLs in Supabase Auth settings.
A /reset page that, once the user lands there with a session, shows a new-password field and calls supabase.auth.updateUser({ password }).

Give Lovable those three bullet points literally. "Add forgot password" is too vague for it; the three calls are not.

Comment

Works! The reset page is the part I would never have figured out.

noor_builds 2 weeks ago

amir_h2 weeks ago

One security detail for step 3: the /reset page must only show the password field when the user arrived through the recovery link. Listen for the PASSWORD_RECOVERY event:

supabase.auth.onAuthStateChange((event) => {
  if (event === 'PASSWORD_RECOVERY') setShowForm(true)
})

If the page just calls updateUser for anyone with a session, then anyone who walks up to a logged-in laptop can change the password without knowing the old one.

Comment

Added the event check. The page now says "open the link from your email" if you land there any other way.

noor_builds 2 weeks ago

Keyboard shortcuts

How do I add a 'forgot password' flow to my Lovable app?

What I’ve tried

2 answers

Your answer