DEV Community

Cover image for Creating a GUI Python App with Firebase SignIn - Python Firebase || GUI Python App
Arkadeep Nag
Arkadeep Nag

Posted on

4 2

Creating a GUI Python App with Firebase SignIn - Python Firebase || GUI Python App

#python #firebase #pyqt5 #guipyapp

We will create a GUI APP with python with firebase login and signup functions .
image

On Sign Up --->
image
image

On Sign In-->
image

Step 1 --> The first step to do is to create a firebase project .
Go to the firebase console on https://console.firebase.com -> Then create a new project -> Go the project settings to check the config details . If you do not find them then create a new firebase web project .
image

image
Step 2 --> The second step is to create a new python file with the name firebase.py or main.py (name doesn't matter). Then use pip install pyrebase (For Windows).

pip install pyrebase
Enter fullscreen mode Exit fullscreen mode

Step 3--> The third step is to install PyQt5 by using pip install pyqt5 (For Windows) -> Then install pip install pyqt5-tools (For Windows)

pip install PyQt5
pip install pyqt5-tools
Enter fullscreen mode Exit fullscreen mode 
from PyQt5 import QtCore, QtGui, QtWidgets
import sys
import pyrebase
Enter fullscreen mode Exit fullscreen mode

Step 4 -- > Initialize Firebase with Pyrebase

config = {
    "apiKey": "AIzaSyDZw2TKNMPLkFBI7qPzklTGbd8bYkIyfUc",
    "authDomain": "py-firebase-f97fc.firebaseapp.com",
    "databaseURL": "https://py-firebase-f97fc-default-rtdb.firebaseio.com",
    "projectId": "py-firebase-f97fc",
    "storageBucket": "py-firebase-f97fc.appspot.com",
    "messagingSenderId": "130186938120",
    "appId": "1:130186938120:web:d8b87ef2a01af62dbf4ebd",
    "measurementId": "G-9R811DMZEL",
    "serviceAccount":".\py-firebase-f97fc-firebase-adminsdk-7w4qw-52ae79b7e5.json"
    }

firebase = pyrebase.initialize_app(config)
Enter fullscreen mode Exit fullscreen mode

Step 5 --> Check whether there is already an user present or not

try:
    IsUser=user['userId']
except:
       IsUser = None
Enter fullscreen mode Exit fullscreen mode

Step 6 --> On step 6 we start defining the auth

auth = firebase.auth()
Enter fullscreen mode Exit fullscreen mode

Step 7 --> Now its the the time for creating a class and check if there is a user or not

class Ui_Dialog(object):
# if IsUser == None :
Enter fullscreen mode Exit fullscreen mode

Step 8 --> We define the GUI . I have created it with Qt5 Designer , You can create your own or use my code for practice.


def setupUi(self, Dialog):
        Dialog.setObjectName("Python with Firebase")
        Dialog.resize(447, 621)
        self.gridLayout = QtWidgets.QGridLayout(Dialog)
        self.gridLayout.setObjectName("gridLayout")
        self.verticalFrame = QtWidgets.QFrame(Dialog)
        self.verticalFrame.setMinimumSize(QtCore.QSize(429, 300))
        self.verticalFrame.setObjectName("verticalFrame")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.verticalFrame)
        self.verticalLayout.setObjectName("verticalLayout")

        self.lineEdit = QtWidgets.QLineEdit(self.verticalFrame)
        self.lineEdit.setMinimumSize(QtCore.QSize(300, 40))
        self.lineEdit.setMaximumSize(QtCore.QSize(500, 40))
        self.lineEdit.setStyleSheet("border-radius:2px;\n"
        "padding:2px;\n"
        "content:'Email';\n"
"border:1px solid #262626;")
        self.lineEdit.setObjectName("lineEdit")
        self.verticalLayout.addWidget(self.lineEdit, 0, QtCore.Qt.AlignHCenter)
        self.lineEdit_2 = QtWidgets.QLineEdit(self.verticalFrame)
        self.lineEdit_2.setMinimumSize(QtCore.QSize(300, 40))
        self.lineEdit_2.setMaximumSize(QtCore.QSize(300, 40))
        self.lineEdit_2.setStyleSheet("\n"
"border-radius:2px;\n"
"padding:2px;\n"
"content:'Password';\n"
"border:1px solid #262626;")
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.verticalLayout.addWidget(self.lineEdit_2, 0, QtCore.Qt.AlignHCenter)
        self.toolButton_2 = QtWidgets.QToolButton(self.verticalFrame)
        self.toolButton_2.setMinimumSize(QtCore.QSize(300, 40))
        self.toolButton_2.setMaximumSize(QtCore.QSize(300, 40))
        self.toolButton_2.setStyleSheet("background:#ccc;\n"
"border-radius:2px;\n"
"\n"
"")
        self.toolButton_2.setObjectName("toolButton_2")
        self.verticalLayout.addWidget(self.toolButton_2, 0, QtCore.Qt.AlignHCenter)
        self.toolButton = QtWidgets.QToolButton(self.verticalFrame)
        self.toolButton.setMinimumSize(QtCore.QSize(300, 40))
        self.toolButton.setMaximumSize(QtCore.QSize(300, 40))
        self.toolButton.setStyleSheet("background-color:#f23041;\n"
"border-radius:5px;\n"
"color:#fff;\n"
"")

        self.toolButton.setObjectName("toolButton")
        self.verticalLayout.addWidget(self.toolButton, 0, QtCore.Qt.AlignHCenter)
        self.gridLayout.addWidget(self.verticalFrame, 0, 1, 1, 1)
        self.toolButton_2.clicked.connect(self.signin)
        self.toolButton.clicked.connect(self.signup)
        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.toolButton_2.setText(_translate("Dialog", "SignIn"))


        self.toolButton.setText(_translate("Dialog", "SignUp"))
