Complete login screen with backend included for Kivy apps using Firebase for user authentication.
This package lets you essentially drop a functional login screen into your app within seconds.
- Create account
- Sign in to account
- Reset password
- Automatically signs users in upon app launch if an account has already been created.
If a user has already signed in, it will store their login data and
automatically sign them in the next time around. In this case, the login screens
will not be shown, and your app will immediately do whatever you have coded it
to do in the on_login_success function of the FirebaseLoginScreen.
Clone the project
cd to your project's directory. Clone this repository using
git clone https://github.com/Dirk-Sandberg/FirebaseLoginScreen.git
Which will create a folder named FirebaseLoginScreen in your project.
In the kv file where you want to use the login screen, include these statements:
#:include FirebaseLoginScreen/firebaseloginscreen.kv
#:import FirebaseLoginScreen FirebaseLoginScreen.firebaseloginscreen.FirebaseLoginScreen
You also need to set the web api key of your Firebase project. This can be found in your Firebase project by clicking on the settings wheel in the top left of the Firebase dashboard for your project. Then click Project Settings.
Now you can instantiate the FirebaseLoginScreen class, which inherits from the
Kivy Screen class. That means you need to add it to your ScreenManager.
You should define the on_login_success function to execute whatever code you
want once a user has logged in. Probably you'll want to 1) Retrieve some data
from Firebase and 2) switch to a different screen in your ScreenManager.
Typically, when making requests to your database to get data for your user, you
identify the user by their localId. You can use the idToken to authenticate
a user's request to the database if you have set up Firebase Rules. Both
of these variables are automatically retrieved for you by FirebaseLoginScreen.
A (fully functional) example of including the proper code in your KV file is
shown in the example below:
main.kv
#:include FirebaseLoginScreen/firebaseloginscreen.kv
#:import FirebaseLoginScreen FirebaseLoginScreen.firebaseloginscreen.FirebaseLoginScreen
#:import utils kivy.utils
ScreenManager:
FirebaseLoginScreen:
id: firebase_login_screen
name: "firebase_login_screen"
web_api_key: "your_web_api_key_from_firebase" # Found in Firebase -> Project Settings -> Web API Key
primary_color: utils.get_color_from_hex("#EE682A")
secondary_color: utils.get_color_from_hex("#060809")
tertiary_color: (.25, .25, .25, 1)
on_login_success:
# Defining this function lets you program what to do when the
# user has logged in (probably you'll want to change screens)!
# Get the important user info
app.user_localId = self.localId
app.user_idToken = self.idToken
Make sure the FirebaseLoginScreen is the first screen in your ScreenManager.
That's it! Run your app and enjoy your login screen.
Your Firebase project must be allowed to register users through an email and password. You can set this up easily by going to the Authentication portion of your Firebase project.
You can customize the email that is sent to users when they want to reset their email. Go to your Firebase project, then go to Authentication, then click on Templates, then click on Password reset
This module makes use of the Progress Spinner widget from the kivy.garden.progressspinner package.
Add a background image to your login screen to make it much less plain. Do it by
adding an image to the canvas of your FirebaseLoginScreen in the kv language.
Example:
FirebaseLoginScreen:
canvas.before:
Rectangle:
size: self.size
pos: self.pos
source: "your/image/here.png"
If your app takes a long time to start up, you may need to set the web_api_key
from python instead of in the kv language. You need to set it in the on_start
method of your App class. Haven't fully characterized this race condition yet.