Azeez Aremu
Django way

Django way

Django Login and Logout Users

Django Login and Logout Users

Azeez Aremu's photo
Azeez Aremu

Published on Aug 3, 2021

8 min read

Subscribe to my newsletter and never miss my upcoming articles

Hello and welcome to the second part of this series, I hope you have implemented the user's registration with email confirmation discussed in part one, today we will implement the following

  • Authentication Vs Authorization

  • User Login and Logout

  • Password change while logged in

Authentication Vs Authorization

Auth.jpeg

Recall we collected the user's information during the registration and now the user is back to claim that they have data with us and so we need to confirm that, This is where authentication comes in.

Authentication is to confirm that the user is who they claim to be by collecting some of the registered information and search through the database if there is any user with such information.

Note: Information to be collected from the user has to be the ones unique to the user. information like email, username, and most importantly password.

If we successfully confirmed the user, then we need to limit the user free movement on what the user can do and can't do, This is where authorization comes in

Authorization is determining the permission the user has as a concern to what they can perform or not.

E.g if we have a blog company with series of writers but we want to limit some writers to not be able to edit the blog posts, though we have confirmed that the writer is who they claim to be but they won't be able to edit the posts as they don't have the permission to do that.

Login User

From part one of this series, we have extended the Django built-in User model which makes use of username and password fields to authenticate users. So we will be authenticating our users by collecting their username and password.

We can decide to ask our users to input email instead of username by adding the line below to our User model in our application's models.py file

email = models.EmailField(unique=True)

REQUIRED_FIELDS = ['username','password']
USERNAME_FIELD = 'email'

Django has its way of forcing us to do some stuff which I think is cool, So to change the username field to the email field we need to ensure that the email field is specified with a unique attribute and also removed it from the list of the required field. Also, the required fields specified are just for the fields to be requested for when creating a superuser.

We can log in users by

  • Using Django built-in login function Or
  • We create our own login function

Using Django Login

Firstly we have to create the path in our app URLs file as shown below

from django.contrib.auth import views as auth_views

#Add to the urlpatterns list
path('login/', auth_views.LoginView.as_view(template_name='users/login.html'),name = 'login'),

So we imported the auth module which has the class-based view LoginView as auth_views(this can be any name). Also, we have specified the HTML file to present to the user for the login as users/login.html. By default, if the HTML file is not specified, Django looked for the file in 'registration/login.html'.

Yes we have no view to write as you have guessed, what is just left is to update our login.html file with the lined of code below

{% extends 'users/base.html' %}


{% block content %}

<div class="container">
    <div class="row mt-5">
        <form class="col-md-6 mx-auto mt-5" method="POST" action="{% url 'login' %}">
            {% csrf_token %}
            <h3>Login Form</h3>
            <hr>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert-{{ message.tags }} rounded alert-dismissible text-center my-4 py-2" role="alert">

                    {{message}}

                    </div>
                {% endfor %}
            {% endif %}

            <div class="form-group">
                <label class="form-label">Username</label>
                <input type="text" class="form-control" name='username'>
            </div>

            <div class="form-group">
                <label class="form-label">Password</label>
                <input type="password" class="form-control" name='password'>
            </div>

            <button type="submit" class="btn btn-block btn-outline-info">Submit</button>

            <input type="hidden" name="next" value="{{ next }}">

            {% if user.is_authenticated %} 
            <hr>
            <div class="row mx-1">
            <a class="btn btn-danger" href="#">Logout</a>
            <a class="btn btn-danger ml-auto" href="#">Change Password</a>
            </div>
            {% endif %}

        </form>

    </div>
</div>

{% endblock %}

Going through the login.html file, we have included the section enclose in {% if user.is_authenticated %} .... {% endif %} to only show the two buttons there if the user is successfully authenticated i.e logged in.

But wait, we still need to update our settings.py file with

LOGIN_URL = '/login/'
LOGIN_REDIRECT_URL = '/login/'

So the use of the LOGIN_URL is to tell Django our login path when it's time to redirect users who are not logged in to the login page. As for the LOGIN_REDIRECT_URL, it is useful for redirecting the user on successful login.

Custom Login

If you recall, we have extended our User model with is_verified field which made us send an email for confirmation and so we have decided that users who do not confirm their email will not be allowed to log in but we can not do that with the Django built-in Login and so let's redefine the login view.

In the application urls.py file add update with the lines below

from .views import Login,

#Add to urlpatterns list
path('login_user/', Login, name = 'login'),

In the views.py file add the lines below

from django.contrib.auth import  authenticate,login
from .forms import LoginForm

def Login(request):

    if request.method == 'POST':
        form = LoginForm(request.POST)
        if form.is_valid():
            user = authenticate(request, username=form.cleaned_data.get('username'), password=form.cleaned_data.get('password'))
            if user is not None:
                if user.is_verified:
                    login(request,user)
                    messages.success(request, 'Login successfully done')
                    return redirect('login')
                else:
                    messages.error(request, 'Please confirm your email')
                    return redirect('login')
            else:
                messages.error(request, "Invalid credentials provided")
                return redirect('login')
    return render(request, 'users/login.html')

