This blog will show you how to add login and logout features to your website.
In Django, this involves three steps: creating a view, making a template, and setting up URLs. These steps can be done in any order.
URLs → Templates →View
- First, we'll begin by creating the URLs for login and logout in the store/urls.py file.
from django.urls import path
from . import views
urlpatterns = [
path('',views.home,name='home'),
path('about/',views.about,name='about'),
path('login/',views.login,name='login'), # Newly Created
path('logout/',views.logout,name='logout'), # Newly Created
]
- Next, we'll create a template for the login page in templates/login.html, which will include the HTML, CSS, and JavaScript for the page.
💡
Good thing about Django is that it has built-in functionality for user login, logout, and authentication. This means we only need to import these features into our view file. We'll also add pop-up messages in the view file for better user feedback.
from django.shortcuts import render
from .models import Product
from django.contrib.auth import authenticate,login,logout # Newly Added
from django.contrib import messages # Newly Added
def home(request):
products = Product.objects.all()
return render(request, 'index.html', {'products':products})
def about(request):
return render(request, 'about.html',{})
def login_user(request):
return render(request, 'login.html',{})
def logout_user():
pass
After creating the Login page, we need to update templates/navbar.html to include links to the Login and Logout pages.
Now, run the Python server to check if the progress so far is visible.
python manage.py runserver
- Let's add the login and logout links to the templates/navbar.html with Django Template.
💡
Logic Building: We'll also write the logic so that when the user is logged in, the "Logout" option is displayed, and when the user is logged out, the "Login" option will be shown instead.
{% if user.is_authenticated %}
<li class="nav__item"></li>
<a href="{% url 'logout' %}" class="nav__link">Logout</a>
</li>
{% else %}
<li class="nav__item"></li>
<a href="{% url 'login' %}" class="nav__link">Login</a>
</li>
{% endif %}
When logged on the Website:
- This is the login page located in
templates/login.html. It contains a form where users can enter their username and password to log in to the website. The form uses the POST method to send data to the login URL.
{% extends 'base.html' %}
{% block content %}
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Afacad Flux", sans-serif;
}
body {
/* background-color: #000000; */
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/media/uploads/product/adrien-olichon-gOdavfpH-3s-unsplash.jpg);
/* background-image: url(/media/uploads/product/age-barros-rBPOfVqROzY-unsplash.jpg); */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.login-card {
background: rgb(40, 40, 40);
padding: 40px;
border-radius: 10px;
box-shadow: 0 15px 25px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
}
.login-header {
margin-bottom: 8px;
}
.login-header h1 {
font-size: 24px;
font-weight: 600;
color: #ffffff;
}
.login-header p {
color: #ffffff;
font-size: 16px;
margin-bottom: 24px;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group label {
display: block;
font-size: 12px;
color: #ffffff;
text-transform: uppercase;
margin-bottom: 8px;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid #e1e1e1;
border-radius: 4px;
font-size: 14px;
transition: border-color 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #3CB371;
}
.form-group .icon {
position: absolute;
right: 12px;
top: 38px;
color: #666;
}
.forgot-link {
text-align: right;
font-size: 14px;
}
.forgot-link a {
color: #ff4444;
text-decoration: none;
}
.login-button {
width: 100%;
padding: 12px;
background-color: #3e3cb3;
color: white;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
margin-top: 24px;
transition: background-color 0.3s ease;
}
.login-button:hover {
background-color: #2e8b57;
}
.bottom-text {
text-align: center;
margin-top: 24px;
font-size: 14px;
color: #666;
}
.bottom-text a {
color: #3CB371;
text-decoration: none;
}
</style>
</head>
<body>
<div class="login-card">
<div class="login-header">
<h1>LOGIN</h1>
<p>Welcome to our Watch Collection</p>
</div>
<form method="POST" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<label for="username"><b>Username</b></label>
<input type="text" id="username" name="username" required placeholder="enter your username">
<span class="icon">👤</span>
<div class="error-message" id="usernameError"></div>
</div>
<div class="form-group">
<label for="password"><b>Password</b></label>
<input type="password" id="password" name="password" required placeholder="enter your password">
<span class="icon">🔒</span>
<div class="error-message" id="passwordError"></div>
</div>
<div class="forgot-link">
<a href="#">Forgot?</a>
</div>
<button type="submit" class="login-button">LOGIN</button>
</form>
<div class="bottom-text">
<a href="#">Don't have an account? Click here to join us</a>
</div>
</div>
</body>
{% endblock %}
In the login.html we have also added the CSRF Token what does that signifies ?
The CSRF token in
login.htmlis a security feature used to protect your website from Cross-Site Request Forgery (CSRF) attacks.In simple words, When you include the CSRF token in your form, it ensures that the request to your server is coming from your own website, not from some malicious third-party website.
It's like a secret code shared between the user and the server to verify the request is trustworthy.
- This is the login page that opens when we click on the login option.
🛑
We haven't implemented the logic yet for opening the login page, verifying the username and password, and handling the redirection. If the credentials match, the user will be redirected to the homepage; if they don't, they will be sent back to the login page.
- Now, we'll write the logic for the login and logout functionality in
store/views.py.
def login_user(request):
if request.method=="POST":
username = request.POST['username']
password = request.POST['password']
user = authenticate(request, username=username,password=password)
if user is not None:
login(request,user)
return redirect('home')
else:
return redirect('login')
else:
return render(request,'login.html',{})
def logout_user(request):
logout(request)
return redirect('home')
If you're wondering where the username and password come from—
- The answer is: This username and password were created when we set up the superuser in Django to access the Django admin panel.
- Thus, we have successfully created login and logout page in Django.
