Default login page template, fully connected and functional login page built using the Default Component library, and equipped with a Python/Flask back-end which is connected to Firebase.
Ensure you have Node and Python installed, then clone this repository. After it's cloned, navigate to the project's root directory on your computer and run the following scrips in a terminal application (e.g., Git Bash):
Install Python dependencies:
pip3 install -r requirements.txtInstall Node dependencies:
yarn installThe login page is located in ./src/components/login/Login.js, if you care to make edits, but probably don't need to. Once the user is logged in, they will be redirected to ./src/components/account/Account.js, you can plug in your account page here, configure Firebase, and call it a day.
Firebase is authentication is configured via Python/Flask using Pyrebase. You'll need to create and add a ./resources/firebase/config.py file which contains your Firebase configuration and should include the following snippet, though including the data from your Firebase project. The information you add to this file should not be shared, and so the file is excluded in the project's .gitignore, allowing the file to act as environment variables:
# Firebase config object
auth_config = {
"apiKey": "YOUR-DATA-FROM-FIREBASE",
"authDomain": "YOUR-DATA-FROM-FIREBASE",
"databaseURL": "YOUR-DATA-FROM-FIREBASE",
"projectId": "YOUR-DATA-FROM-FIREBASE",
"storageBucket": "YOUR-DATA-FROM-FIREBASE",
"messagingSenderId": "YOUR-DATA-FROM-FIREBASE",
"appId": "YOUR-DATA-FROM-FIREBASE",
"measurementId": "YOUR-DATA-FROM-FIREBASE",
}
# For Firebase Database
database_config = {
"databaseURL": "YOUR-DATA-FROM-FIREBASE",
}
# For Firebase SDK
messaging_config = {
"type": "YOUR-DATA-FROM-FIREBASE",
"project_id": "YOUR-DATA-FROM-FIREBASE",
"private_key_id": "YOUR-DATA-FROM-FIREBASE",
"private_key": "YOUR-DATA-FROM-FIREBASE",
"client_email": "YOUR-DATA-FROM-FIREBASE",
"client_id": "YOUR-DATA-FROM-FIREBASE",
"auth_uri": "YOUR-DATA-FROM-FIREBASE",
"token_uri": "YOUR-DATA-FROM-FIREBASE",
"auth_provider_x509_cert_url": "YOUR-DATA-FROM-FIREBASE",
"client_x509_cert_url": "YOUR-DATA-FROM-FIREBASE",
}auth_config: For information on obtaining your Firebase config, see: Firebase config, if you're including storageBucket (optional), you'll need to enable Firebase Cloud Storage.
database_config: Your Firebase configuration from auth_config contains the databaseURL.
messaging_config: For information on obtaining your service account keys, see: Service account keys.
You will also need to enable Firebase Authentication and Firebase Realtime Database in your project, if you haven't already, as well as set the read/write permissions for the realtime database. This is used to create, store, and delete usernames.
You will also need to create a .env file at the root of your project, with a configuration similar to the configuration included below:
REACT_APP_FIREBASE_API_KEY=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_AUTH_DOMAIN=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_DATABASE_URL=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_PROJECT_ID=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_STORAGE_BUCKET=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_APP_ID=YOUR-DATA-FROM-FIREBASE
REACT_APP_FIREBASE_MEASUREMENT_ID=YOUR-DATA-FROM-FIREBASESome fields such as REACT_APP_FIREBASE_MEASUREMENT_ID and REACT_APP_FIREBASE_STORAGE_BUCKET are optional, if removing, you'll also want to update the service worker configuration in src\serviceWorker.js.
The Flask server is located in ./app.py. It comes with CORS enabled, as well as all login, sign up, and password reset routes, all preconfigured. For information on using Flask, see the Flask documentation.
Bugs reported on the project's issues page will be exterminated as quickly as possible, be sure to include steps to reproduce so they can be spotted easily.
- SVG icons used are from Font Awesome
MIT © iPzard