# The Complete Django 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 tutorials.

So in our previous [section](https://blog.teachmebro.com/building-admin-dashboard-using-django-admin), we have successfully added models to admin and access them via the **Admin interface**. Let's quickly add the `Login` and `Logout` features 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 `urlpatterns` 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`:

```
 url(r'^logout/$', auth_views.LogoutView.as_view(),{'template_name': 'core/logout.html'}, name='logout'),
```
After Adding The Above Line in `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 at [TeachMeBro--Social-App](https://github.com/altafshaikh/TeachMeBro--Social-App) 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](https://github.com/altafshaikh/Friends-The-Social-Network) and you can directly learn from their by referring the project or you can also contribute to that project if you wish to. 

Thank You So Much 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,

%[https://www.youtube.com/playlist?list=PLMoaiG_x8uS5Fi7oE67Z5ej-mPuJb8WnK]

Project Demo
------------

%[https://youtu.be/wipqpB8lnRs]

`Keep Learning, Keep Growing :D`
