password reset implementation with djoser

Question

I wanted to use djoser for the reset password functionality and as per the documentation:

PASSWORD_RESET_CONFIRM_URL

URL to your frontend password reset page. It should contain {uid} and {token} placeholders, eg #/password-reset/{uid}/{token} . You should pass uid and token to reset password confirmation endpoint.

I have done the following:

PASSWORD_RESET_CONFIRM_URL': 'reset/password/reset/confirm/{uid}/{token}',

url

url(r'^reset/password/reset/confirm/(?P<uid>[\\w-]+)/(?P<token>[\\w-]+)/$', PasswordResetView.as_view(),),

View :

class PasswordResetView(APIView):

   def get (self, request, uid, token):
       post_data = {'uid': uid, 'token': token}
       return Response(post_data)

In my mail I get this link : http://127.0.0.1:8000/reset/password/reset/confirm/Mjk/538-954dccbc1b06171eff4d

This is obvious that I will get :

{
"uid": "Mjk",
"token": "538-954dccbc1b06171eff4d"

}

as my output but I wanted to go to auth/password/reset/confirm when the user clicks the link in the mail.

Answer 1

Lets describe the actions first:

1. The user clicks on the link to reset the password. reset password
2. (Here you need a form to obtain a username or email address, depending on your settings) The user enters the username and clicks Submit.
3. The user receives an email with a link to reset the password.
4. The link opens the browser, which contains the form "Create a new password".
5. The user enters a new password and sends a form
6. The browser redirects the page to the home page and gives feedback that the password has been reset.

---

You can then use following method to reset the password.

#template
<p>Use the form below to change your password. Your password cannot be the same as your username.</p>
<form role="form" method="post">
  {% csrf_token %}
  <input type="password" name="password1" placeholder="New Password">
  <input type="submit">
</form>

---

#view
from django.shortcuts import redirect, render
from djoser.conf import django_settings

def reset_user_password(request, uid, token):
    if request.POST:
        password = request.POST.get('password1')
        payload = {'uid': uid, 'token': token, 'new_password': password}

        url = '{0}://{1}{2}'.format(
            django_settings.PROTOCOL, django_settings.DOMAIN, reverse('password_reset_confirm'))

        response = requests.post(url, data=payload)
        if response.status_code == 204:
            # Give some feedback to the user. For instance:
            # https://docs.djangoproject.com/en/2.2/ref/contrib/messages/
            messages.success(request, 'Your password has been reset successfully!')
            return redirect('home')
        else:
            return Response(response.json())
    else:
        return render(request, 'templates/reset_password.html')

Answer 2

It's always important to catch errors, handle redirects and add the default renderer classes. In my case, I ended up using the following.

#view
import requests
from django.contrib import messages
from django.contrib.sites.models import Site
from django.http import HttpResponseRedirect
from django.shortcuts import render
from rest_framework.decorators import (api_view, permission_classes,
                                       renderer_classes)
from rest_framework.permissions import AllowAny
from rest_framework.renderers import JSONRenderer, TemplateHTMLRenderer

@api_view(('GET', 'POST'))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer))
@permission_classes([AllowAny])
def reset_user_password(request, **kwargs):
    # uses djoser to reset password
    if request.POST:
        current_site = Site.objects.get_current()
        #names of the inputs in the password reset form
        password = request.POST.get('new_password')
        password_confirmation = request.POST.get('password_confirm')
        #data to accept. the uid and token is obtained as keyword arguments in the url
        payload = {
            'uid': kwargs.get('uid'),
            'token': kwargs.get('token'),
            'new_password': password,
            're_new_password': password_confirmation
        }

        djoser_password_reset_url = 'api/v1/auth/users/reset_password_confirm/'
        protocol = 'https'
        headers = {'content-Type': 'application/json'}
        if bool(request) and not request.is_secure():
            protocol = 'http'
        url = '{0}://{1}/{2}'.format(protocol, current_site,
                                     djoser_password_reset_url)
        response = requests.post(url,
                                 data=json.dumps(payload),
                                 headers=headers)

        if response.status_code == 204:
            # Give some feedback to the user.
            messages.success(request,
                             'Your password has been reset successfully!')
            return HttpResponseRedirect('/')
        else:
            response_object = response.json()
            response_object_keys = response_object.keys()
            #catch any errors
            for key in response_object_keys:
                decoded_string = response_object.get(key)[0].replace("'", "\'")
                messages.error(request, f'{decoded_string}')
            return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
      # if the request method is a GET request, provide the template to show. in most cases, the password reset form.
      else:
        return render(request, 'account/password_reset_from_key.html')

I added the allowany permission as the API endpoint does not need any authentication.

In URLs;

path('password/reset/<str:uid>/<str:token>/',
         reset_user_password,
         name='reset_user_password'),

Finally, on the main settings file, I updated the Djoser reset password URL to match the URL I'm building above so that I ensure that the user is redirected to the page I'm intending.

DJOSER = {
"PASSWORD_RESET_CONFIRM_URL":
    "dashboard/auth/password/reset/{uid}/{token}/",
}