DEV Community

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

Posted on

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

Top comments (0)

Read next

imankarimi profile image

Efficient Image Labeling with Python and Tkinter: A Guide to Simplifying Dataset Preparation for AI

Iman Karimi -

angelocodes profile image

6 Tools to make you a 10x faster AI Engineer in 2024

Ajika Angelo -

immah profile image

Building a Password Strength Checker in Python

Emmanuel Kariithi -

404_chronicles profile image

Tkinter: Python's Secret Weapon for Stunning GUIs

404_CHRONICLES -