Django Authentication Project with Firebase - GeeksforGeeks

05 Oct, 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
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 ?
Create URLs, to map the requests in urls.py
Python3
from django.contrib import adminfrom django.urls import pathfrom . 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 renderimport 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 usefirebase=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{            background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);        }         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{            background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);        }        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{            background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);        }        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 
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 successfully 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{            background-image: url(https://images.unsplash.com/photo-1493723843671-1d655e66ac1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);        }         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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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.
sweetyty
Firebase
Python Django
Technical Scripter 2020
Python
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Python Dictionary
Read a file line by line in Python
How to Install PIP on Windows ?
Enumerate() in Python
Different ways to create Pandas Dataframe
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?