Firebase UI Discussion

[lesnitsky]

Firebase UI Discussion

Hey all 👋

Firebase UI is a family of packages that simplify UI integration with Firebase services and provide drop-in widgets:

🟢 Firebase UI Auth

Firebase UI Auth provides drop-in widgets that are integrated with Firebase Auth and support variety of providers:

• Email registration and sign in
• Email verification
• Reset password
• Phone verification
• OAuth
  • firebase_ui_oauth_google
  • firebase_ui_oauth_apple
  • firebase_ui_oauth_facebook
  • firebase_ui_oauth_twitter

Check out docs for more details.

🟢 Firebase UI Firestore

Firebase UI Firestore simplifies integration with Firebase Firestore:

• FirestoreQueryBuilder provides you with an easy way of wiring up a Firestore collection with your UI and supports pagination out of the box.
• FirestoreListView is a pre-built ListView that supports lazy loading and infinite scrolling (uses FirestoreQueryBuilder under the hood).
• FirestoreTableBuilder is a drop-in Table widget that allows browsing and editing your Firestore collections, has configurable columns, and supports pagination.

Check out docs for more details.

Don't hesitate to ask questions or provide your feedback!

🟢 Firebase UI Database

Firebase UI Database simplifies integration with Firebase Realtime Database:

• FirebaseDatabaseQueryBuilder listens to a query and paginates the result in a way that is compatible with
  infinite scroll views, such as ListView or GridView.
• FirebaseDatabaseListView – a ListView.builder that obtains its items from a Realtime Database query.
• FirebaseDatabaseDataTable is a drop-in Table widget that allows browsing and editing your Realtime Database.

Check out docs for more details.

🟠 Firebase UI Storage

I'm glad to announce that I'm working on a new package that will simplify integration of the Firebase Storage into your Flutter app!

What to expect:

• StorageImage widget that will be preconfigured to display images uploaded to Firebase Storage.
• Download and upload progress indicators
• UploadButton that will handle file selection and upload
• Built-in intents and actions for easy integration with fully custom UIs
• Windows and Linux support

Let us know if you have more ideas of what could live inside Firebase UI Storage.

---

Give Firebase UI a try and do not hesitate to ask questions and provide your feedback in this discussion 👇

[stargazing-dino]

[lesnitsky]

What I'm looking forward to in the very first iteration is simplicity similar to what <input type="file" /> provides in web. Upload flow and storage management would be delegated to the controller (which is up to user to implement according to the provided interface)

[stargazing-dino]

Understandable, and on second thought I can see what I had in mind rather being a self-contained UI package that just has bindings to firebase or anything else. I'll look into it if I ever get the time.

Super excited you're working on these btw !

[firatcetiner]

Thanks for your contribution. This is very good. I will look into it as soon as possible.

[Purus]

I would like to be a tester for this. Kindly let me know how can I help to test and share feedback.

[lesnitsky]

feel free to check out @invertase/ui branch

[Purus]

My humble opinion(or feature requests)

1. Support for Paginated Firestore query
2. Option to capture Location details during signup/login
3. Option to take the system locale for the login ui display language

[lesnitsky]

1. we're planning to build drop-in widgets for firestore/rtdb, but auth is a higher pirority for now
2. this is something we could consider
3. Localization work is in progress. We want the library to be locale-friendly (providing a default set of languages as well as ability to override those)

[Purus]

4. PhoneInput component to support default country selection. For example, i would like to set the default country to India.
5. Auth exception can be validated based on the error codes. currently the entire exception string is shown as snackbar. This could be done along with custom localization for error messages.

[lesnitsky]

4. currently phone picker sets a country based on device locale, giving an option to override it is definitely a nice thing to have, noted 👍
5. Error handling is yet to be improved. We'll provide a set of default error messages (localized) together with ErrorText widget (which will take care of finding the right label depending on error code)

[Purus]

An option to set only one country would be also a required feature of such ui widget. For example, app developed only for 1 specific country users.

[stargazing-dino]

Helloo ! I imagine a lot of people have tried to implement image picking (in general file picking) and uploading and I recently took the time to try it myself. Definitely a lot of things to think about but here's what I came up with.

Imagine a user avatar that allows the user to select an image and upload it to Firebase. One gotcha is that you want the user to decide when the upload should happen. You also want to give the user upload progress, failure, etc in an easy way. The many possible states leads me to think AsyncValue would be best here.

The widget would either handle all the states itself to output the correct ImageProvider/Widgets or give the user the all the possible states in an easy way.

filePickerValue: data (the xFile), nothing, error, loading

firebaseStorageValue: data (remote url), nothing, error, loading (with taskSnapshot for progress)

For me, I used the filePickerValue (and the remoteUrl) to return an ImageProvider or nothing that I use in a CircleAvatar. The firebaseStorageValue returns for me widget that goes as a child to it (imagine CircularProgressIndicator).

