Jungletronics
Published in

Jungletronics

A Django Blog In VS Code — Self-Service Django Password Reset

How To Create A Blog in VS Code — Part X — DjangoSeries Episode # 13

How do you implement password reset functionality for regular site users?How do we make a password reset page?

In this tutorial, we will use the Django Password Reset Form to allow users to reset their own passwords using the self-service password reset tool. This allows users to reset their passwords as needed.

We will take a look at configuring the Google SMTP service provider and finally how to use the send_mail() function in Django which helps us send emails.

Here’s the user and server communications in graphic:

Django’s Authentication views help manage password resets for users without superuser status. See better here 👈 or here

Index:

PASSWORD_RESET

PASSWORD_RESET _DONE

PASSWORD_RESET _CONFIRM

PASSWORD_RESET _COMPLETE

Motivations

Self-service password reset eliminates the need to talk to a service provider and users have access to it regardless of the time of day, password self-service is typically available 24/7 via desktop or mobile devices; self-service password reset expedites problem resolution for users and thus reduces service desk call.

Let’s get started!

Here is my Django Conventions Table:

What we want is a password_reset page where the user can enter their email address, and be sent a cryptographically secure email with a one-time link to a reset page

This is the complete set of views and URLs provided by the Django auth app:

accounts/login/ [name='login']
accounts/logout/ [name='logout']
accounts/password_change/ [name='password_change']
accounts/password_change/done/ [name='password_change_done']
accounts/password_reset/ [name='password_reset']
accounts/password_reset/done/ [name='password_reset_done']
accounts/reset/<uidb64>/<token>/ [name='password_reset_confirm']
accounts/reset/done/ [name='password_reset_complete']

We will only be using the last four URLs related to password reset.

00#Step — This is a continuation of this post.

PASSWORD_RESET — : Modus operandi V(iew) U(rls) T(emplate)

01#Step — V(iew): Django already has all the views as CBVs:

django.contrib.auth.PasswordResetView
django.contrib.auth.PasswordResetDoneView
django.contrib.auth.PasswordResetConfirmView
django.contrib.auth.PasswordResetCompleteView

02#Step — U(rls): GoTo django_project\urls.py, and add these lines:

from django.contrib.auth import views as auth_views
...
urlpatterns = [
...
path('password_reset/', auth_views.PasswordResetView.as_view(template_name="users_hub/password_reset.html"), name='password_reset'),
...
]

03#Step — T(emplate): Create inside a template user_hub\templates\user_hub\password_reset.html, and add these lines:

PASSWORD_RESET _DONE— : Modus operandi U(rls) T(emplate)

This next route is just going to be the page for when our password reset form is submitted successfully (2 IN GRAPH)

04#Step — U(rls): GoTo django_project\urls.py, and add these lines:

from django.contrib.auth import views as auth_views
...
urlpatterns = [
...
path('password_reset_done/', auth_views.PasswordResetDoneView.as_view(template_name="users_hub/password_reset_done.html"), name='password_reset_done'),
...
]

05#Step — T(emplate): Create inside a template user_hub\templates\user_hub\password_reset_done.html, and add these lines:

PASSWORD_RESET _CONFIRM — : Modus operandi U(rls) T(emplate)

06#Step — U(rls): GoTo django_project\urls.py, and add these lines:

from django.contrib.auth import views as auth_views
...
urlpatterns = [
...
path('password_reset_confirm/<uidb64>/<token>/', auth_views.PasswordResetConfirmView.as_view(
template_name='users_hub/password_reset_confirm.html'), name='password_reset_confirm'),

...
]

Just be aware of these points:

1- <uidb64> is the user’s primary key encoded using the secret key in settings; it stands for User ID urlsafe_base64_decode;

2- <token> it’s an instance of django.contrib.auth.tokens.PasswordResetTokenGenerator;

3- We will have to accept those URL parameters there because it expects those so now the view that we want to.

07#Step — T(emplate): Create inside a template user_hub\templates\user_hub\password_reset_confirm.html, and add these lines:

PASSWORD_RESET _COMPLETE— : Modus operandi U(rls) T(emplate)

08#Step — U(rls): GoTo django_project\urls.py, and add these lines:

from django.contrib.auth import views as auth_views
...
urlpatterns = [
...
path('password_reset_complete/', auth_views.PasswordResetCompleteView.as_view(
template_name='users_hub/password_reset_complete.html'), name='password_reset_complete'),

...
]

09#Step — T(emplate): Create inside a template user_hub\templates\user_hub\password_reset_done.html, and add these lines:

10#Step — T(emplate): Create inside user_hub\templates\user_hub\password_reset_done.html, and add these lines:

Here is the complete django_project/urls.py:

11#Step — Let’s try to run the server and see what’s going on…Type on Terminal:

