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)