如何使用 Django Rest Framework 和 Dj-rest-auth 在 React 中显示我的重置密码页面

Question

I have an app that has a React front end and a Django api backend. I'm trying to get the password reset page to work but I can't work out how to set up the urls/routing. I had it working locally, but I think that was because the ports for the frontend and backend are different locally, so they were essentially different domains.

My Django url patterns includes:

path('api/v1/dj-rest-auth/password/reset/confirm/<uidb64>/<token>/', PasswordResetConfirmView.as_view(), name='password_reset_confirm')

I have a catchall url in my Django urls to make the rest of the frontend work.

My React Router includes:

<Route path="/api/v1/dj-rest-auth/password/reset/confirm/:uid/:token/" component={ResetPassword} />

My React password reset page contains:

    let url = process.env.REACT_APP_API_PATH + '/api/v1/dj-rest-auth/password/reset/confirm/' + this.props.match.params.uid + '/' +  this.props.match.params.token + '/';
    let headers = {token: this.props.match.params.token, 
                    uid: this.props.match.params.uid, 
                    new_password1: this.state.newPassword, 
                    new_password2: this.state.newPasswordConf
                  }
    axios
      .post(url, headers)

This takes the token and uid from the password reset link then sends them, along with the user's new password to the password reset endpoint.

The dilemma seems to be, I need to access the reset link via React to be able to get the token and uid, but then I need to access the same link as a call to the API to be able to reset the password.

Answer 1

OK, I managed to solve it using a slightly cheeky way.

I simply overrode the template for the password reset email, using the default template, but just adding something extra to the url. Just so the url is different in some way.

I copied this template to templates/registration

Then just added an extra word ( email - but could be any word) to the path that gets created in the email:

{{ protocol }}://{{ domain }}/email{% url 'password_reset_confirm' uidb64=uid token=token %}

Now I can use this new path in my my React Router to get the uid and token, but when I submit the data to the api I use the 'proper' url (the one in my Django urlpatterns)