Skip to content
Related Articles

Related Articles

Improve Article

Django Authentication Project with Firebase

  • Last Updated : 15 Jan, 2021

Django is a Python-based web framework that allows you to quickly create efficient web applications.. When we are building any website, we will need a set of components: how to handle user authentication (signing up, signing in, signing out), a management panel for managing our website, how to upload files, etc. Django gives us ready-made components to use that easily.  

If you are new to Django then you can refer to Django Introduction and Installation.

To check how to create a new project with django and firebase, check – How to create a new project in Django using Firebase Database?

Here we are going to learn How to create Login and Registration in Django using Firebase as Database . In Firebase Authentication ,we need to enable Sign-in-method

Grant Permissions on Firebase Dashboard – 

Step 1 : Go to Authentication -> Sign-in-method -> Email/Password.



Step 2 : Enable Email/Password and Click on Save .

Now, I hope that you have already created a project in Django. If not then Refer to How to Create a Basic Project using MVT in Django ?

Creating Django Authentication project – 

Create URLs, to map the requests in urls.py

Python3




from django.contrib import admin
from django.urls import path
from . import views
  
urlpatterns = [
    path('admin/', admin.site.urls),
    # Here we are assigning the path of our url
    path('', views.signIn),
    path('postsignIn/', views.postsignIn),
    path('signUp/', views.signUp, name="signup"),
    path('logout/', views.logout, name="log"),
    path('postsignUp/', views.postsignUp),
]

Views.py

Here, We will be using our firebase credentials for authentication .

Python3




from django.shortcuts import render
import pyrebase
  
  
config={
    apiKey: "Use Your Api Key Here",
    authDomain: "Use Your authDomain Here",
    databaseURL: "Use Your databaseURL Here",
    projectId: "Use Your projectId Here",
    storageBucket: "Use Your storageBucket Here",
    messagingSenderId: "Use Your messagingSenderId Here",
    appId: "Use Your appId Here"
}
# Initialising database,auth and firebase for further use 
firebase=pyrebase.initialize_app(config)
authe = firebase.auth()
database=firebase.database()
  
def signIn(request):
    return render(request,"Login.html")
def home(request):
    return render(request,"Home.html")
  
def postsignIn(request):
    email=request.POST.get('email')
    pasw=request.POST.get('pass')
    try:
        # if there is no error then signin the user with given email and password
        user=authe.sign_in_with_email_and_password(email,pasw)
    except:
        message="Invalid Credentials!!Please ChecK your Data"
        return render(request,"Login.html",{"message":message})
    session_id=user['idToken']
    request.session['uid']=str(session_id)
    return render(request,"Home.html",{"email":email})
  
def logout(request):
    try:
        del request.session['uid']
    except:
        pass
    return render(request,"Login.html")
  
def signUp(request):
    return render(request,"Registration.html")
  
def postsignUp(request):
     email = request.POST.get('email')
     passs = request.POST.get('pass')
     name = request.POST.get('name')
     try:
        # creating a user with the given email and password
        user=authe.create_user_with_email_and_password(email,passs)
        uid = user['localId']
        idtoken = request.session['uid']
        print(uid)
     except:
        return render(request, "Registration.html")
     return render(request,"Login.html")

Login.html

HTML




{% if message %}
<script>
    alert('{{ message }}');
