🔥 Dynamic FirebaseDB Settings: Set URL, Token, and ProjectBucket from Blocks!

Extensions
, , , ,
1

Hello App Inventor Community, - visual selection
Hello App Inventor Community, - visual selection3132×1692 340 KB

Hello App Inventor Community,

Have you ever found yourself needing to change your Firebase project's URL, API Key (Firebase Token), or even your default ProjectBucket dynamically from within your App Inventor app's blocks?

The built-in FirebaseDB component has these crucial properties set only in the Designer view, making it tricky to:

  • Switch between a development and production database.

  • Build an app that connects to different Firebase projects based on user input or app logic.

The Problem: Static Firebase Configuration

The standard FirebaseDB component restricts FirebaseToken and FirebaseURL to be set only in the Designer. This means if you want to point your app to a different Firebase backend, you have to recompile your app after changing settings in the Designer.

The Solution: FirebaseAI2Editor Extension!

I've created a simple non-visible extension, FirebaseAI2Editor, that provides blocks to set these key FirebaseDB properties directly from your App Inventor blocks screen!

This extension provides three new functions:

  1. SetFirebaseToken: To set the API Key.

blocks

  1. SetFirebaseURL: To set the Realtime Database URL.

blocks

  1. SetProjectBucket: To set the default Project Bucket.

blocks

How to Use in App Inventor Blocks

  1. Import the Extension: First, you'll need the compiled .aix file for this extension. (If you don't have it, you'd need to compile the Java code yourself or find an online AIX builder). Once you have the .aix file, go to Extensions in the Palette, click Import extension, and upload the file.

  2. Add to Screen: Drag the FirebaseAI2Editor component from the Extension section of the Palette onto your screen. It's a non-visible component.

  3. Use the Blocks: You can now use the new setter blocks. Remember to connect your FirebaseDB component (e.g., FirebaseDB1) into the firebaseDB socket of the new blocks.

Here's an example of how you might use these blocks:

blocks
blocks1372×512 75.8 KB

Important Notes:

  • Firebase Security Rules are paramount: This extension allows you to change which Firebase project your app connects to. It does not bypass or replace the need for strong Firebase Realtime Database Security Rules. Your rules will still govern who can read/write data in the connected database.

  • API Key Exposure: While this allows dynamic setting, your API Key is still embedded in your app. It's crucial to understand that Firebase API Keys are not secrets in the same way a database password is. They identify your project, but your Firebase Security Rules are what truly protect your data.

Download

icon com.mrkoder.firebase.editor.ai2.dev.firebaseai2editor.aix (4.5 KB)

About the Author

You can find more about my projects and work on my portfolio: https://ahmedazamportfolio.netlify.app/

I hope this extension proves useful for your App Inventor projects! Feel free to share your thoughts, report any issues, or suggest further improvements.

Best regards,
@Black_Knight

1 Like
2

Thanks for this extremely useful extension but I believe there is already a property to change the bucket from the code right? Anyway, it's very useful for changing the token and URL!

I also have a small suggestion for your extension: if you could add a function to add a firebase auth ID token to allow secure rules with this component, it would help, I think, a lot of users.

Thanks,
Nico




Edit:
I checked, the bucket property is indeed accessible in the code!
Read the documentation

1 Like