Enter fullscreen mode Exit fullscreen mode

On the next step we will define the onclick controls for the signin and signup buttons , whose onclick function has already been declared

self.toolButton_2.clicked.connect(self.signin)
self.toolButton.clicked.connect(self.signup)
Enter fullscreen mode Exit fullscreen mode

Step 9 --> The Onclick functions

def signup(self):
        email = self.lineEdit.text()
        password = self.lineEdit.text()
        user = auth.create_user_with_email_and_password(email, password)
        user = auth.refresh(user['refreshToken'])
        print('Sucessfully accounted in: {0}'.format(user['userId']))
        IsUser=user['userId']

    def signin(self):
        email = self.lineEdit.text()
        password = self.lineEdit.text()
        user = auth.sign_in_with_email_and_password(email, password) 
        user = auth.refresh(user['refreshToken'])
        print('Sucessfully logged in: {0}'.format(user['userId']))
        IsUser=user['userId']
Enter fullscreen mode Exit fullscreen mode

Here we have declared the firebase login and signup functions with a message that would be printed on the console and you can see it if the task is successful.

On the basis of what task you perform
Step 10 --> On the last and final step lets start the window with an if statement

if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)

    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_Dialog()

    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())
Enter fullscreen mode Exit fullscreen mode

Run the app ...
image
The whole code is

from PyQt5 import QtCore, QtGui, QtWidgets
import sys
import pyrebase 
config = {
    "apiKey": "AIzaSyDZw2TKNMPLkFBI7qPzklTGbd8bYkIyfUc",
    "authDomain": "py-firebase-f97fc.firebaseapp.com",
    "databaseURL": "https://py-firebase-f97fc-default-rtdb.firebaseio.com",
    "projectId": "py-firebase-f97fc",
    "storageBucket": "py-firebase-f97fc.appspot.com",
    "messagingSenderId": "130186938120",
    "appId": "1:130186938120:web:d8b87ef2a01af62dbf4ebd",
    "measurementId": "G-9R811DMZEL",
    "serviceAccount":".\py-firebase-f97fc-firebase-adminsdk-7w4qw-52ae79b7e5.json"
    }

firebase = pyrebase.initialize_app(config)
try:
    IsUser=user['userId']
except:
       IsUser = None
