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

Prerequisites

Step 1 — Implement the login and logout views

$ 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

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

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