Inbuilt User Authentication with Django — UI Customization

2 min readAug 23, 2020

Hello all, in my previous blog I explained how to make authentication with Django Auth library. In this blog let’s see how to customize the UI of the Login and Register.

Login Template

Initially let’s add bootstrap dependencies to our templates/base.html.

templates/base.html

<html>
<head><title>{% block title %}Django Inbuild Auth{% endblock %}</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head><body><main>
{% block content %}{% endblock %}
</main><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script></body>
</html>

After adding our bootstrap dependencies, open your login.html file. I created a simple HTML page with bootstrap for login. Replace it with our old login.html. Make sure the id of user name and password must be id_username and id_password respectively.

templates/registration/login.html

{% extends 'base.html' %}{% block title %}Login{% endblock %}{% block content %}
  <div class="container" style=" display:flex; flex-direction:column; justify-content:center;min-height:100vh;">
      <div class="row justify-content-center">
          <div class="col-md-8 col-lg-6 col-xl-5">
              <h1 class="display-4">Login</h1>
              <form method="post">
                 {% csrf_token %}
                 <div class="form-group">
                    <label class="useremail" >Username:</label>
                    <input type="text" placeholder="UserName" class="form-control" name="username" autofocus="" required id="id_username">
                 </div>
                 <div class="form-group">
                    <label class="useremail" >Password:</label>
                    <input class="form-control" id="id_password" placeholder="Password" type="password" name="password" required>
                 </div>
                 <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">Login</button>
              </form>
          </div>
     </div> 
  </div>
</div>
{% endblock %}

Now run your server and open the login page with the URL http://localhost:8000/accounts/login/. You must see a better login page than the older one.

2. Register Template

Now let’s do the same what we did for the login page. I have a code for you. Just replace it with the older one. Again make sure the id of username, password, and confirm password must be id_username, id_password1, id_password2 respectively.

templates/signup.html

<div class="container" style=" display:flex; flex-direction:column; justify-content:center;min-height:100vh;">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 col-xl-5">
            <h1 class="display-4">SignUp</h1>
            <form method="post">
                {% csrf_token %}
                <div class="form-group">
                    <label class="useremail" >Username:</label>
                    <input type="text" placeholder="UserName" class="form-control" name="username" autofocus="" required id="id_username">
                </div>
                <div class="form-group">
                    <label class="useremail" >Password:</label>
                    <input class="form-control" id="id_password1" placeholder="Password" type="password" name="password1" required>
                </div>
                <div class="form-group">
                    <label class="useremail" >Confirm Password:</label>
                    <input class="form-control" id="id_password2" placeholder="Confirm Password" type="password" name="password2" required>
                </div>
                <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">Login</button>
            </form>
        </div>
    </div>
</div>

Now open the registration page with the URL http://localhost:8000/accounts/signup/. You must see a better Registration page than the older one.

You can also check my previous blog where I have explained how to create a signUp and password reset feature with Django.

Feel free to contact me for any queries.

Email: sjlouji10@gmail.com

Linkedin: https://www.linkedin.com/in/sjlouji/

Complete Code can be found on my Github: https://github.com/sjlouji/Django-Auth.git

Happy coding…

Inbuilt User Authentication with Django — UI Customization

Written by Sjlouji

No responses yet