python manage.py runserver
#1 — ASK_RESET: Now Point URL to http://127.0.0.1:8000/password_reset/
😒If ERROR : This says connection refused; We can tell you that what’s going on here is that it’s trying to send an email but it’s failing so right now we don’t have an email server or anything like that to send email. In this post we will use GMAIL account 👈

Let Google know to expect sign-ins from a Python application

12#Step — GoTO django_project/settings.py, and at the very end, type:

EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'EMAIL_HOST = 'smtp.gmail.com'EMAIL_PORT = 587EMAIL_USE_TLS = TrueEMAIL_HOST_USER = os.environ.get('EMAIL_USER')EMAIL_HOST_PASSWORD = os.environ.get('EMAIL_PASS')

Note:

Invalid login: 534–5.7.9 Application-specific password required.If you receive this error when attempting to connect your inbox to the platform it indicates that you have 2 factor authentication enabled under the inbox you are attempting to connect, and will need to create an App password under your Google account in order to get it connected to the platform. In order to create an app password, please follow our guide on how to do this here.

13#Step — Again, Point your browser URL to:

 http://127.0.0.1:8000/password_reset/

You would see:

#2—RECEIVE_EMAIL: The server asks you to open your GMAIL account…
There you have it! 😍Click the link…
#3 — CONFIRM_PASSWORD: Now you can re-type your password…
#4 — COMPLETE_MSG: The process is successful! 🥳 CONGRATULATIONS!

Just one more thing that we need to do we haven’t actually created a link anywhere.

Just do it!

14#Step — GoTo the login template and put that there:

Right after the submit button:

<div class="form-group"><button class="btn btn-outline-info" type="submit">Login</button>   <small class="text-muted ml-2">
<a href="{% url 'password_reset' %}">Forgot Password?</a>
</small>
</div>

And here is the result:

Forgot password? Here’s how to reset your password.

Ok, at that point the user would go through that whole process.

Finally in the next tutorial we will upload our project to HEROKU.

Do not miss your chance to be the next Django Webmaster!

See you around. Bye!

👉 git

References & Credits

Python Django Tutorial: Full-Featured Web App by Corey Schafer

Django Password Reset Tutorial by learndjango.com

Using the Django authentication system by djangoproject.com

Reset User Passwords in Django by Hannah

Reset User Passwords in Django by Jaysha

Google Error — Invalid login: 534–5.7.9 by Tyler Benson

Configure for Google Workplace with Two Factor Authentication (2FA) by warmupinbox.com

Related Posts

00#Episode — DjangoSerie — Django Intro — How To Build your First App in Python Django Framework — DjangoSeries

01#Episode — DjangoSerie — Django MTV In VS Code — How To Install Django Inside Virtual VS Code

02#Episode — DjangoSerie — Can You Solve This in Python? — Here is A Basic Python Question!

03#Episode — DjangoSerie — JUNGLE-DJANGO Webpage! This Is My New Django Netflix Clone Page!

04#Episode — DjangoSerie — A Django Blog In VS Code — Quick Start!Part_I

05#Episode — DjangoSerie — A Django Blog In VS Code — Database, Migrations & Queries — Part_II

06#Episode — DjangoSerie — A Django Blog In VS Code — Bootstrap, Tailwind CSS — Part_III

07#Episode — DjangoSerie — A Django Blog In VS Code — Forms & Validations — Part_IV

08#Episode — DjangoSerie — A Django Blog In VS Code — Login & Logout — Part_V

09#Episode — DjangoSerie — A Django Blog In VS Code — Upload Profile Picture — Part_VI

10#Episode — DjangoSerie — A Django Blog In VS Code — Update & Resize Picture — Part_VII

11#Episode — DjangoSerie — A Django Blog In VS Code — Class-Based-View & CRUD — Part_VIII

12#Episode — DjangoSerie — A Django Blog In VS Code — Posts Pagination & Quick DB Population — Part_IX

13#Episode — DjangoSerie — A Django Blog In VS Code — Self-Service Django Password Reset — Part_X (this one :)

14#Episode — DjangoSerie — A Django Blog In VS Code — Heroku Deploy — How To Push Your Site To Productio — Part_XI (this last one…whew!)

HowTo Run this Tutorial - From the Scratch - In your Machine:)Annotations: Quick Start - video #TakeTheFirstStepToLearnDjango0 - Download DJG_<previous>/Django_project from my git repo;
1 - On your desktop, create a dir and named it as Tutorial_#;
2 - Inside this paste the previous Django_project file;
3 - GoTo vscode Terminal (command prompt) and ...
4 - Run this quick_script
(copy/paste inside you terminal and hit enter and wait until
Pillow is up and running...):
python -m venv djangoEnv
djangoEnv\Scripts\activate
python -m pip install --upgrade pip
python -m pip install django
python -m django --version
pip install django-crispy-forms
pip install Pillow
5- GoTo Step#01 of this tutorial.And you are good to go!

Success is stumbling from failure to failure with no loss of enthusiasm.

Winston S. Churchill

Step_by_step of this tutorial — Bonus 👌

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store