User Authentication System using Django
Authentication is a key part of securing any web application. In Django
REST Framework (DRF), Basic Authentication provides a simple way to
verify users using their username and password. This method builds
upon Django’s built-in authentication system, allowing APIs to restrict
access and ensure only authorized users can interact with protected
endpoints.
User Authentication System in Django
Step 1: Create the Django project and app
django-admin startproject core
cd core
python [Link] startapp authentication
File Structure:
File Structure
Step 2: Register app name in Installed_Apps in [Link] file.
INSTALLED_APPS = [
"[Link]",
"[Link]",
"[Link]",
"[Link]",
"[Link]",
"[Link]",
"authentication", // App name
]
Step 3: [Link]
The views handle rendering templates and processing form data for login,
registration, and the home page.
home(request): Renders the [Link] template when users access
the home page.
login_page(request): Handles user login. On a POST request, it
retrieves username and password from the form. It checks if the user
exists; if not, it displays an error message and redirects back to the
login page.
register_page(request): Handles user registration. On a POST
request, it retrieves first_name, last_name, username and password
from the form. It checks if the username is already taken, if so, it
displays a message and redirects back to the registration page.
from [Link] import render, redirect
from [Link] import messages
from [Link] import authenticate, login
from [Link] import login_required
from [Link] import User
from .models import *
def home(request):
return render(request, '[Link]')
def login_page(request):
if [Link] == "POST":
username = [Link]('username')
password = [Link]('password')
# Check if a user with the provided username exists
if not
[Link](username=username).exists():
# Display an error message if the username does
not exist
[Link](request, 'Invalid Username')
return redirect('/login/')
user = authenticate(username=username,
password=password)
if user is None:
# Display an error message if authentication
fails (invalid password)
[Link](request, "Invalid Password")
return redirect('/login/')
else:
login(request, user)
return redirect('/home/')
return render(request, '[Link]')
# Define a view function for the registration page
def register_page(request):
if [Link] == 'POST':
first_name = [Link]('first_name')
last_name = [Link]('last_name')
username = [Link]('username')
password = [Link]('password')
# Check if a user with the provided username already
exists
user = [Link](username=username)
if [Link]():
# Display an information message if the username
is taken
[Link](request, "Username already taken!")
return redirect('/register/')
# Create a new User object with the provided
information
user = [Link].create_user(
first_name=first_name,
last_name=last_name,
username=username
)
# Set the user's password and save the user object
user.set_password(password)
[Link]()
# Display an information message indicating
successful account creation
[Link](request, "Account created
Successfully!")
return redirect('/register/')
return render(request, '[Link]')
Step 4: [Link]
Import the models module from Django to create and manage
database models.
Import the User model from [Link], which
provides Django’s built-in authentication system for handling user data
and permissions.
from [Link] import models
from [Link] import User
Migrate models:
python [Link] makemigrations
python [Link] migrate
Create the superuser:
python [Link] createsuperuser
Step 5:[Link]
This file defines URL routes and connects them to views within the Django
application.
Imports required modules for URL routing, views, admin interface, and
file handling.
Defines URL patterns for the home, admin, login, and registration
pages.
Serves media and static files during development.
# Import required modules
from [Link] import admin
from [Link] import path
from [Link] import *
from [Link] import settings
from [Link] import
staticfiles_urlpatterns
from [Link] import static
# Define URL patterns
urlpatterns = [
path('home/', home, name="home"), # Home
page
path("admin/", [Link]), # Admin
interface
path('login/', login_page, name='login_page'), # Login
page
path('register/', register_page, name='register'),#
Registration page
]
# Serve media files in development mode
if [Link]:
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
# Serve static files
urlpatterns += staticfiles_urlpatterns()
Update [Link] for Media and Static Files:
import os
STATIC_URL = '/static/'
STATIC_ROOT= [Link](BASE_DIR, 'staticfiles')
STATICFILES_DIR = {
[Link](BASE_DIR, 'public/static')
}
MEDIA_ROOT = [Link](BASE_DIR, 'public/static')
MEDIA_URL = '/media/'
Templates Folder
Step 6.1: [Link]:
Below template provides a login page for users. It uses Bootstrap
4.5.2 for styling and includes CSRF protection for security.
The GeeksforGeeks title is centered and highlighted in green.
CSRF token is included to prevent cross-site request forgery attacks.
Displays error or success messages using Bootstrap alerts.
Input fields for username and password, both required.
Link to the registration page for new users.
Submit button to log in.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Login</title>
<link
href="[Link]
[Link]" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- Login form -->
<form class="col-6 mx-auto card p-3 shadow-lg"
method="post" enctype="multipart/form-data">
<h1 style="text-align: center;"><span
style="color: green;">GeeksforGeeks</span></h1>
{% csrf_token %} <!-- CSRF token for security --
>
<!-- Login heading -->
<h3>Login</h3>
<hr>
<!-- Display error/success messages -->
{% if messages %}
<div class="alert alert-primary" role="alert">
{% for message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
<!-- Username input field -->
<div class="form-group">
<label
for="exampleInputEmail1">Username</label>
<input type="text" class="form-control"
name="username" id="exampleInputEmail1" aria-
describedby="emailHelp"
placeholder="Enter username" required>
</div>
<!-- Password input field -->
<div class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input type="password" name="password"
class="form-control" id="exampleInputPassword1"
placeholder="Password" required>
</div>
<!-- Link to registration page -->
<p>Don't have an account <a
href="/register/">Register</a> </p>
<!-- Submit button -->
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
</body>
</html>
Output:
[Link]
Step 6.2: [Link]
This template provides a registration form for new users. It
uses Bootstrap 4.5.2 for styling and includes CSRF protection for
security.
CSRF token is included to prevent cross-site request forgery attacks.
Displays error or success messages using Bootstrap alerts.
Input fields for first name, last name, username, and password (all
required).
Link to the login page for users who already have an account.
Submit button to register a new user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link
href="[Link]
[Link]" rel="stylesheet">
<title>Registration Form</title>
</head>
<body>
<div class="container mt-5">
<!-- Registration form -->
<form class="col-6 mx-auto card p-3 shadow-lg"
method="post" enctype="multipart/form-data">
{% csrf_token %} <!-- CSRF token for security --
>
<!-- Registration form heading -->
<h1 style="text-align: center;"><span
style="color: green;">GeeksforGeeks</span></h1>
<h3>Register</h3>
<hr>
<!-- Display error/success messages -->
{% if messages %}
<div class="alert alert-primary" role="alert">
{% for message in messages %}
{{ message }}
{% endfor %}
</div>
{% endif %}
<!-- First Name input field -->
<div class="form-group">
<label for="exampleInputEmail1">First
name</label>
<input type="text" class="form-control"
id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Enter First name"
name="first_name" required>
</div>
<!-- Last Name input field -->
<div class="form-group">
<label for="exampleInputEmail1">Last
name</label>
<input type="text" name="last_name"
class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter Last name" required>
</div>
<!-- Username input field -->
<div class="form-group">
<label
for="exampleInputEmail1">Username</label>
<input type="text" class="form-control"
name="username" id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email" required>
</div>
<!-- Password input field -->
<div class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
name="password" id="exampleInputPassword1"
placeholder="Password" required>
</div>
<!-- Link to login page for users who already
have an account -->
<p>Already have an account <a
href="/login/">Login</a> </p>
<!-- Submit button -->
<button type="submit" class="btn btn-
primary">Submit</button>
</form>
</div>
</body>
</html>
Output:
reg
[Link]
Step 6.3: [Link]
This template displays a welcoming page for users. It includes a heading
and an animated GIF for a friendly user experience.
Page title styled in green using inline CSS.
.container class centers content and adds a white background with a
subtle shadow.
h1 tag styles the heading in green and bold.
img tag displays an animated GIF at 60% width.
The page content is contained within a centered container for a clean
layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title style="color: green;">Welcome to
Geeksforgeeks ????</title>
<style>
.container {
text-align: center;
margin: 100px auto;
max-width: 500px;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h1 {
color: green;
font-weight: bold;
}
img {
width: 60%;
}
</style>
</head>
<body>
<div class="container">
<!-- Page heading -->
<h1>Welcome to Geeksforgeeks </h1>
<!-- Animated GIF -->
<!-- Use "[Link]" as the source for the GIF -->
<img src="[Link]
alt="Welcome Cartoon">
</div>
</body>
</html>
Output:
[Link]
Step 7: Run the Development Server
Start the Django development server to test the authentication system and
templates:
Opens the project on [Link] or [Link]
Test the login page at /login/.
Test the registration page at /register/.
After login or registration, you will be redirected to the home page
displaying the welcome message and GIF.