Reactjs frontend with PasswordResetView

Question

I am currently working on a reset password feature (sends email) for a project that's written in Django backend, Reactjs frontend. I am using Django's own PasswordResetView to implement this feature and it works as intended. However I want a page on my frontend sending a POST request to "reset_password/", but I'm getting a "POST http://localhost:8000/user/reset_password/ 403 (Forbidden)" error message. I don't want to use a template to implement this feature, but a Form (component) written in Reactjs running on localhost:3000. How can I do this? Or should I try another approach to the reset password feature?

This is the function that tries to post to backend:

async resetPassword(email) {
const resetPasswordResponse = await client.post("reset_password/", {
  email: email,
});
return resetPasswordResponse;}

AndreaCostanzo1 AndreaCostanzo1 · Accepted Answer · 2021-05-11T07:47:41

You should provide more detail on how your back-end code is structured. The general approach to employ when using the "send email feature" is manage your problem in 3 steps to avoid using a Django template:

Having a route on Django accepting post request that has the duty to only send the email.
Redirect from the page generated by the Django link to a page of your react application. Be careful of forwarding also the various token/ids that are required to reset the password
Lastly inside the page you redirected the user you should send a post request to the back-end containing

uid: '...',
token: '...',
password_1: '...',
password_2: '...'

Reactjs frontend with PasswordResetView

1 Answers