</script>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign In</title>
    <style>
     body{
        }
         input{
            margin-top:20px;
            height: 30px;
             padding: 12px 20px;
             width: 150px;
             margin: 8px 0;
            border-radius: 5px;
        }
        input[type="submit"]{
            background-color: rgba(7, 179, 185, 0.753);
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
        }
        button{
            background-color: rgba(7, 179, 185, 0.753);
            color: white;
            width: 150px;
            height: 30px;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
  
<form action="/postsignIn/" method="post">
    {% csrf_token %}
    <br/>
   <!-- Enter Your Email: -->
    <label for="Email">Email</label>
    <input type="email"id="Email" name="email"><br><br>
   <!-- Enter Your Password: -->
    <label for="Password">Password</label>
    <input type="password" id="Password" name="pass"><br><br>
    <input type="submit" value="SignIn"><br><br>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    <button type="button" onclick="location.href='{% url 'signup' %} '">SignUp</button>
</form>
</body>
</html>

Registration.html



HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <style>
     body{
        }
        input{
            margin-top:20px;
            height: 30px;
            width: 150px;
            border-radius: 5px;
              
        }
        input[type="submit"]{
            background-color: rgba(7, 179, 185, 0.753);
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
        }
  
    </style>
</head>
<body>
  
<form action="/postsignUp/" method="post">
    {% csrf_token %}
    <br/>
      <h1>Sign Up</h1>
       
<p>Please fill in this form</p>
  
    <label for="username">Username</label>
    <input type="name" id="Username" name="name" placeholder="Your Name"><br><br>
    <!-- Email: -->
    <label for="Email" >Email</label>
    <input type="email" id="Email" name="email" placeholder="Your Email Id"><br><br>
    <!-- Password: -->
    <label for="Password">Password/label>
    <input type="password" id="Password" name="pass" placeholder="Password"><br><br>
    <!-- RepeatPassword: -->
    <label for="confirm_password">Confirm Password</label>
    <input type="password" id="confirm_password" name="pass-repeat" placeholder=" Repeat Password"><br><br>
    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>
      
    <input type="submit" value="SignUp"><br><br>
  
</form>
</body>
</html>

Home.html

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
    <style>
        body{
        }
        div{
        position:absolute;
        right:10px;
        top:5px;
        }
        p{
            font-size: 32px;
        }
        button{
            background-color: rgba(7, 179, 185, 0.753);
            color: white;
            width: 70px;
            height: 40px;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<br><br>
<div>
<button type="button" onclick="location.href='{% url 'log' %}' ">Logout</button>
</div>
</body>
</html>

Now move to your project directory and run our project using the given command :

python manage.py runserver

Login Page

Registration Page

Home Page 

Implementing Reset Password Feature – 

Here we are going to learn How to Reset Password in Django with Database as Firebase . Like most of the times it happens that you forget your password and you want to reset your password. So in this article we are going to learn how to do that in Django.

Urls.py



Python3




path('reset/', views.reset),
path('postReset/', views.postReset),

Views.py

Here we are basically rendering to Reset.html page where the user will type his/her registered email id and will get a email to reset password. send_password_reset_email is predefined method of firebase to reset the password.

Python3




def reset(request):
    return render(request, "Reset.html")
  
def postReset(request):
    email = request.POST.get('email')
    try:
        authe.send_password_reset_email(email)
        message  = "A email to reset password is succesfully sent"
        return render(request, "Reset.html", {"msg":message})
    except:
        message  = "Something went wrong, Please check the email you provided is registered or not"
        return render(request, "Reset.html", {"msg":message})

Login.html

HTML




{% if message %}
<script>
    alert('{{ message }}');
</script>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign In</title>
    <style>
     body{
        }
         input{
            margin-top:20px;
            height: 30px;
             padding: 12px 20px;
             width: 150px;
             margin: 8px 0;
            border-radius: 5px;
        }
        input[type="submit"]{
            background-color: rgba(7, 179, 185, 0.753);
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 5px;
        }
        button{
            background-color: rgba(7, 179, 185, 0.753);
            color: white;
            width: 150px;
            height: 30px;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
  
<form action="/postsignIn/" method="post">
    {% csrf_token %}
    <br/>
   <!-- Enter Your Email: -->
    <label for="Email">Email</label>
    <input type="email"id="Email" name="email"><br><br>
   <!-- Enter Your Password: -->
    <label for="Password">Password</label>
    <input type="password" id="Password" name="pass"><br><br>
    <input type="submit" value="SignIn"><br><br>
    <p style="color: black;padding: 10px 0;">Forgot Password? <a href="/reset/" style="color: black;">Click Here to Reset</a></p>
  
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
    <button type="button" onclick="location.href='{% url 'signup' %} '">SignUp</button>
</form>
</body>
</html>

Reset.html

HTML




<!DOCTYPE html>
{% load static %}
{%if msg%}
    <script>
        window.alert('{{msg}}');
    </script>
{% endif%}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static '/css/Reset.css/' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/css/footer.css/' %}">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
    <div class="back">
        <a href="/"><i class='fas fa-arrow-left' style='font-size:22px'>  </i>Back</a>
    </div>
    <div class="container">
        <div class="inner">
            <h1>Reset Your Password</h1><br>
            <form action="/postReset/" method="POST">
                {% csrf_token %}
                <input type="email" name="email" id="email" placeholder="Enter Your email" required><br><br>
                <input type="submit" value="Send Reset Link">
            </form>
        </div>
    </div>
</body>
</html>

Now move to your project directory and run our project using the given command :

python manage.py runserver

Click On Click Here to Reset and then you will be redirected on another page.

Enter your Email and Click on Send Reset Link and then You will get a link on your email to change your password.

A alert box will come confirming that a mail is sent.



Now, You will receive a mail like this 

.click on it to view the description of mail.

Here ,Click on the given link to change your password.

Here, Type a new password and click on Save.

Now , You can sign in with your new password.

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course




My Personal Notes arrow_drop_up
Recommended Articles
Page :