Hey Google, can you help me build my login?
Easily create an audience login with Firebase Studio and Gemini! From time to time, it may happen during a talk that you want to interact with your audience at a conference. What I commonly see is some form of feedback form, or some slide with contacts, but what happens if you want to interact with the audience more intimately? Probably you need a way for them to “Log” into your content? It looked like a cool side project that could be done with Flutter (web in this case) and Firebase Studio, so I started experimenting on that! How it started: First of all, I needed a Plan, what do I want to do? I want two main parts: a webpage that I can share during the presentation, which should include a QR code that users can scan to join the session, and a second webpage, accessible from the scanned QR code, where users can enter their Username and see it appear on the main page. Probably, I will need some Firebase settings too, but let’s worry about that later. So, let’s jump into play and head to https://studio.firebase.google.com/. After logging in, what I see is…. I’m not sure this will go well since this is my first time “Vibe” …coding? Let’s explain what I need, and let’s see what happens when I start the prototyping . . . Finger crossed…. aaand… It wanted to use TypeScript, instead of Flutter… I mean, I could go full vibe code, but I also wanted this to be integrated in a Flutter project of mine, so I gently declined and went the “long route”, so instead of using the flashy AI box I went with the “Start coding an app” and the “Flutter button” just below that. After being asked for a name (used StageLogin), I got redirected to the IDE. After a brief wait and the download of some dependencies, the sample application was up and running, and I saw the enticing “Gemini” button again. Let’s see if I can get my screen as intended now! Copied the previous prompt, only the first part: I want to create a Flutter web application divided in two parts. The first screen is a page with a Join QR Code; this page should be tied to a Firebase database where users can log in by scanning the QR code. The page will show the list of users currently logged in the room. And added the screenshot made with Stitch, sent the message, and something happened… Uuuhh…. Is there any reason not to say “Please do?” Accepting the changes, I got some minor errors, it looks like the code itself is fine, and even if I will need to fix the UI later to be more appealing, the page itself is rendered well. The main issue is that the imports were added, but the dependencies were not. Asked for the fix, but this time I got a less helpful message: I can guide you through the process of setting up Firebase for your project, but I cannot directly execute the Firebase setup commands or configure your Firebase project settings from here. Setting up Firebase typically involves: Creating a Firebase project: Go to the Firebase console (https://console.firebase.google.com/) and create a new project. Registering your app: Register your Flutter web app with the Firebase project. This will involve providing your app’s details and downloading a configuration file (e.g., firebase_options.dart for Flutter). Adding Firebase configuration to your app: Add the downloaded configuration file to your Flutter project. Adding Firebase dependencies: You’ve already added firebase_core and firebase_database in the previous step, but you might need other dependencies depending on the Firebase features you plan to use (e.g., Authentication, Firestore). Initializing Firebase in your app: You’ve already added the initialization code in main.dart. Once you have completed these steps in the Firebase console and added the necessary configuration files to your project, the Firebase integration I added to lib/main.dart should work. But… I don’t want to make all this work! Luckily, we have tools for that! Firebase and FlutterFire! Thanks to the integration with Firebase Studio, you already have all you need to use. So let’s run firebase login and flutterfire configure After running the first command (login), simply follow the instructions to log in to your Firebase account. Then with flutterfire configure, after a few steps, your code will be automatically updated to be ready to work with Firebase! All without even needing to go to the console. stagelogin-00997488:~/myapp$ flutterfire configure i Found 11 Firebase projects. ✔ Select a Firebase project to configure your Flutter application with · <create a new project> ✔ Enter a project id for your new Firebase project (e.g. my-cool-project) · hatdroid-stage-login i New Firebase project hatdroid-stage-login created successfully. ? Which platforms should your configuration support (use arrow keys & space to select)? › android ios macos ✔ web i Firebase web app myapp (web) is not registered on Firebase project hatdroid-stage-login. i Registered a new Firebase web app on Firebase project hatdroid-stage-login. Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps: Platform Firebase App Id web x:xxxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx Now we just need to add the dependencies: stagelogin-00997488:~/myapp$ flutter pub add firebase_core stagelogin-00997488:~/myapp$ flutter pub add firebase_database Resolving dependencies... Downloading packages... + firebase_core 3.13.1 + firebase_core_platform_interface 5.4.0 + firebase_core_web 2.23.0 + _flutterfire_internals 1.3.55 + firebase_database 11.3.6 + firebase_database_platform_interface 0.2.6+6 + firebase_database_web 0.2.6+12 ... Changed X dependencies! And since we are using firebase_database I also needed to create a new database, so head to https://console.firebase.google.com/, open your project, tap on the Realtime Database, and then create it. You can find a complete guide here: https://firebase.google.com/docs/database/flutter/start And after creating the database, you need to update the firebase_options.dart to include the database information: static const FirebaseOptions web = FirebaseOptions( apiKey: 'YOUR-API-KEY', appId: 'YOUR-APP-ID', messagingSenderId: 'YOUR-MESSAGING-ID', projectId: 'YOUR-PROJECT-ID', authDomain: 'YOUR-AUTH-DOMAIN', databaseURL: 'YOUR-DATABASE-URL', // <--- THIS ONE --- storageBucket: 'YOUR-STORAGE-BUCKET', ); You can either pick it from your console, or the easier way is to call again flutterfire configure after the creation of the database. Now the application is ready to accept and read the list! The next step is to add the QR Code,
