How to Create User Authentication with the Django Framework on Ubuntu 18.04

Brown wooden door with padlock courtesy of iMattSmart on Unsplash.com

Introduction

When building a web application, you may need to allow users to log in to be able to use the application and log out of the application when they are done. The process of providing users with access to the application is called User Authentication.

Prerequisites

You need to have met the following requirements in order to complete this tutorial.

  • Familiarity with Django framework and Django-admin interface
  • You must have created your Django project with superuser privilege so that you will be able to implement the concepts in this tutorial. You can follow how to create a Django app and connect it to a database to create a basic blog app with Django and follow the tutorial on how to enable and connect the Django admin interface to create superuser privilege. If you however have an existing Django project with superuser privilege, you may use it for this tutorial.

Step 1 — Implement the login and logout views

Firstly, let’s create an app to handle our authentication. Therefore, we can use the app again in any other projects. We will do this by navigating to the directory of our Django project with the following command:

$ cd [project name]
$ django-admin startapp user_account
[label /my_django/my_django/settings.py]
INSTALLED_APPS = [
'user_account',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
$ python manage.py migrate
[secondary_label Output]
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying sessions.0001_initial... OK
python manage.py createsuperuser
[label /my_django/user_account/urls.py]
from django.urls import path
from django.contrib.auth import views as auth_views

urlpatterns = [
path('login/', auth_views.LoginView.as_view(), name='login'),
path('logout/', auth_views.LogoutView.as_view(), name='logout'),
]
[label /my_django/my_django/urls.py]
from django.urls import path, include
from django.contrib import admin

urlpatterns = [
path('admin/', admin.site.urls),
path('user_account/', include('user_account.urls')),
]

Step 2 — Create Templates to Render the Views

We shall create a template for each of the views. But we need to make a base template that other templates can extend. Django has an inbuilt templating engine with its syntax and it is simple to understand.

templates/
| registration/
| | login.html
| | logout.html
| user_account/
| |
|_main.html
[label /my_django/user_account/templates/main.html]
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}My Django{% endblock %}</title>
<link href="{% static "css/main.css" %}" rel="stylesheet">
</head>
<body>
<div class="header" id="header">
<span class="">My Django Website</span>
</div>
<div class="content" id="content">
{% block content %}

{% endblock %}
</div>
</body>
</html>
static/
|_main.css
[label /my_django/user_account/static/main.css]

body {
font-family: 'Ubuntu', 'Monteserrat', sans-serif;
font-weight:normal;
margin: 0;
}

.header {
background-color: #01314d;
color: #ffffff;
font-family: Monteserrat, Ubuntu;
padding:10px 100px;
font-size:42px;
overflow:auto;
display: flex;
justify-content: center;
}

.content-body {
display: flex;
justify-content: center;
}

.user {
display: flex;
justify-content: center;
}

form {
overflow:auto;
}

.form-intro {
display: flex;
justify-content: center;
font-weight: lighter;
font-style: italic;
}

.home-intro {
color: #2d6102;
font-style: italic;
background-color: #ecc208;
display: flex;
justify-content: center;
font-weight: lighter;
margin: 0;
border: 0;
padding: 3%;
}

.welcome-text {
display: flex;
justify-content: center;
}

form p {
width:100%;
overflow:auto;
display: flex;
justify-content: center;
display: flex;
justify-content: center;
}

label {
float:left;
clear:both;
color:#333333;
margin-top:1.5%;
margin-bottom:4px;
font-size: 20px;
}

input[type=text], select {
float: left;
width: 25%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=password], select {
float: left;
width: 25%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
float: left;
background-color: #4caf50;
border: none;
color: #ffffff;
padding: 16px 10%;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 40px;
}
[label /my_django/user_account/templates/user_account/login.html]
{% extends "main.html" %}

{% block title %}Login Page{% endblock %}

{% block content %}
<h1 class="form-intro">Log-in</h1>
<p class="form-intro">Please, use the following form to log-in:</p>
<hr>

<div class="login-form">
<form action="{% url 'login' %}" method="post">
{{ form.as_p }}
{% csrf_token %}
<input type="hidden" name="next" value="{{ next }}" />
<p><input type="submit" value="Log-in"></p>
</form>
</div>
{% endblock %}
[label /my_django/user_account/templates/logged_out.html]
{% extends "main.html" %}

{% block title %}Log-out Page{% endblock %}

{% block content %}
<h1>you are logged out</h1>
<p>You have been logged out. You can however &nbsp<a href="{% url "login" %}">log in again</a>.</p>
{% endblock %}

Step 3 — Implement Login Redirect

Now, let us create the homepage that the users will be directed to after login. From there, they can log out. We need a view to handle that for us. Let’s head to the views.py of our user_account app. Then, we will add some codes there. Firstly, add the following imports at the beginning:

from django.contrib.auth.decorators import login_required
from django.shortcuts import render
[label /my_django/user_account/views.py]
from django.contrib.auth.decorators import login_required
from django.shortcuts import render

@login_required
def homepage(request):
return render(request, 'user_account/homepage.html')
from django.contrib.auth import views as auth_views
from django.urls import path
from . import views

urlpatterns = [
path('login/', auth_views.LoginView.as_view(), name='login'),
path('logout/', auth_views.LogoutView.as_view(), name='logout'),
path('homepage/', views.homepage, name='homepage'),
]
LOGIN_REDIRECT_URL = 'homepage'
templates/
| registration/
| | login.html
| | logout.html
| user_account/
| | homepage.html
|_main.html
[label /my_django/user_account/templates/user_account/homepage.html]
{% extends "main.html" %}

{% block title %}Homepage{% endblock %}

{% block content %}
<h1 class="home-intro content-body">Home Page</h1>
<p class="welcome-text">Welcome buddy, have fun.</p>
<div class="content-body">
{% if request.user.is_authenticated %}
If you wish you can &nbsp<a href="{% url "logout" %}"> logout </a>
<!-- &nbsp gives white space in HTML-->
{% endif %}
</div>

{% endblock %}

Software | Aerospace Undergrad • ex-Lead @GoogleDevs’ DSC KWASU