Full Authentication Tutorial (Login, Register, Logout & Reset Password)

This tutorial will teach you about authentication and registration in django.

Getting Started

1. Setting up a Django Project

Create and enter the desired directory for project setup.
Create a virtual environment using pipenv or other means:
```
pip install pipenv
pipenv shell
```
pipenv de-activation and re-activation
Install Django:
```
pip install django
```
Create a Django project called AuthenticationProject:
```
django-admin startproject AuthenticationProject
```
Create an app called Core:
```
python manage.py startapp Core
```
Open the project in your code editor.
Create a templates folder and register it in the project's settings.
Register the app in the project's settings.
Create URLs for the app and register them in the project's URLs.

Setup static files in settings.py:


import os # at top of file

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,  'staticfiles')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'), )

5. Getting Template Files from GitHub

Download the following HTML templates from GitHub:
- index.html
- login.html
- register.html
- forgot_password.html
- password_reset_sent.html
- reset_password.html

6. Making required imports

Head to your views.py file and import the following:

from django.shortcuts import render, redirect
from django.contrib.auth.models import User
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
from django.contrib import messages
from django.conf import settings
from django.core.mail import EmailMessage
from django.utils import timezone
from django.urls import reverse
from .models import *

7. Create a super user

Create a super user:

python manage.py createsuperuser

8. Creating Home, Register, & Login Views

Create home view:

def Home(request):
    return render(request, 'index.html')

Create two new views for Register and Login:

def RegisterView(request):
    return render(request, 'register.html')

def LoginView(request):
    return render(request, 'login.html')

Map views to urls:

path('', views.Home, name='home'),
path('register/', views.RegisterView, name='register'),
path('login/', views.LoginView, name='login'),

9. Working on Register View

Change static file links in all files:

<link rel="stylesheet" href="{% static 'style.css' %}">

Head to register.html and give input fields a name attribute & add csrf_token and change the login url:

<form method="POST">

    {% csrf_token %}
  
    <div class="txt_field">
        <input type="text" required name="first_name">
        <span></span>
        <label>First Name</label>
      </div>

      <div class="txt_field">
        <input type="text" required name="last_name">
        <span></span>
        <label>Last Name</label>
      </div>

    <div class="txt_field">
      <input type="text" required name="username">
      <span></span>
      <label>Username</label>
    </div>

    <div class="txt_field">
        <input type="email" required name="email">
        <span></span>
        <label>Email</label>
      </div>

    <div class="txt_field">
      <input type="password" required name="password">
      <span></span>
      <label>Password</label>
    </div>    

    <!-- <div class="pass">Forgot Password?</div> -->
    <input type="submit" value="Register">
    <div class="signup_link">
      Already have an account? <a href="{% url 'login' %}">Login</a>
    </div>
  </form>

In RegisterView view Check for incoming form submission and grab user data:

if request.method == 'POST:

    # getting user inputs from frontend
    first_name = request.POST.get('first_name')
    last_name = request.POST.get('last_name')
    username = request.POST.get('username')
    email = request.POST.get('email')
    password = request.POST.get('password')

validate the data provided:

create flag for error
```
user_data_has_error = False
```

validate email and username:

# make sure email and username are not being used

if User.objects.filter(username=username).exists():
    user_data_has_error = True
    messages.error(request, 'Username already exists')

if User.objects.filter(email=email).exists():
    user_data_has_error = True
    messages.error(request, 'Email already exists')

validate password length:

# make aure password is at least 5 characters long
if len(password) < 5:
    user_data_has_error = True
    messages.error(request, 'Password must be at least 5 characters')

Create a new user if there are no errors and redirect to the login page. Else redirect back to the register page with errors

if not user_data_has_error:
    new_user = User.objects.create_user(
        first_name = first_name,
        last_name = last_name,
        email = email,
        username = username,
        password = password
    )
    messages.success(request, 'Account created. Login now')
    return redirect('login')
else:
    return redirect('register')

Display incoming messages in register.html, login.html, forgot_password.html, and reset_password.html files:

{% if messages %}
    {% for message in messages %}
        {% if messages.tags == 'error' %}
            <center><h4 style="color: firebrick;">{{message}}</h4></center>
        {% else %}
            <center><h4 style="color: dodgerblue;">{{message}}</h4></center>
        {% endif %}
    {% endfor %}
{% endif %}

<form method="POST">
    ...
</form>

Test code to see if users can now register

10. Working on Login View

Head to login.html and give input fields a name attribute & add csrf_token and change the register url:

<form method="POST">
    {% csrf_token %}

    <div class="txt_field">
      <input type="text" required name="username"> 
      <span></span>
      <label>Username</label>
    </div>

    <div class="txt_field">
      <input type="password" required name="password">
      <span></span>
      <label>Password</label>
    </div>

    <input type="submit" value="Login">
    <div class="signup_link">
      Not a member? <a href="{% url 'register %}">Signup</a>
      <p>Forgot your Password? <a href="#">Reset Password</a></p> 
    </div>
  </form>

In LoginView view Check for incoming form submission and grab user data:

if request.method == 'POST:

    # getting user inputs from frontend
    username = request.POST.get('username')
    password = request.POST.get('password')

Authenticate the user details:


# authenticate credentials
    user = authenticate(request=request, username=username, password=password)
    if user is not None:
        # login user if login credentials are correct
        login(request, user)

        # ewdirect to home page
        return redirect('home')
    else:
        # redirect back to the login page if credentials are wrong
        messages.error(request, 'Invalid username or password')
        return redirect('login')

Restrict access to home page to authenticated users:

@login_required # restrict page to authenticated users
def Home(request):
    return render(request, 'index.html')

Set LOGIN_URL in settings.py file:

# where authenticated user gets redirected to when they try to access a login required view
LOGIN_URL = 'login'

Test if users can login

11. Logout View

Create logout view:

def LogoutView(request):

    logout(request)

    # redirect to login page after logout
    return redirect('login')

Map view to url:

path('logout/', views.LogoutView, name='logout')

Head to login.html file and replace the logout url:
```
<a href="{% url 'logout' %}">Logout</a>
```

12. Forgot Password Model & Views

Create the following views:

def ForgotPassword(request):
    return render(request, 'forgot_password.html')

def PasswordResetSent(request, reset_id):
    return render(request, 'password_reset_sent.html')

def ResetPassword(request, reset_id):
    return render(request, 'reset_password.html')