Suppress auth emulator warning message

[motiejunas]

Is there any way to suppress "WARNING: You are using the Auth Emulator, which is intended for local testing only. Do not use with production credentials." message?

This is really annoying when working with Chrome extensions that it is considered as an error.

[samtstern]

@motiejunas thank for the feedback, you're not the first one to tell us the warning banner is annoying although right now it's there because we are trying to be as cautious as possible about security.

Can you explain a little more about how this affects Chrome Extensions? I'm not familiar with that issue.

[motiejunas]

@motiejunas thank for the feedback, you're not the first one to tell us the warning banner is annoying although right now it's there because we are trying to be as cautious as possible about security.

Can you explain a little more about how this affects Chrome Extensions? I'm not familiar with that issue.

Basically any console.error/console.warn renders this "Errors" button:

In a normal development routine, I do not see this button and if I see - I have to inspect and check what went wrong with the extension. Now, I have to repeat the same (inspect) every single time to check if this is any real problem or this is just a silly warning.

So it would be really cool to pass some extra flag to mute warnings.

[samtstern]

@motiejunas thanks for explaining! Sounds like we should switch to console.log or console.info then.

[Joebayld]

What about the HTML overlay that happens on the webpage? Is there an API to not show this?

[samtstern]

@Joebayld there's no API to hide that right now, but we're working on providing some sort of option! For now you can hopefully hide it with custom css.

[smhmd]

@samtstern In my use case, playing with the auth emulator, the warn and banner started messing up my testing.

[akauppi]

@Joebayld I did a global CSS that hides that message, in development.

[samtstern]

We're working on adding a flag to the useEmulator API to allow you to hide this warning, hopefully coming soon!

[nickmarca]

What does it want to mean by "Do not use with production credentials" though ? Should I use any different firebaseConfig when using the emulator ?

[samtstern]

@nickmarca it means don't type in your real password or anything else sensitive since it's going to be exposed over http when traveling to the emulator.

[saevarb]

My main issue with the banner was that it was in the way at the bottom. While I am using another styling solution, dropping something like the following into index.css in my CRA project is a decent temporary fix.

div.firebase-emulator-warning {
  top: 0;
  height: 30px;
  width: 200px !important;
  overflow: hidden;
}

[motiejunas]

With v8.2.0 it is now possible to hide the banner and console.log is used instead of console.warn.

[smhmd]

@motiejunas Could you explain how?

[samtstern]

@motiejunas @smhmd we've added a new option (documentation is a bit behind):

firebase.auth().useEmulator("http://localhost:9099", { disableWarnings: true })

This is in the Firebase JS SDK 8.2.0 release:
https://firebase.google.com/support/release-notes/js#version_820_-_december_11_2020

[harrisonlo]