So the Login view collects the user's username and password, uses the imported authentication package to confirm the user's submitted credentials in the database, and if a matched user is found it check if such user has its is_verifed field as True, it now logs in the user using the login package. Also if any of the if conditions is False we have taken care of what to show and where to redirect the user as shown in the code.

And we should not forget to add the LoginForm we used in the Login view above by updated the forms.py file in our application

class LoginForm(forms.Form):
    username = forms.CharField(max_length=200)
    password = forms.CharField(max_length=200)

So users with correct login credentials and has is_verified True will see the response as shown below

Screenshot (217).png

Users with correct credentials but is_verified False will see the response

Screenshot (213).png

While users with wrong credentials will have the response below

Screenshot (215).png

Logout User

So our successful login page has shown a logout button but does nothing, Now let's attach the link below to it

<!-- Replace the logout button with the below-->
<a class="btn btn-danger" href="{% url 'logout' %}">Logout</a>

So like login, Django has a logout view which we will use by adding the line below to the application urls.py file

#Add to the urlpatterns list
path('logout/', auth_views.LogoutView.as_view(), name='logout'),

what the above does is to clear any session created associated with the user sending the request and thus we need to tell Django where to take us after successful logout by adding the line below to our settings.py file

LOGOUT_REDIRECT_URL = '/login/'

And that's it, Our users can now log in and log out as they wish......

Password Change

After successful login, you see that we have made the logout and change password button visible to the users. Now let's take care of the change password section by following the steps below

  1. Replace the change password button in login.html to the below
<a class="btn btn-danger ml-auto" href="{% url 'change-password' %}">Change Password</a>
  1. Add the URL path in the application urls.py file
from .views import change_password

#Add to the urlpatterns list
path('change-password/', change_password, name = 'change-password'),
  1. Create the change_password view in the views.py file
from django.contrib.auth.decorators import login_required
from .forms import PasswordChangeForm
from django.contrib.auth import update_session_auth_hash

@login_required()
def change_password(request):
    if request.method == 'POST':
        form = PasswordChangeForm(request.POST)
        if form.is_valid():
            user = request.user
            user.set_password(form.cleaned_data.get('new_password'))
            user.save()
            #keep user logged in
            update_session_auth_hash(request, user) 
            messages.success(request, 'Password changed successfully')
            return redirect('login')
        else:
            return render(request, 'users/password_changed.html', {'form':form})

    return render(request, 'users/password_changed.html')

We have used the login_required decorator to ensure that this view can only be accessed by users who are logged in i.e have been authenticated, where we use request.user is to get the current logged in user credentials to locate such user in the database and also the update_session_auth_hash to update the session info about the logged in user and thus keep the user logged in else the user will be redirected to the login page for a new login which we do not want.

  1. Now let's update our forms.py file which is to include the PasswordChangeForm class
class PasswordChangeForm(forms.Form):
    new_password = forms.CharField(max_length = 30)

    def clean_new_password(self):
        new_password = self.cleaned_data.get('new_password')

        #check password length
        if len(new_password) < 8:
            raise ValidationError("Password can't be less than 8 characters")
        #check for number and letters is password
        if new_password.isalpha() or new_password.isnumeric():
            raise ValidationError("Password should contains both letters and numbers")

        return new_password

Here we created an input new_password field which we have cleaned i.e validated with the clean_new_password method which is called when the form.save() is called.

  1. Lastly let's create the password_changed.html page to present to the user to input their new password. Create password_changed.html in the users folder which is in the application templates folder and paste the lines below
{% extends 'users/base.html' %}


{% block content %}

<div class="container">
    <div class="row mt-5">
        <form class="col-md-6 mx-auto mt-5" method="POST">
            {% csrf_token %}
            <h3>Change Password Form</h3>
            <hr>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert-{{ message.tags }} rounded alert-dismissible text-center my-4 py-2" role="alert">


                    {{message}}

                    </div>
                {% endfor %}
            {% endif %}

            {% for error in form.errors %}
            <div class="alert-danger alert-dismissible rounded text-center my-4 py-2" role="alert">

                {% if error == 'new_password' %}
                    {{form.new_password.errors.0}} 
                {% endif %}

            </div>
            {% endfor %}
            <div class="form-group">
                <label class="form-label">New Password</label>
                <input type="password" class="form-control" name='new_password'>
                <small>
                    <ul>
                        <li>minimum of Eight Characters</li>
                        <li>Contains letters and numbers</li>
                    </ul>
                </small>
            </div>

            <button type="submit" class="btn btn-block btn-outline-info">Submit</button>

        </form>

    </div>
</div>

{% endblock %}

And that's it our user can change their password when logged in

Screenshot (219).png

Screenshot (218).png

And that's it for this article, We will look into password reset when not logged in in the last part of the series.

Take care and stay safe !!!

 
Share this