Password Reset Views in Django

Django comes packed with the ability of a user to receive an email prompt to reset their password when they forget it using the inbuilt password reset views. This works via the Simple Mail Transfer Protocol(SMTP). In this article, we will be using Gmail as our host service provider.

Firstly, go to settings.py and setup our SMTP parameters.

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_HOST_USER = '<Your Gmail address>'
EMAIL_HOST_PASSWORD = '<Your Gmail password>'
EMAIL_USE_TLS = True

Note that the default views Django provides for this are class based views. In urls.py, we will import the views first:

from django.contrib.auth import views as auth_views

Next, within the urlpatterns of our urls.py, we need to add the following paths:

urlpatterns = [
  path('reset_password/', auth_views.PasswordResetView.as_view(), name ='reset_password'),
  path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(), name ='password_reset_done'),
  path('reset/<uidb64>/<token>', auth_views.PasswordResetConfirmView.as_view(), name ='password_reset_confirm'),
  path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(), name ='password_reset_complete'),
]

NOTE:
The names of the paths must be exactly as named above because these are the names Django expects. This means that the names must be:

1) reset_password,
2) password_reset_done,
3) password_reset_confirm
4) and password_reset_complete

Also, note the while Django provides us with default templates for all four routes, we can go ahead to customize this by adding in our own created template names. We will create four new templates to render each URL route and add the names within the as.view() method.

We will name our templates as follows:
1) reset_password.html
2) password_reset_sent.html
3) password_reset_form.html
4) password_reset_done.html

Next, add them as a template_name:

urlpatterns = [
  path('reset_password/', auth_views.PasswordResetView.as_view(template_name = "reset_password.html"), name ='reset_password'),
  path('reset_password_sent/', auth_views.PasswordResetDoneView.as_view(template_name = "password_reset_sent.html"), name ='password_reset_done'),
  path('reset/<uidb64>/<token>', auth_views.PasswordResetConfirmView.as_view(template_name = "password_reset_form.html"), name ='password_reset_confirm'),
  path('reset_password_complete/', auth_views.PasswordResetCompleteView.as_view(template_name = "password_reset_done.html"), name ='password_reset_complete')
]

FINALLY, LET'S LOAD IN OUR TEMPLATES

A) Within reset_password.html, we pass in the view using the {{form}} because this is the default parameter that Django expects.

{extends 'base.html' %} 
{% block content %}

<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Welcome to the Password Reset Page</h1>
  <h3>
    Forgot your password? Please enter the email address you used to register
    with us and we will send you a link to reset your password
  </h3>
</div>
<br/>

<form action="" method="POST" class="text-center">
  {% csrf_token %}
  {{form}}
  <input type="submit" value="Send email" /><br>
</form><br/>
<div class="text-center">
  <a href="{% url 'home' %}">Return to home page</a>
</div>

{% endblock%}

B) In password_reset_sent.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
   <h1>Password reset sent</h1> 
   <h5>We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.</h5><br>
   <h6 style="width: 60%; margin: 0 auto">If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</h6>
</div>
<div class="text-center">
  <a href="{% url 'home' %}">Return to home page</a>
</div>
{% endblock%}

C) Thirdly, we render our password_reset_form.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Password Reset Form</h1>
  <h6 style="width: 60%; margin: 0 auto">
    Please enter your new password so we can verify.
  </h6>
</div>
<br />
<form action="" method="POST">
  {% csrf_token %} 
  {{form}}
  <input type="submit" value="Reset Password"/>
</form>

{% endblock%}

D) Lastly, within, password_reset_done.html

{% extends 'base.html' %} 
{% block content%}
<div class="text-center" style="width: 80%; margin: 0 auto">
  <h1>Password reset complete</h1>
  <h6 style="width: 60%; margin: 0 auto">
    Your Password has been set. You may go ahead and login
  </h6>
</div>
<br />
<div class="text-center">
  <a href="{% url 'login' %}">Login</a>
</div>
{% endblock%}

In conclusion, when using GMAIL, you may get an 'SMTP Authentication error. The simple solution to this is to activate the 'less secure apps' option underneath your GMAIL settings.

Blog

Password Reset Views in Django

Yahaya Kehinde

Join Our Newsletter. No Spam, Only the good stuff.

Related