Are the types updated? I see the commit has updated it, but the downloaded index.d.ts file still has useEmulator(url: string): void (my node_modules/firebase/package.json says 8.2.0 so I think it's at the right version)

[samtstern]

@harrisonlo I'm not sure ... if you're seeing an issue with the types please raise that on the firebase-js-sdk repo and I'm sure they will take care of it!

[wmadden]

This message comes up repeatedly for me during automated test runs

[smhmd]

@wmadden Were you not able to suppress it using this?

firebase.auth().useEmulator("http://localhost:9099", { disableWarnings: true })

This is in the Firebase JS SDK 8.2.0 release:
https://firebase.google.com/support/release-notes/js#version_820_-_december_11_2020

[wmadden]

Thanks @smhmd! That did the trick

[joaomelo]

@motiejunas @smhmd we've added a new option (documentation is a bit behind):

firebase.auth().useEmulator("http://localhost:9099", { disableWarnings: true })

This is in the Firebase JS SDK 8.2.0 release:
https://firebase.google.com/support/release-notes/js#version_820_-_december_11_2020

Hi there,

I don't know if the intention was to suppress only web UI warnings but I'm still receiving them in the console during tests.

I'm using firebase SDK 8.3.0. Below snippets of the related code:

test case

  test('correctly connect to emulator', () => {
    const config = {
      app: initFirebaseAppFromEnv(),
      emulatorUrl: process.env.FIREBASE_AUTH_EMULATOR_URL
    };
    const identityProvider = createIdentityProvider(config);

    expect(identityProvider).toBeDefined();
  });

emulator init

export async function plugEmulator (fireauth, emulatorUrl) {
  fireauth.useEmulator(emulatorUrl, { disableWarnings: true });
  await clearUsers(fireauth, emulatorUrl);
  await createDefaultUser(fireauth);
}

Here is the console warning.

I'm doing something wrong?

[samtstern]

@motiejunas no you're not doing anything wrong, that console.info message is always logged even if the banner is not displayed.

[joaomelo]

I got it @samtstern. Thank you.

I understand the SDK concern about wrong connections. I wonder if I could suppress it somehow during tests. As test cases amount, things get increasingly noisy.

[wceolin]

@joaomelo One workaround we're using is to actually mock the console.info implementation to suppress these warnings during tests (in our setupTests.js file):

jest.spyOn(global.console, 'info').mockImplementation((info: string) => {
  // Suppress Firebase auth emulator warning since they can be quite noisy during tests
  // https://github.com/firebase/firebase-tools/issues/2773
  if (info.includes('Auth Emulator')) {
    return undefined;
  }

  // eslint-disable-next-line no-console
  return console.log(info);
});

[joaomelo]

That's amazing, @wceolin! Thank you so much.

[mesqueeb]

@nickmarca it means don't type in your real password or anything else sensitive since it's going to be exposed over http when traveling to the emulator.

I had to search a lot for this information... Why don't you just write this in the warning instead? I, like many others, was confused thought we had to use different firebase config/project. But it's just about using test users and not typing in your password.

Any chance we can see this error message improved by adding this valuable information? @nickmarca

[mattpupa]

@motiejunas @smhmd we've added a new option (documentation is a bit behind):

firebase.auth().useEmulator("http://localhost:9099", { disableWarnings: true })

This is in the Firebase JS SDK 8.2.0 release:
https://firebase.google.com/support/release-notes/js#version_820_-_december_11_2020

This fix doesn't seem to work for me...not sure why. I still see the banner at the bottom of my html page. The weird thing is, I tried disconnecting the auth emulator completely, but commenting out this code in my script.js file, and removing "auth": { "port": 9099 }

from my firebase.json file. Even with those changes, the banner is still showing up for me.

[fahadahmed]

When using Typescript I am getting a warning when adding the { disableWarnings: true} . Also having the warning displayed when running the test suites becomes very noisy as highlighted before. Need a way to supress the warnings in Node environment.

[Joebayld]

@fahadahmed This is an issue with the JS SDK, not firebase tools. See open issue here: firebase/firebase-js-sdk#4591

[SrBrahma]

@nickmarca it means don't type in your real password or anything else sensitive since it's going to be exposed over http when traveling to the emulator.

I don't understand this. I am the only dev of my app, do I have to care about it?

[mesqueeb]

@SrBrahma if you are using public wifi there is a potential that an http request is intercepted. So if you use real life passwords, they could be compromised.

[falk-stefan]

I also hid the emulatore warning via CSS by setting its opacity to a low value. Note that you can also make it click through using pointer-events:

.firebase-emulator-warning {
  opacity: 0.15;
  pointer-events: none;
}

[repercussive]

For anyone who wants to prevent those noisy Auth Emulator warning messages from appearing in their test logs

---

If you are connecting the auth emulator outside your test, then mocking console.info won't help (as the warning appears when you call connectAuthEmulator().

Here is a way to disable the logs, but if you do this, it's a bad idea to simultaneously hide the DOM-injected warning with disableWarnings, because then you won't see any warnings at all, anywhere. They are there for a reason.

// in the same file where you connect your emulators

const consoleInfo = console.info

function setShowAuthEmulatorWarning(show: boolean) {
  console.info = show ? consoleInfo : () => { }
}

Then, wrap connectAuthEmulator() inside 2 different calls to the above function; the 1st disables console.info and the 2nd re-enables it.

setShowAuthEmulatorWarning(false)
connectAuthEmulator(auth, 'http://localhost:9099')
setShowAuthEmulatorWarning(true)

[peterfortuin]

Is this disableWarnings flag also possible from Flutter?

[zepolyerf]

Is this disableWarnings flag also possible from Flutter?

Doesn't look like it.

[ANDREYDEN]

Is this disableWarnings flag also possible from Flutter?

In my app I just add some CSS in the web/index.html to hide the banner:

<body>
  <style>
    .firebase-emulator-warning {
      display: none;
    }
  </style>

  ...
</body>

But it would be really nice to configure this in the .useAuthEmulator() call.

[arnonrdp]

This is what worked for me:

connectAuthEmulator(auth, 'http://127.0.0.1:9099', { disableWarnings: true })