Firebase Authentication with Flask Backend

By
 from flask import Flask, render_template, session, redirect, request
from dotenv import load_dotenv
import os

app = Flask(__name__)

@app.route("/firebase_config")
def firebase_config():
    firebase_config = {
        "apiKey": os.environ.get("FIREBASE_API_KEY"),
        "authDomain": os.environ.get("FIREBASE_AUTH_DOMAIN"),
        "databaseURL": os.environ.get("FIREBASE_DATABASE_URL"),
        "projectId": os.environ.get("FIREBASE_PROJECT_ID"),
        "storageBucket": os.environ.get("FIREBASE_STORAGE_BUCKET"),
        "messagingSenderId": os.environ.get("FIREBASE_MESSAGING_SENDER_ID"),
        "appId": os.environ.get("FIREBASE_APP_ID"),
        "measurementId": os.environ.get("FIREBASE_MEASUREMENT_ID")
    }
    return firebase_config

# Set a secret key for session support
app.secret_key = 'your_secret_key'

@app.route("/set_session", methods=['POST'])

About this template

This application integrates Firebase authentication with a Flask backend. The firebaseconfig.js file initializes Firebase using the provided configuration fetched from the backend. It exports the initialized Firebase app and authentication object. The signedin.js file handles sign-in functionality on the client-side. It retrieves user information from session storage upon page load, displays it, and redirects to the sign-in page if the information is not found. It also handles sign-in and sign-out actions, making requests to the backend for authentication. The backend then interacts with Firebase to authenticate users, store user data in session, and handle sign-out requests. Made by BaranDev[https://github.com/BaranDev]

Introduction to the Firebase Sign Up and Login Template

This template provides a complete authentication system for web applications, integrating Firebase authentication with a Flask backend. It includes sign-up and sign-in functionality, session management, and user interface templates for both signing in and signing up. The template is designed to be easy to use, even for non-technical builders, and handles all the deployment on the Lazy platform.

Getting Started with the Template

To begin using this template, simply click on "Start with this Template" on the Lazy platform. This will pre-populate the code in the Lazy Builder interface, so there's no need for code copying or pasting.

Initial Setup

Before testing the application, you'll need to set up some environment secrets within the Lazy Builder. These are necessary for the Firebase configuration and will allow your application to communicate with Firebase services.

  • Navigate to the Environment Secrets tab within the Lazy Builder.
  • Set the following secrets with the corresponding values from your Firebase project:
    • FIREBASE_API_KEY
    • FIREBASE_AUTH_DOMAIN
    • FIREBASE_DATABASE_URL
    • FIREBASE_PROJECT_ID
    • FIREBASE_STORAGE_BUCKET
    • FIREBASE_MESSAGING_SENDER_ID
    • FIREBASE_APP_ID
    • FIREBASE_MEASUREMENT_ID
  • To obtain these values, visit your Firebase project settings in the Firebase console and copy the relevant configuration details.

Test: Pressing the Test Button

Once the environment secrets are set, you can press the "Test" button in the Lazy Builder. This will deploy your application and start the Lazy CLI. If the code requires any user input, you will be prompted to provide it through the Lazy CLI.

Entering Input

If the template code requires user input, you will be prompted for it after pressing the "Test" button. Follow the instructions in the Lazy CLI to enter the necessary information.

Using the App

After deployment, Lazy will provide you with a dedicated server link to access your web application. You can use this link to interact with the sign-up and sign-in pages rendered by the template.

Integrating the App

If you wish to integrate this authentication system into another service or frontend, you can use the provided server link as the endpoint for your authentication requests. For example, you can direct your application's sign-in button to the sign-in page hosted on the Lazy server.

Here's a sample request to the sign-in endpoint:


POST /signin HTTP/1.1
Host: [Your Lazy Server Link]
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "userpassword"
}

And a sample response might look like this:


HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Successfully signed in",
  "user": {
    "uid": "user-id",
    "email": "user@example.com"
  }
}

Remember, all the deployment and environment setup is handled by Lazy, so you can focus on building your application without worrying about the underlying infrastructure.

Category
Technology
Last published
April 7, 2024

More templates like this

A bot that answers questions about data

Ask questions about your database via a chat bot. This chatbot connects to a SQLITE database, generates queries for it based on the schema and then runs the queries printing the response all in a nicely styled chat UI. This template is pre-loaded with sample data (car parts) to play around with - here are the sample data columns that you can query: part_number, part_name, price, units_left_in_stock, manufacturer .

Python
Flask

WebGen

WebGen: A web development app that combines front-end and back-end skills to generate code based on user requests.

React JS
Python
Flask
HTML
CSS

Customisable Signup/Login Page with User Database

This app allows users to sign up with a username and password, stores the information in a database, and displays a personalized greeting upon signing in.

Python
Flask
SQL
Home
/
Firebase Authentication with Flask Backend