v6 -> v7 migration notes

[bezysoftware]

Hi, I'm currently migrating from v6 to v7 and I though I'd document my progress here, highlighting some of the issues I encounter along the way.

Current state

The app in question (deliberately not naming it as I don't want this to come of as a promotion, but let me know if interested) is currently on following setup:

• Angular+Angular Material v18
• AngularFire v18
• firebase v10.14.1
• firebaseui v6.1.0
• firebaseui-angular v6.3

FirebaseUI+Angular version are stuck on Angular 18. The goal is to get to v20 and migrate the FirebaseUI v7. The AngularFire is used in compat mode. Translations are done via CSS (auto generated via script which pulls string from the Android Firebase repo).

Upgrade packages to v20

Upgrade itself is fine, I had to remove FirebaseUI packages completely and comment out code to be able to build, but it compiles. What's worse is I can't get the firebase compat API to work, but with help of AI I migrated to the modular API. So far so good. I wanted to migrate firebase to v12, but that isn't supported by AngularFire atm, so landed on v11.

FirebaseUI v7 (beta2)

Now onto the new thing. In general my biggest issue is the documentation:

• provideFirebaseUIPolicies is burried deep in Migration docs even though it's fairly important piece, it would help to include it in samples
• It's not immediately clear how to get the OAuth buttons on the screen. Again, it is mentioned in the migration guide, but buried somewhere deep, I would appreciate a more coherent sample
• V6 had "Email+Password" button along with the other OAuth ones. After clicking it, it would show a form to enter email, and if it exists show signin or signup. It seems this flow is no longer (easily) possible, because
  • There is no "Email only" screen
  • There is no "Login with email and password" string
  • It looks like we have to manually toggle the singin/signup/forgot pwd screens. It's not that difficult to do, but again, I would appreciate more docs / samples
  • Speaking of samples, I couldn't get them to compile. I'm not familiar with pnpm that much, installing packages started installing stuff for react too and then failed. Luckily I found this link with live samples: https://fir-ui-rework-angular.web.app/ which helped a lot

Lets move on more code-related issues, mostly around styling:

• The deployed app seems to be using "@layer base", but I can't find anywhere how to use that, it's missing in my app. Because of that bunch of stuff is unstyled (even though much of it is styled fine). This causes bunch of other issues, such as icons not centered in buttons etc.
• @import statement in sass has been deprecated in favour of @use that should be in the docs
• Themed buttons look different to the deployed sample, e.g. my "google" button is black (facebook is correctly blue)
• Buttons don't accept outline option, only primary and secondary
• I am noticing "--tw-xyz" css properties in the controls, but I am not using tailwind?
• It would be nice to simplify Translations API, specifically setLocale - can it accept only the string for locale? We already register everything via registerLocale, can't it internally do a lookup? This would greatly simplify our code
• Speaking of transations, should we start worrying about other locales? Or will you provide them?

I can update here as I encounter other things. In general the rewrite is promising, I'm looking forward to the RC&release!

[bezysoftware]

Also validation errors do not refresh once user fixes input

[russellwheatley]

This looks like a bug, please file this as an issue 🙏

[bezysoftware]

Could this be type-safe? Allow only specified keys?

[russellwheatley]

This might be a worthwhile feature request 👍