Here is a dummy implementation that I tried.

edit

I don't know if this would be a good widget to implement or even if it sounds helpful anymore. I think this might've just been my one use case :\ Sorry, leaving for posterity

[stargazing-dino]

Also, more generally, it'd be really cool if Firebase UI offered a FirebaseImageProvider that took a storage location and handled cache and all that.

[NightCrawler33]

+1

[Purus]

@lesnitsky I am using this branch for one of my project to test this cool package.

Is it a good idea to a callback method to identify if the login(social or email) is successful so that I can save the user details in Firestore database? Or is there any other recommended way?

[rahulraj64]

@lesnitsky I would like to draw your attention to this. Seems FlutterFire doesn't support Apple sign-in on Android. Will this be available in Firebase UI?

[jpangburn]

I just tried and the Apple sign in button still does not appear for Android or Web when using SignInScreen widget. Works fine on iOS. I guess if there's a problem blocking Android I understand why it's not working there yet, but does Web have the same problem?

It seems likely that users have both an iPhone and a computer and may like to sign in on both. Probably less likely to have both iPhone and Android.

[v-luis]

@jpangburn Have you received any news on this? I believe Apple Sign In button is working now for web, but do you know if it is working for Android?

[jtmuller5]

From a usability perspective, it would be cool if the FirestoreDataTable widget was able to scroll horizontaly when there are too many columns to fit on screen. Right now it seems to only show what fits and I can't get over to the columns on the right.

[jtmuller5]

I guess there are a ton of different things you could eventually do with the table but from my first attempt at using it, I'd mainly like to see:

• Custom Widget rendering inside each table cell
• Custom onTap methods for each cell
• Conditional coloring/highlighting based on developer-set logic

I think I can build a table that does this with the FirestoreListView but it won't have the same pagination UI as the FirestoreDataTable

[lesnitsky]

cc @rrousselGit

[johnsulf]

Following this guide, after "flutterfire configure", I get "zsh: command not found: flutterfire"

[Levi-Lesches]

Try dart pub global run flutterfire configure. The error you got is because the folder pub saves packages to isn't on your system's PATH, so you can either google how to change that for your computer, but that command should bypass the issue.

[johnsulf]

Thank you for pointing me in the right direction. dart pub global run flutterfire configure gave "No active package flutterfire." in the terminal.
The solution was to run export PATH="$PATH":"$HOME/.pub-cache/bin" and then dart pub global activate flutterfire_cli and finally flutterfire configure worked fine.

[johnsheehan]

The auth widgets are great, huge time saver. My only request is a simple Divider widget between the third-party auth buttons and the email/password boxes just to give them a little more separation. Maybe a label on those to say "Sign in with email". Right now the buttons and form elements look confusingly related.

[wolframm]

Any plans to expand email link sign-in to web (currently only iOS and Android)?

[cupidchan]

It's been a year for this request. Any update to add email link sign-in to web?

[Aiiboo]