auth = firebase.auth()
class Ui_Dialog(object):
# if IsUser == None :
    def setupUi(self, Dialog):
        Dialog.setObjectName("Python with Firebase")
        Dialog.resize(447, 621)
        self.gridLayout = QtWidgets.QGridLayout(Dialog)
        self.gridLayout.setObjectName("gridLayout")
        self.verticalFrame = QtWidgets.QFrame(Dialog)
        self.verticalFrame.setMinimumSize(QtCore.QSize(429, 300))
        self.verticalFrame.setObjectName("verticalFrame")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.verticalFrame)
        self.verticalLayout.setObjectName("verticalLayout")

        self.lineEdit = QtWidgets.QLineEdit(self.verticalFrame)
        self.lineEdit.setMinimumSize(QtCore.QSize(300, 40))
        self.lineEdit.setMaximumSize(QtCore.QSize(500, 40))
        self.lineEdit.setStyleSheet("border-radius:2px;\n"
        "padding:2px;\n"
        "content:'Email';\n"
"border:1px solid #262626;")
        self.lineEdit.setObjectName("lineEdit")
        self.verticalLayout.addWidget(self.lineEdit, 0, QtCore.Qt.AlignHCenter)
        self.lineEdit_2 = QtWidgets.QLineEdit(self.verticalFrame)
        self.lineEdit_2.setMinimumSize(QtCore.QSize(300, 40))
        self.lineEdit_2.setMaximumSize(QtCore.QSize(300, 40))
        self.lineEdit_2.setStyleSheet("\n"
"border-radius:2px;\n"
"padding:2px;\n"
"content:'Password';\n"
"border:1px solid #262626;")
        self.lineEdit_2.setObjectName("lineEdit_2")
        self.verticalLayout.addWidget(self.lineEdit_2, 0, QtCore.Qt.AlignHCenter)
        self.toolButton_2 = QtWidgets.QToolButton(self.verticalFrame)
        self.toolButton_2.setMinimumSize(QtCore.QSize(300, 40))
        self.toolButton_2.setMaximumSize(QtCore.QSize(300, 40))
        self.toolButton_2.setStyleSheet("background:#ccc;\n"
"border-radius:2px;\n"
"\n"
"")
        self.toolButton_2.setObjectName("toolButton_2")
        self.verticalLayout.addWidget(self.toolButton_2, 0, QtCore.Qt.AlignHCenter)
        self.toolButton = QtWidgets.QToolButton(self.verticalFrame)
        self.toolButton.setMinimumSize(QtCore.QSize(300, 40))
        self.toolButton.setMaximumSize(QtCore.QSize(300, 40))
        self.toolButton.setStyleSheet("background-color:#f23041;\n"
"border-radius:5px;\n"
"color:#fff;\n"
"")

        self.toolButton.setObjectName("toolButton")
        self.verticalLayout.addWidget(self.toolButton, 0, QtCore.Qt.AlignHCenter)
        self.gridLayout.addWidget(self.verticalFrame, 0, 1, 1, 1)
        self.toolButton_2.clicked.connect(self.signin)
        self.toolButton.clicked.connect(self.signup)
        self.retranslateUi(Dialog)
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))
        self.toolButton_2.setText(_translate("Dialog", "SignIn"))


        self.toolButton.setText(_translate("Dialog", "SignUp"))

    def signup(self):
        email = self.lineEdit.text()
        password = self.lineEdit.text()
        user = auth.create_user_with_email_and_password(email, password)
        user = auth.refresh(user['refreshToken'])
        print('Sucessfully accounted in: {0}'.format(user['userId']))
        IsUser=user['userId']

    def signin(self):
        email = self.lineEdit.text()
        password = self.lineEdit.text()
        user = auth.sign_in_with_email_and_password(email, password)
        user = auth.refresh(user['refreshToken'])
        print('Sucessfully logged in: {0}'.format(user['userId']))
        IsUser=user['userId']



if __name__ == "__main__":
    app = QtWidgets.QApplication(sys.argv)

    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_Dialog()

    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())
Enter fullscreen mode Exit fullscreen mode

The whole code is also on my github repository -> https://github.com/Arkadeep-Nag/py-firebase-app/blob/main/main.py

profile
Sentry
 Promoted

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

profile
Coherence
 Promoted

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Read next

velan profile image

EchoAPI vs Bruno: A Comprehensive Comparison from Design to Testing 💡

Velan<> -

ajayececit profile image

Code Your Diagrams: Automate Architecture with Python's Diagrams Library

Ajay Balakumaran -

ajayececit profile image

Python 3.13: The Gateway to High-Performance Multithreading Without GIL

Ajay Balakumaran -

aaravjoshi profile image

Mastering Python's Magical Metaprogramming: Code that Writes Itself

Aarav Joshi -

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay