Why does the Firebase auth emulator use production?

Question

I'm trying to use the Firebase authentication emulator and I'm finding that even with the emulator running and enabled the authentication happens against production.

I have the following in firebase/auth.js

// imports and stuff...

firebase.initializeApp(firebaseConfig);

export const firebaseAuth = firebase.auth()
if (DEBUG_MODE) {
    firebaseAuth.useEmulator('http://localhost:9099');
}

// declare a class to make mocking easier...maybe I just don't know how to properly mock constants?
export class FirebaseAuth {
    static getAuth() {
        return firebaseAuth
    }
}

Then, I have a SignIn component just like the SignInScreen example found at https://github.com/firebase/firebaseui-web-react#using-styledfirebaseauth-with-local-state - though the one difference is that this component uses firebaseAuth which is exported from auth.js seen above.

import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { uiConfig, FirebaseAuth } from '../firebase/auth';
import { useQuery } from '../hooks';

function SignIn() {
    let params = useQuery()
    let redirectUrl = params.get('redirect_url');
    const config = Object.assign({}, uiConfig, {signInSuccessUrl: redirectUrl})
    return (
        <div>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig={config} firebaseAuth={FirebaseAuth.getAuth()} />
        </div>
    );
}

export default SignIn

When I run my react app locally, I see that firebase is detecting the emulator based on this meesage shown at the bottom of my app:

However, I find that when I try to sign in the production instance of firebase auth is used. New users are created at https://console.firebase.google.com/u/0/project/sagereact/authentication/users and not at my local emulator.

Additionally, I see the following log line when I do a hard refresh the of my webapp which also logs me out:

⚠  Received a signed JWT. Auth Emulator does not validate JWTs and IS NOT SECURE

I've verified that my emulator is running:

 ❮❮❮ firebase emulators:start
i  emulators: Starting emulators: auth, functions, firestore, database, hosting, pubsub
...stuff

┌────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at localhost:4000 │
└────────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬──────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI      │
├────────────────┼────────────────┼──────────────────────────┤
│ Authentication │ localhost:9099 │ localhost:4000/auth      │
├────────────────┼────────────────┼──────────────────────────┤
│ Functions      │ localhost:5001 │ localhost:4000/functions │
├────────────────┼────────────────┼──────────────────────────┤
│ Firestore      │ localhost:8080 │ localhost:4000/firestore │
├────────────────┼────────────────┼──────────────────────────┤
│ Database       │ localhost:9000 │ localhost:4000/database  │
├────────────────┼────────────────┼──────────────────────────┤
│ Hosting        │ localhost:5055 │ n/a                      │
├────────────────┼────────────────┼──────────────────────────┤
│ Pub/Sub        │ localhost:8085 │ n/a                      │
└────────────────┴────────────────┴──────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

and

How can I figure out why firebase isn't using my local emulator for authentication?

Answer 1

You need to set up the Auth emulator from your client code. Here's the equivalent in Dart using Flutter:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  var app = await Firebase.initializeApp();

  if (USE_FIRESTORE_EMULATOR) {
    FirebaseFirestore.instance.settings = Settings(host: 'localhost:8080', sslEnabled: false, persistenceEnabled: false);
    FirebaseFunctions.instance.useFunctionsEmulator(origin: 'http://localhost:5001');
    FirebaseAuth.instanceFor(app: app).useEmulator('http://localhost:9099');
  }

For firebaseui-web-react have a look at this Pull Request (https://github.com/firebase/firebaseui-web-react/pull/125) and ensure you are on the correct version.