U do a awesome Framework!
I'm developer from Ger, so I can only give u feedback like newbie.
I changed in the validators.dart the value final _emailRegexp = RegExp(r'^[a-zA-Z0-9.]+@[a-zA-Z0-9]+.[a-zA-Z]+'); to
final emailRegexp = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^`{|}~]+@[a-zA-Z0-9]+.[a-zA-Z]+");

this change helped me to use emails like abc_def@xyz.foo

i have a other question.
when a user registration with ur SigninScreen, how I can implement a function, when the registrateion are success or do the verification on the best way?

[lesnitsky]

@Aiiboo the issue with an email was fixed in #7772

As for successful registration callback, you could either listen to the FirebaseAuth.instance.authStateChanges() as mentioned here or provide actions as described here

SignInScreen(
  actions: [
    AuthStateChangeAction<SignedIn>((context, _) {
      Navigator.of(context).pushReplacementNamed('/profile');
    }),
  ],
  // ...
)

[richard457]

Is there a way to override OTP SMS sent to a device when logging in using phone auth? this can be nice if possible

[Abhishek01039]

How to signup/register with the help of Available auth controllers.

When I am using AuthFlowBuilder with EmailFlowController then I am not able to see any method for signup/register.

[richard457]

A lot of examples are needed on this for real as it is too abstract?

[Abhishek01039]

abstract class EmailFlowController extends AuthController {
  void setEmailAndPassword(String email, String password);
  Future<void> verifyEmail([ActionCodeSettings? actionCodeSettings]);
}

In EmailFlowController, there is only two methods in abstract lever so we are able to use only two methods.

[Abhishek01039]

I am trying this

controller.setEmailAndPassword(
  model.email ?? '',
  model.password ?? '',
);

still currentUser is getting null.

[Abhishek01039]

Should we make setEmailAndPassword method async @lesnitsky ?

[Abhishek01039]

Solved the issue by passing action to AuthFlowBuilder.

[adsouza]

What is the correct URL for this project, since the one linked to as canonical from https://firebase.flutter.dev/docs/ui/overview/ now 404s?

[graemep-nz]

https://github.com/firebase/flutterfire/tree/master/packages/firebase_ui_auth

https://github.com/firebase/flutterfire/tree/master/packages

[JSlast]

Hi Everyone

Is there a way to add a Display Name option to the SignInScreen with the EmailAuthProvider for flutter?

Thanks

[graemep-nz]

Do you mean to allow someone to sign in using their display name? Display name isn't unique.

[JSlast]

Thanks for the reply.

Currently using firebase_auth_ui and the SignInScreen with EmailAuthProvider. When a user registers it only offers a email, password, confirm password. There is a option to add a display name field for registration on Firebase Auth Web, so I would like to see if there is a way of enabling this to new registrations in flutter.

I use display names in the app and want to capture this at registration rather than a manual add afterwards in Profile Screen.

[graemep-nz]

In the documentation here
https://github.com/firebase/flutterfire/blob/master/packages/firebase_ui_auth/doc/providers/email.md
you can see the suggested method is to write your own LoginView - which would mostly be just copy the existing LoginView, and call LoginView from your own code - as shown in the docs. In your LoginView.dart you can modify the build method to add "display name" before or after EmailForm. Use action == AuthAction.signUp to check if registering or logging in.
Some other possibilities are to modify the shipped login_view.dart and remember to redo your mod every time you do a pub update. Another possibility is to capture the email address and display name before calling SignInScreen - then pass the email address to the SignInScreen constructor and it won't ask for the email address.

[razfazz]

Add checkbox for agreeing to the T&C for the firebase_ui_auth package.
(In most practical cases, it is a legal requirement to agree to the terms of service when logging in / registering.
such an option would be very useful)

[kwill39]

I love Firebase UI, but it needs some improvement. I would like to go through the effort of making some pull requests to help out, but first I wanted to check to see if Firebase UI is still being supported.

It looks like Firebase UI is kind of mostly just being maintained as opposed to improved. Could anyone speak to the health and future of Firebase UI? I'm wondering if Firebase might be planning on replacing it or abandoning it entirely.

[lesnitsky]

@kwilliams3 Firebase UI is definitely not getting abandoned. You're correct about more of a maintenance mode as opposed to improvements, the reason for that is that I'm currently working on Firebase UI Storage. After this new package is released, I'll be able to give more love to auth, many improvements are on my radar.

Feel free to send PRs or ask for guidance

[ghost]

I just wanted to pop in and say that I love this package. Its so nice to be able to drop it into a project and not have to reinvent the wheel with auth flows. You know what would be cool? Being able to sign in on any device by scanning a QR code from the app. You know how discord has that option, where you can use the camera to capture the QR code from a signed in device, and it signs you in automagically? That would be really fetch(trying to make fetch happen, I think its due for a comeback). It would also be cool if you could add an authenticator code to your account somehow as part of MFA onboarding process.

I'm also really excited to see your Firebase UI Storage package. That's going to be so cool! It would be nice if it had desktop support to drag/drop single/multiple files. It would be cool if it could check for duplicates in the bucket before it uploads, and stage things for sync while offline.

Thanks for all of your hard work on these packages, I really appreciate them.

[Purus]

For phone auth, Is it possible to set a default country and not allow to change? This is for using the auth only for a particular country.

[graemep-nz]

I've started getting an error in the _finishEditing function in editable_user_display_name.dart - used by the "Profile screen". Android studio console reports "Error: setState() or markNeedsBuild() called when widget tree was locked." and indicates that it is the setState call in the "finally" block below that is the problem. The problem occurs only when the user display name is blank/empty. I've also found that if I start the app with the user already logged in, the profile screen comes up with no setState error even though the display name is blank, whereas if I sign out and back in the profile screen comes up and the setState error occurs.

I've recently changed my code (which is mostly same as example app) but now I don't use MaterialApp - I have a Navigator widget below my MaterialApp as in the second code below. Any suggestions for how to find what causes this?

  Future<void> _finishEditing() async {
    try {
      if (displayName == ctrl.text) return;

      setState(() {
        _isLoading = true;
      });

      await auth.currentUser?.updateDisplayName(ctrl.text);
      await auth.currentUser?.reload();
    } finally {
      setState(() {
        _editing = false;
        _isLoading = false;
      });
    }
  }

my code

                return Navigator(
                  initialRoute: getInitialRoute(),
                  onGenerateRoute: (RouteSettings settings) {
                    return MaterialPageRoute<void>(builder: getFBAuthWidgetBuilder(settings.name), settings: settings);
                  }
                );

[graemep-nz]

Correction, it is the first setState call in the _finishEditing function that goes wrong - the debug console indicated it was the second - maybe it's both. Anyway, why is the _finishEditing function being called when the profile screen opens ??????? From looking in the code it is called in four places, two from button press and two from field submission - so it shouldn't be called at all when the profile screen first opens.

[graemep-nz]

I set a breakpoint on the first call to setState in _finishEditing and it shows the _finishEditing call is coming from the onSubmitted callback for the TextField in editable_user_display_name line 130.

This is coming from editable_text.dart line 2773 in the _finalizeEditing function

which is called from the connectionClosed function line 3013

Why does it think it has to finalize editing when the profile screen opens after signing in?

Stack:
_finishEditing (editable_user_display_name.dart:54)
_finishEditing (editable_user_display_name.dart:50)
(editable_user_display_name.dart:130)
_finalizeEditing (editable_text.dart:2773)
connectionClosed (editable_text.dart:3018)
_handleTextInputInvocation (text_input.dart:1892)
_handleTextInputInvocation (text_input.dart:1768)
_loudlyHandleTextInputInvocation (text_input.dart:1753)
_loudlyHandleTextInputInvocation (text_input.dart:1751)
_handleAsMethodCall (platform_channel.dart:555)
_handleAsMethodCall (platform_channel.dart:552)
(platform_channel.dart:548)
(binding.dart:393)
(binding.dart:390)
send (binding.dart:370)
_invokeMethod (platform_channel.dart:308)
_invokeMethod (platform_channel.dart:302)
_invokeMethod (platform_channel.dart:586)
invokeMethod (platform_channel.dart:585)
invokeMethod (platform_channel.dart:584)
finishAutofillContext (text_input.dart:2357)
finishAutofillContext (text_input.dart:2091)
dispose (autofill.dart:240)
unmount (framework.dart:5179)
_unmount (framework.dart:1960)

[graemep-nz]

Can you guys please consider putting a debug breakpoint on line 54 of editable_user_display_name.dart the _finishEditing function call to setState (or even on the if statement line 52) and see if it triggers when you sign in and the user display name is blank. The _finishEditing function shouldn't get called when the profile screen opens after signing in.
@lesnitsky
@danagbemava-nc

[graemep-nz]

I reported this on github
https://github.com/firebase/flutterfire/issues/11070

[graemep-nz]

I want to fork the firebase_ui_auth package so that I can customize some of it. I've never done this before and I'm not sure of the steps or whether it will work. I want to be able to keep pulling from the original repo to get the latest changes and merge into my fork. I see that there is a tag firebase_ui_auth-v1.4.3. I want to keep in step with pub dev for all of the firebase_ui packages and most of them I will get via pub dev. If I fork the firebase_ui_auth repo, then select the 1.4.3 tag and make some changes, how would I update to V1.4.4 when it comes along?

[richard457]

@graemep-nz I think the basic decision to make is whether you will merge all changes from v1.4.4 or not, for example you might choose to work on UI aspect of the package, then I think it is normal pull of change from upstream repo and choose which change to merge.

[markwitt1]

Hey do you have any updates? Did you manage to get the fork to work with customizations?

[graemep-nz]

No, I decided not to fork it, so far. I will have another look at it in a few weeks.

[markwitt1]

Ok interesting. What are you using as alternative?

[graemep-nz]

I'm still using it but I have a lot of other stuff to do on my app first, then I'll see if I still want to customize it. In case you haven't seen it, there's a little bit of info in the docs on how to customize e.g.
https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/email.md

[gazb23]

Please can we have finer control over some of the UI layout elements:

• Divider/Widget between email sign in and OAuthButtons
• Ability to adjust padding between these

As of now the package provides some great funcitonality out of the box but with the ability to adjust UI it will be even more amazing.

[SakhileMamba]

How do I add spacing (separator) between widgets built in the item builder in FirestoreListview? FirestoreListview does not have a separated constructor, eg FirestoreListView.separated(),

[gidrokolbaska]

FirestoreQueryBuilder to the rescue: https://pub.dev/documentation/flutterfire_ui/latest/firestore/FirestoreQueryBuilder-class.html

[SakhileMamba]

Yeap. I ended up using FirestoreQueryBuilder. Thanks for answering my inquiry.

[asimjawad]

I am using AuthListener with OAuthProviderButtion in my Flutter mobile app I would like to call an async function in the listener, which is not possible to do at the moment, I would like to know about any workaround to do it or do I need to look for another approach with.

Things I am trying to achieve are:

• some async calls after the user sign In.
• check if the user is a new or not

[RomuloPBenedetti]

It would be good to have something like ListView.separated for FirestoreListView.

[ospar0829]

It would be good to unifying the UX of different auth methods. Email, magic link and phone had different kind of buttons