Email password reset in Django Rest Framework

Okay, so far so good. You have built an app that does some authentication in this case the Frontend is done in VueJs and the Backend is done in Django Rest Framework. But users being users, they at times forget their password and there is a need to reset it. Instead of a manual reset from your admin dashboard, today we will look at a cleaner way that allows users to do the reset themselves via email.

Technologies

1. Django Rest Framework
2. VueJs (but react/angular will just work fine)
3. django-rest-passwordreset package

Let get started!

Step 1

Install the django-rest-passwordreset package, make sure you have sourced your env

pip install django-rest-passwordreset

Freeze the new install into your requirements.txt

Step 2

Add these lines in your settings.py preferably at the bottom

Note: the email password is supposed to be an app password, learn how to generate one here

Step 3

At this point, we need to add the reset password URL to our urls.py file. Add the below line.

path('password_reset/', include('django_rest_passwordreset.urls', namespace='password_reset')),

We are not yet done, but almost…

Step 4

Navigate to models.py in the user app, where we have our serializer, and migrations and add the imports at the top and the code at the bottom of the models.py file

Step 5

On our frontend application define a route that takes a parameter

import Vue from 'vue';
import VueRouter from 'vue-router';
import ResetPasswordForm from 'ResetPasswordForm';
const Router = new VueRouter({  
routes: [
    {
        path: '/reset-password-form/:ref',
        name: 'reset_password',
        component: ResetPasswordForm,
    },
]
});

The above route is what we have in our models.py line 10 in Step 4 and in fullness, it will appear something like

http://localhost:3000/login/reset-password-form/<reset-password-token>

Step 6

When a user has forgotten their password and clicks on Forgot password? enter their recovery email, at this point, you hit the API defined in Step 3. An email will be sent to the user and they should be able to reset their password using a redirect link that redirects to your website. The reset password API takes two parameters (1. The new password and 2. The reset password token was sent to their email).

So make sure to include this in the reset password payload. The two main APIs are shown below.

And boy oh boy we are done!

Happy coding, like the article, leave a comment, and share.