S
Supabase•9mo ago
BaptisteS

Reset user password Flutter / Next.js / Supabase

Hey, I'm currently working on the reset password feature for my flutter mobile app. On the mobile app, I've got a dedicated page with the email field and a button. This button calls: 
client.auth.resetPasswordForEmail(
      email,
      redirectTo: _env.recoverPasswordUrl,
)
client.auth.resetPasswordForEmail(
      email,
      redirectTo: _env.recoverPasswordUrl,
)
The email is well sent will this template configured on Supabase interface following the doc: 
<h2>Réinitialisation de votre mot de passe</h2>

<p>Suivez ce lien pour réinitialiser votre mot de passe:</p>
<p><a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/reset-password"
    >Reset Password</a
  ></p>
<h2>Réinitialisation de votre mot de passe</h2>

<p>Suivez ce lien pour réinitialiser votre mot de passe:</p>
<p><a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/reset-password"
    >Reset Password</a
  ></p>
Then i receive the email and click on the link that redirect on a very simple nextjs app, with a new password field and a confirm button calling updateUser(newPassword). I've test various things: intermédiate route to get the code and initiate the session then redirect to the new password form page or navigating directly to this page but none works: I get session error or code empty... What should i use: exchangeCodeForSession, verifyOtp with recovery type and which code/otp is the good one from the email link url? ["code"], ["tokenHash"]... Thank you in advance!
4 Replies
j4
j4•9mo ago
With that email template, you should be grabbing token_hash and type, and then pass them into verifyOtp.
SohailShah
SohailShah•9mo ago
 html 
<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>{{.SiteURL}}</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/account/update-password"
    >Reset Password</a
  >
</p>
 html 
<h2>Reset Password</h2>

<p>Follow this link to reset the password for your user:</p>
<p>{{.SiteURL}}</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=recovery&next=/account/update-password"
    >Reset Password</a
  >
</p>
im using this template. getting mail but .SiteURL is correctly injected in first <p> tag but not in href tag. In href tag .SiteURL is replace with mail.google.com. I dont know why this is happening. Any one facing similar issue?
j4
j4•9mo ago
@SohailShah Does removing the one in the p tag fix the href one? You should open an issue on github.
BaptisteS
BaptisteSOP•9mo ago
Thank you !

Did you find this page helpful?