More Secure Passwords With Angular and Django

Klement Omeri
Apr 18, 2020 · 6 min read
Photo by Philipp Katzenberger on Unsplash

Even though I describe myself as a Pythonista today I have realized that I have always been writing only for the front-end. I like Angular and the world of front-end development but when it comes to python💛💙 it is different for me.

So I decided to show something related to backend and I ended up writing this piece which has to do with both front and back. (Looks like there is a hidden love for the front-end too)

In this piece, I am going to show you how you can ask your users to choose more secure passwords with a good user experience. Let’s take a look at what the product of this article will be. Below GIF is taken from the library npm site.

We will be using the excellent library password-strength from material-extensions. Thanks to Antony Nahas and all the contributors.

I have the front and back repo here if you are a show me the code type.

I am skipping the project creation stuff, docs already explain it better than me. I have those two project structures:

  • Front (Angular)
  • Back (Django and Django REST)

Begin with Backend

As always let me begin with the backend❤️ Let’s install the requirements:

I will be skipping the configuration, they are out of the scope of this article. Please ask me if you struggle with anything. I highly suggest checking the Djoser lib in detail, it is a really good one built by the sunscrapers.

Now thanks to Djoser lib I have a working endpoint which I can create a user. Let’s run the server and hit it. http://127.0.0.1:8000/auth/users/

So I have made a try to create a user but the password(test) is not filling out the requirements so I got those error messages. Let’s look at what type of requirements does Django has by default. A section from settings.py below.

  • User Attribute Similarity — Ensures the password is not similar to user attributes like email, username and first and last names
  • Minimum Length Validator — Ensures the password is at least 8 chars. This can be changed by adding an option below like so
'django.contrib.auth.password_validation.MinimumLengthValidator',
'OPTIONS': {
'min_length': 8,
}
},
  • Common Password Validator — Ensures the password is not inside a 20.000 of passwords length of a list. Comparing is case-insensitive.
  • Numeric Password Validator — Ensures the password is not entirely numeric

The above validators are the default ones and can be extended which is exactly what we are going to do. We are going to write some more validators ourselves.

  • Number Validator
  • Upper Case Validator
  • Lower Case Validator
  • Symbol Validator

Above you see the validators.py file, it is as simple as it gets. We check for our condition and raise a Validation Error if it is not met.

Add new validators to settings.py:

Let’s check out what does the signup form looks like now.

OK, now the backend is done and we are sure it is not going to accept weak passwords even if the frontend sends them. Let’s move to the front-end side.

Front-end

So let’s begin with the front-end side of the work. We are going to create a signup form and then integrate the password-strength component from material-extensions inside it.

Install the library, you can check out the versions to install the required one for your angular version. The latest is v.6.0.0 which is Angular v9 supported.

Make sure you have angular material installed and configured the right way and you have BrowserAnimationsModule inside the imports of app.module

ng add @angular/material  // if material is not already installedng add @angular-material-extensions/password-strength

The above command will automatically add MatPasswordStrengthModule inside the imports array of app.module.ts but I have a lazy-loaded auth module for the sign-up components so let's move the module inside auth.module.ts

Build Sign up form

So we have the following sign up form.

I have linked server errors to an ordered list just below the password field. If we try to sign up without a valid password we can see the server errors like so:

Now we have the server errors displayed to the user but come on, who wants to show errors like this? Let’s integrate the material design password strength component.

After we have imported MatPasswordStrengthModule inside our module now we can use the following strength meter and strength info. Let’s give an identifier to our password input.

<mat-form-field appearance="outline" class="full-width">
<mat-label>Password</mat-label>
<input #password type="password" matInput formControlName="password" />
</mat-form-field>

Below the password field add password strength meter and info.

...
formControlName="password" />
</mat-form-field>
<div style="margin-top: 10px; margin-bottom: 10px; width: 100%;">
<mat-password-strength
#strength
[password]="password.value"
[enableLengthRule]="true"
[enableDigitRule]="true"
[enableLowerCaseLetterRule]="true"
[enableUpperCaseLetterRule]="true"
[enableSpecialCharRule]="true"

>
</mat-password-strength>
<mat-password-strength-info [passwordComponent]="strength">
</mat-password-strength-info>
</div>

As you can see you can enable or disable rules as you wish. Now the form looks like this:

We have finished the basic integration. There are lots of customizations that can be done. Please visit here to see all of them. I am going to show one of them which is how to change messages displayed to the user.

Inside mat-strength-info we can do something like this:

<mat-password-strength-info
[passwordComponent]="strength"
[digitsCriteriaMsg]="'The password must contain at least 1 digit'"
[minCharsCriteriaMsg]="'The password must contains at least 8 chars'"
[specialCharsCriteriaMsg]="'The password must contain 1 special char like (!£$%^&*()@~?,/.)'"

>
</mat-password-strength-info>

By doing so you can give any message you like to the strength info component.

Conclusion

We wanted to increase the security level of passwords. We have begun with the backend validation and used only this validation at first by showing to the user whatever error message backend sent. After that to give our users a better experience we have used the mat-password-strength library and integrated it into our sign up form. Of course, it was easier to show the error messages of the backend and just leave it like so. But we want the user experience to be the best it can be, especially on a signup form everything must be easier and password validation is not an exception. If you want your users to do something you want then you need to ask them the correct way.

Thanks for reading.

The Startup

Get smarter at building your thing. Join The Startup’s +789K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Klement Omeri

Written by

Software developer. Interested in Angular, NgRx, Django, pytest and many more. @OmeriKlement — https://www.linkedin.com/in/klement-omeri-929007174/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Klement Omeri

Written by

Software developer. Interested in Angular, NgRx, Django, pytest and many more. @OmeriKlement — https://www.linkedin.com/in/klement-omeri-929007174/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +789K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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