Django Tutorial
What is Django?
How Django Works?
Django - Creating a Project
Django- Creating an App
Django- Models
Django- Forms
Django – Views
Django- Templates
Django- URLs
Django- Admin
Complete Authentication System
Setting Up Django Environment Setup
Author Profile Altaf Shaikh
Altaf Shaikh

BE Engg | Python Dev | Content Writer | Founder of TeachMeBro | Blockchain Dev | Django

Complete Authentication System

February 17th 2020

Complete Authentication System
Complete Authentication System

This is the final step in making a basic Authentication system or App in Django. There are many other concepts that we will cover in our further tutorial.

So in our previous TUTORIAL, we have successfully added models to admin and access them via the Admin interface. Let's quickly add the Login and Logout feature in our Django app and complete our system. 

Login

Let's add login functionality first, you will notice that it is very easy to add login feature than signup feature and logout is very easy if we are using Django's built-in the authentication system, which we are using.

Open the social/urls.py file:

import the below package on the top of the file

from django.contrib.auth import views as auth_views

and now add the below URL in the URL pattern  list,

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r"^$", acccount_views.IndexView.as_view(), name="index"),
    url(r"^signup/$", acccount_views.signup, name="signup"),
    #login url goes here
    url(r'^login/$', auth_views.LoginView.as_view(),{'template_name': 'core/login.html'}, name='login'),
]

Now in the account/templates/registration/ folder create a login.html file and paste the below code in it:

<!-- login.html -->

<!DOCTYPE html>
<html>
<head>
<title>LOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

<link rel="shortcut icon" type="image/png" href="/static/logo.png"/>
<link href="/static/account/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">
</head>
<body>
	<!-- main -->
	<div class="main-w3layouts wrapper">
		<h1>LOGIN</h1>
		<div class="main-agileinfo">
			<div class="agileits-top">
				<form method="post">
					{% csrf_token %}
					{{form.as_p}}
					<div class="wthree-text">
						<label class="anim">
							<input type="checkbox" class="checkbox" required="">
							<span>I Agree To The Terms & Conditions</span>
						</label>
						<div class="clear"> </div>
					</div>
					<input type="submit" value="LOGIN">
				</form>
				<p>Don't have an Account? <a href="{% url 'signup' %}"> SignUp Now!</a></p>
			</div>
		</div>

		<div class="w3copyright-agile">
			<p>© 2020 TeachMeBro LOGIN Form. All rights reserved | Design by Team TeachMeBro</p>
		</div>

		<ul class="w3lsg-bubbles">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<!-- //main -->
</body>
</html>

Logout

To implement logout just add the below URL into the social/urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r"^$", acccount_views.IndexView.as_view(), name="index"),
    url(r"^signup/$", acccount_views.signup, name="signup"),
    url(r'^login/$', auth_views.LoginView.as_view(),{'template_name': 'core/login.html'}, name='login'),
    #this url here
    url(r'^logout/$', auth_views.LogoutView.as_view(),{'template_name': 'core/logout.html'}, name='logout'),
]

Now in the account/templates/registration/ folder create a logout.html file and paste the below code in it:

<!-- logout.html -->


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Logout</title>
    </head>
    <body>
        <div class="container-fluid">
            <h1>Logout Successfully</h1>
        </div>
    </body>
    </html>

and also in the index.html add this line inside it:

<h1><p><a href="{% url 'logout' %}"> Logout </a></p></h1> 
<h1>Please login here <p><a href="{% url 'login' %}"> Login Now!</a></p></h1>

now your index.html should look like this: 

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home</title>
</head>
<body>

    {% if user.is_authenticated %}
        <h1>Welcome, {{user.username}} You Successfully Logged In</h1>
        <!--add this line here-->
        <h1><p><a href="{% url 'logout' %}"> Logout </a></p></h1> 
    {% else %}
        <!-- also here-->
        <h1>Please login here <p><a href="{% url 'login' %}"> Login Now!</a></p></h1>
        <h1><p><a href="{% url 'signup' %}"> Signup</a></p></h1>
    {% endif %}
</body>
</html>

That's it! Congratulations you have successfully implemented an Authentication System or App in Django. You can find the project repository link here for this tutorial.

The complete Social Media Web application is very large. It is difficult to teach in one single go. So we will cover the more advanced concept step by step in our further tutorials. You can get the Full Source code of the Friends-Social Media app here and you can directly learn from their by referring the project or you can also contribute to that project. Thank You and stay tuned with us for more cool tutorials and projects : )

Learn how to build Social Media Website In Django Full Tutorial Video available here,

Django Tutorial For Beginners: Django BootCamp

Project Demo

Happy Learning :D