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 adminfrom django.urls import pathfrom . import viewsurlpatterns = [ 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 pyrebaseconfig={ 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
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 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></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.
