๐ฅFirebase Integration
Setting up Firebase Authentication in Databutton
Databutton app includes a basic setup for authentication. Here's how to set it up and allowing users to sign in with email/password and Google.
Authentication Wrapper with Databutton Apps
The AuthWrapper template is included in the "components" section of any new app by default. Alternatively, one can create this wrapper just pasting the code below.
Setting up Firebase Authentication
Getting started with the Firebase Console ( You can easily Log in with your Google account )
Firebase configuration Setup - After registering the app, Firebase will display a snippet of code.
Typically the config keys and values has this format. Take note of the firebaseConfig as you will need it later. You can also find it under Project Overview in Firebase later.
Authentication Settings - Once the project is set up, navigate to the โAuthenticationโ section in the Firebase console side menu.
Configuring Sign-In Methods - In the Authentication panel, go to the โSign-in methodโ tab. Configure sign-in providersโโโEmail/Password, Google.
Adding Authorised Domains in Firebase
Configuring your Databutton app - The final step involves adding the Firebase project ID to the Databutton secrets. This project ID is essential for the backend operations of your app. This project ID is same as in the config file which we obtain earlierโ.
We can do a manual Entryโโโ
Navigate to the โConfigโ tab in the Databutton.
Manually add the project ID as a secret with the name
FIREBASE_PROJECT_NAME
.
Alternatively, we can ask the AI agent to that.
Example Prompt
Implementing Firebase Authentication over the app
Protecting UI Pages
Now, once we have the firebase authentication set up done, we can start protecting our UI pages. Example prompt -
Protecting the Capabilities (FastAPI routers)
Itโs important to secure our router calls as well. This helps prevent unauthorised access to the backend services.
Here's an example prompt to do thatโ-
Updating Component with the protected capability
Untill now we have implemented a layer of proetction over our capability. But we have not updated the component where this capability ( FastAPI endpoint) has been used. Therefore, in our case we have the enpoint used over the ChatInput UI component and thus we will ask the agent to make the necessary changes / updates. Here's how it can be prompted -
Advanced cases to acess profile picture or user names
All the additional changes required is in the UI page. Otheriwse, everything from the backend and UI components remains same as it is.
Last updated