11

Our team works on project with django-rest-api on backend and react on frontend. For authentication we use django-rest-auth, and we have problem with password reset. Here urls:

urlpatterns += [
   url(r'^accounts/', include('allauth.urls')),
   url(r'^admin/', include(admin.site.urls)),
   url(r'^api/', include('api.urls')),
   url(r'^rest-auth/', include('rest_auth.urls')),
   url(r'^rest-auth/registration/', include('rest_auth.registration.urls')),
   url(
       r'^rest-auth/password/reset/$',
       PasswordResetView.as_view(),
       name='password_reset',
   ),
   url(r'^rest-auth/password/reset/confirm/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$',
       PasswordResetConfirmView.as_view(),
       name='password_reset_confirm'),
   url(
       r'^rest-auth/registration/account-confirm-email/(?P<key>[-:\w]+)/$',
       confirm,
       name="account_confirm_email"
   ),
   url(r'^', include('core.urls', namespace='core')),
]

When request to password_reset is posted, user receives email with link contains uid and token. Then user fills new_password in react form, and we want post data: 

{
   "new_password1": "new_password",
   "new_password2": "new_password",
   "uid": "",
   "token": ""
}

to /rest-auth/password/reset/confirm/.

How we may to obtain this uid and token on frontend for make page with confirm password reset on this url, and then post data for confirm password change?

okay
  • 190
  • 2
  • 10
  • Can't you just take the uid and token from the page url? That is how the similar built-in functionality in Django does it. You can grab the url with javascript. Here's the actual implementation of password reset tokens, btw. https://github.com/django/django/blob/master/django/contrib/auth/tokens.py – Håken Lid Nov 23 '16 at 17:42

1 Answers1

10

You should configure your react router to get the params from url. For eg,

<Route path="reset/:uid/:token" component={PasswordResetView}/>

And then in your react view you can get these values like this.props.params.uid and this.props.params.token.

Sagar Ramachandrappa
  • 1,411
  • 12
  • 18
  • I'm using React 16.7 with React Router 4.2 and I found I needed to prepend the path with a slash, and use `this.props.match.params.uid` and `this.props.match.params.token` to get the values – pjdavis Jun 15 '19 at 14:16
  • I can't get my head round how this works on my production site. I could get it working fine on dev, as front end and back end were on different ports so the domains in the urls were different. Now I'm running everything from the same domain, it always picks up the Django Rest Framework page first so I don't see the password reset page I built in React... – daveyb Oct 31 '21 at 12:45