Firebaseui-web: Add support for Auth emulator via useEmulator

[c5n8]

Is your feature request related to a problem? Please describe.
UI still connect to project server when using auth emulator.

Describe the solution you'd like
A way to connect UI to auth emulator.

Describe alternatives you've considered
I have modified default auth instance to use emulator, but still failed to make UI use emulator.

Additional context
Related Documentation

[akauppi]

This should have been obvious. Could Firebase teams please have a post-mortem about why such information leaks through, and releases are not in sync?

Then again, none of the Changelogs likely state that we should expect firebaseui to be compatible with the auth emulation, do they?

[sam-gc]

Hi @c5n8 thanks for raising this! We are aware of the issue and we are investigating (b/165671830).

[sam-gc]

@akauppi -- We released the Auth Emulator BETA just last week. We're really excited about the emulator and we wanted to get it into the hands of customers as quickly as we could, knowing how valuable it can be to a safe development workflow!🙂 We're currently working on ensuring that the Auth emulator works with FirebaseUI; it has a slightly different release schedule, and releases aren't always aligned with other Firebase SDKs.

[bojeil-google]

FirebaseUI cannot currently readily support the Auth emulator as it creates an internal Auth instance which does not propagate the emulator settings. Additional work is needed to support this. Filed it as a feature request.

[akauppi]

@samhorlbeck just a slight nod. I meant no harm. Somehow the mention that Auth Emulator was only beta has escaped me.

[sam-gc]

@akauppi no worries, that's how I spell "BETA," not meant as emphasis :)

[jmcdl]

It's not explicit in the original comment, but am I correct in thinking that @c5n8 is referring to the fact that the useEmulator() method suggested in the linked docs (copied below) appears to be undefined?

firebase.auth().useEmulator('http://localhost:9099/');

At least when I try to use it in my React app I get a 'useEmulator is not a function' error from webpack and my IDE (WebStorm).

I would note that the same method is suggested for the firestore emulator and is also wrong.

The code given in the docs is:

// Initialize your Web app as described in the Get started for Web
// Firebase previously initialized using firebase.initializeApp().
var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.useEmulator("localhost", 8080);
}

What actually works is:

var db = firebase.firestore();
if (location.hostname === "localhost") {
  db.settings({
  host: "localhost:5002",
  ssl: false,
});
}

[sam-gc]

@jmcdl this is a different issue: Firebase UI for Auth does not currently honor the call to firebase.auth().useEmulator() though the function is defined properly on firebase.auth(). It sounds like you may be using an older version of the SDK that does not have the useEmulator() function (it was added quite recently, as in the last month or two, at least for Auth).

If you're still having the issue, please file a bug in the firebase-js-sdk repo.

[jmcdl]

@samhorlbeck thank you, you were correct that I wasn't using the latest version of the firebase sdk. Updating the SDK has resolved the error.

[horizon89]

Great to read that I'm not the only one in need of this. Any idea when this might be resolved? Thank you so much for the work that you do. Greatly appreciated.

[bojeil-google]

Hey folks, in order to support the emulator in firebaseui, the emulator settings need to be copied from the external auth instance into the temporary internal one.

This can be done after initialization of the internal instance.

However, the missing piece is that we need to get the emulator settings from the provided Auth instance and I don't believe that a getter for this is exposed yet.

[cupcakearmy]

Docs should be more clear. I immagined it would simply work as in the docs. There should be a warning about this here: https://firebase.google.com/docs/emulator-suite/connect_auth

Hope the feature is here soon :)

[benomatis]

@cupcakearmy I might be missing something, but I believe what was meant above is that useEmulator is not currently working specifically in firebaseui (mind the ui at the end of the word), which is why this issue is logged here. The linked doc is generally about firebase emulator for auth; I have not tested, but I'm assuming that if you set up auth yourself (NOT using firebaseui), you'll probably be able to get it working.

[cupcakearmy]

@benomatis yes. Without the UI the Auth emulation works. It's just not mentioned anywhere. So a little temporal warning would be very helpful :) But the UI is the most common way, especially at the beginning to use auth in firebase.

[benomatis]

@cupcakearmy If anywhere, it should probably be mentioned in firebaseui's docs, not the main firebase docs; it's basically a separate product.

[cupcakearmy]

Sure. Just somewhere where it's obvious :)

[ajonp]

Whew thought I was losing my mind!!

[QaDeS]

FirebaseUI cannot currently readily support the Auth emulator as it creates an internal Auth instance which does not propagate the emulator settings.

Needed this to work now, so I removed the creation of the internal Auth instance just to see what breaks. Nothing did – for all I can say – so I was wondering what this mechanism is/was actually meant for?

Pull request: https://github.com/firebase/firebaseui-web/pull/794

[brianrodri]

Edit: removed my original comment since it's the same thing mentioned in https://github.com/firebase/firebaseui-web/issues/778#issuecomment-733461983

---

Following up on https://github.com/firebase/firebaseui-web/issues/778#issuecomment-733461983, is the next step to file an issue on firebase-js-sdk requesting getEmulatorConfig to be public?

[bojeil-google]

Yes getEmulatorConfig needs to be exposed so it can be call in firebaseui.

[cupcakearmy]

@bojeil-google do you know if there is an estimated ETA on this?

[bojeil-google]

@samhorlbeck is currently working on it.

[chetbox]

I believe it should now be possible to get the emulator settings with the latest Firebase SDK: https://firebase.google.com/support/release-notes/js#version_824_-_january_21_2021

[benomatis]

Looks like it's been added here as well, but not yet released: https://github.com/firebase/firebaseui-web/commit/bb65d4914f95015cc4cc74a6aae3d3358ad37895

[interactive-web-dev]

Any approximate ETA on the release date? I'm unfamiliar with how frequently they occur.

[bojeil-google]

We are working on it. We discovered another unrelated issue in the process of the release and we may have to delay the release until the bug is fixed. You can expect this to be out sometime this week or next week.

[bojeil-google]

Emulator support should now be available in the latest FirebaseUI-web release.

[antoinedc]

I'm still having issues with this. It looks like some requests are sent to the emulator and some are not.
For example, https://www.googleapis.com/identitytoolkit/v3/relyingparty/createAuthUri?key=xxx is not proxied through the emulator, same with the signin/signup process requests.

Here is my code:

firebase.initializeApp(FIREBASE_CONFIG, 'debug');
var auth = firebase.auth()
auth.useEmulator("http://localhost:9099")
var ui = new firebaseui.auth.AuthUI(auth);
ui.start('#firebaseui-auth-container', {
    signInSuccessUrl: '/transactions',
    signInOptions: [
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            requireDisplayName: false
        }
    ]
});

FIREBASE_CONFIG contains a dummy apiKey and projectId.

However, if I proceed to login with a live api key and a production account, and then check for currentUser(), it seems to go through the emulator: http://localhost:9099/www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo?key=xxx, and it (obviously) fails with a 400 USER_NOT_FOUND.

[antoinedc]

Problem solved, in case it's useful for someone: updating firebaseui is not enough, you also need to be on firebase 8.2.4 at least to have the emulatorConfig exposed (I was on firebase 8.2.1)