Comment ajouter la réinitialisation de mot de passe

1
<Form …>
2
  {/* …inputs e-mail / mdp… */}
3
  <div className="flex justify-between">
4
    <Link to="/register" className="text-xs text-sky-700">S’inscrire</Link>
5
    <Link to="/forgot-password" className="text-xs text-gray-400">
6
      Mot de passe oublié ?
7
    </Link>
8
  </div>
9
</Form>

1
export async function loader({ request }: LoaderArgs) {
2
  const user = await getOptionalUser({ request })
3
  if (user) throw redirect("/")               // déjà connecté
4
  return null
5
}

1
import { z } from "zod"
2

3
export const ForgotPasswordSchema = z.object({
4
  email: z.string().email("Adresse invalide"),
5
})

1
export async function triggerResetPasswordRequest({ email }: { email: string }) {
2
  // 1 - le compte existe-t-il ?
3
  const user = await prisma.user.findUnique({ where: { email } })
4
  if (!user) return                  // pas d’info : pas de faille UX
5

6
  // 2 - générer un token + date d’expiration
7
  const token = crypto.randomUUID().slice(0, 32)
8
  const expiresAt = new Date(Date.now() + 1000 * 60 * 30) // 30 min
9

10
  await prisma.user.update({
11
    where: { id: user.id },
12
    data: { resetToken: token, resetTokenExpiresAt: expiresAt },
13
  })
14

15
  // 3 - construire le lien
16
  const link = href("/reset-password") + `?token=${token}`
17
  console.log({ link })  // @todo : envoyer un e-mail réel
18
}

1
resetToken          String?   @unique
2
resetTokenExpiresAt DateTime?

1
<Form method="POST" …>
2
  <Field … name="email" … />
3
  {actionData?.message && (
4
    <p className="text-center text-sm text-gray-500">
5
      {actionData.message}
6
    </p>
7
  )}
8
  <button className="btn-primary w-full">Réinitialiser le mot de passe</button>
9
</Form>

1
export async function loader({ request }: LoaderArgs) {
2
  const token = new URL(request.url).searchParams.get("token") ?? ""
3
  const user = await prisma.user.findUnique({
4
    where: { resetToken: token },
5
    select: { id: true, resetTokenExpiresAt: true },
6
  })
7

8
  const isValid =
9
    user && user.resetTokenExpiresAt && user.resetTokenExpiresAt > new Date()
10

11
  return data({ isValid, token })        // token renvoyé pour l’action
12
}

1
{isValid ? (
2
  <Form method="POST" …>
3
    <Field … name="password" />
4
    <Field … name="passwordConfirmation" />
5
    <button className="btn-primary w-full">
6
      Réinitialiser le mot de passe
7
    </button>
8
  </Form>
9
) : (
10
  <p className="text-gray-500 text-center">
11
    Lien invalide ou expiré.
12
  </p>
13
)}

1
export const ResetPasswordSchema = z
2
  .object({
3
    password: z.string().min(6),
4
    passwordConfirmation: z.string(),
5
  })
6
  .refine((d) => d.password === d.passwordConfirmation, {
7
    message: "Les mots de passe ne correspondent pas",
8
    path: ["passwordConfirmation"],
9
  })

1
export async function resetUserPassword({
2
  token, password,
3
}: { token: string; password: string }) {
4
  const user = await prisma.user.findUnique({ where: { resetToken: token } })
5
  if (
6
    !user ||
7
    !user.resetTokenExpiresAt ||
8
    user.resetTokenExpiresAt < new Date()
9
  ) throw new Error("Token expiré")
10

11
  await prisma.user.update({
12
    where: { id: user.id },
13
    data: {
14
      password: await hashPassword({ password }),
15
      resetToken: null,
16
      resetTokenExpiresAt: null,
17
    },
18
  })
19
}