9

I currently have a project set up through VueCLI and firebase-tools and can't seem to be able to attach the Firebase Auth emulator to my project locally.

My Firebase Set-up file:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';

const configOptions = {
    apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
    authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.VUE_APP_FIREBASE_DB_URL,
    projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.VUE_APP_FIREBASE_APP_ID,
    measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID
};

firebase.initializeApp(configOptions);

if (process.env.NODE_ENV === "development"){
    firebase.firestore().settings({ host: 'localhost:8080', ssl: false });
    firebase.auth().useEmulator('http://localhost:9099/');
}

export const firebaseauth = firebase.auth();
export const firestore = firebase.firestore();
export const firebasestorage = firebase.storage();
export default firebase;

My .env.development file

VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en

VUE_APP_FIREBASE_API_KEY="xx"
VUE_APP_FIREBASE_AUTH_DOMAIN="localhost:9099"
VUE_APP_FIREBASE_DB_URL="http://localhost:4000"
VUE_APP_FIREBASE_PROJECT_ID="xx"
VUE_APP_FIREBASE_STORAGE_BUCKET="xx"
VUE_APP_FIREBASE_MESSAGING_SENDER_ID="xx"
VUE_APP_FIREBASE_APP_ID="xx"
VUE_APP_FIREBASE_MEASUREMENT_ID="xx"

When navigating to localhost:5000 (emulated hosting), I get the error:

Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.auth(...).useEmulator is not a function

useEmulator comes directly from Google's Firebase Documentation so I'm unsure what I'm doing incorrectly.

Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
pandavenger
  • 1,017
  • 7
  • 20
  • Using `import * as firebase from '@firebase/testing'` and then `console.log(firebase)`, auth isn't logged. Maybe since the emulator is in beta, auth is not implemented yet. In any case, though, I think you need to set things up with `@firebase/testing`. The video https://youtu.be/VDulvfBpzZE has gotten me farther than the docs ... at least with Firestore. Like you, I'm stumped with Authentication. – michaelgill1969 Jan 18 '21 at 05:54

3 Answers3

13

It may be that you're still using a firebase version older than version 8.0.0, in that case the method you'd want to call is the .useFunctionsEmulator method (deprecated since v8.0.0):

firebase.functions().useFunctionsEmulator('http://localhost:5001');

If you are using the v8 SDK, however, here is how you can connect your app to the emulator:

firebase.auth().useEmulator("http://localhost:9099"); // Connect to the Authentication emulator

firebase.functions().useEmulator("localhost", 5001); // Connect to the Cloud Functions emulator
Diego Zacarias
  • 793
  • 2
  • 12
  • 22
  • 3
    I'm using 9.2.1 and can't use either useEmulator or useFunctionsEmulator. I don't understand what I'm missing and why this is the accepted answer. Isn't useFunctionEmulator specific to cloud functions and not firestore??? – ak22 Jan 16 '21 at 18:38
  • 1
    .useFunctionsEmulator not solve for all cases as firestore. – horacioibrahim Feb 27 '21 at 21:59
  • Each Firebase product has its own method you can use to connect to the emulator. [Firebase Cloud Functions](https://firebase.google.com/docs/emulator-suite/connect_functions) - [Firebase Auth](https://firebase.google.com/docs/emulator-suite/connect_auth#android_ios_and_web_sdks) [Firestore](https://firebase.google.com/docs/emulator-suite/connect_firestore#android_ios_and_web_sdks) – Diego Zacarias Feb 27 '21 at 22:35
  • This does not answer the question. I am using Firebase version 9.16.6 and still getting the "useEmulator is not a function" error. – Sam Seidenberg Aug 28 '21 at 18:08
  • useFunctionsEmulator is useful to link to cloudfunctions from a local server, but not Firestore direct request ! – Damien Romito Oct 04 '21 at 14:41
2

With the JS SDK v9, you'll need to use connectFirestoreEmulator function.

See docs https://firebase.google.com/docs/emulator-suite/connect_firestore

import { initializeApp } from "firebase/app";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

const config = {} //your config object here

const app = initializeApp(config);

// firebaseApps previously initialized using initializeApp()
const db = getFirestore();
connectFirestoreEmulator(db, 'localhost', 8080);

ufmemo
  • 211
  • 2
  • 6
  • op is asking about firebase AUTH specifically, not firestore. how is your answer related ? – Ben Oct 31 '21 at 15:09
1

ufmemo's solution is correct.

A more detailed answer would be as follows.

// import 'firebase/auth';
import { connectAuthEmulator } from "firebase/auth";

if (process.env.NODE_ENV === "development"){
    firebase.firestore().settings({ host: 'localhost:8080', ssl: false });
    // firebase.auth().useEmulator('http://localhost:9099/');
    connectAuthEmulator(firebase, 'http://localhost:9099/');
}
  • I think that the first argument for `connectAuthEmulator` in the version 9 Firebase API is an auth instance, not a firebase instance. I believe you should add `getAuth` to the import from "firebase/auth", and the call should be `connectAuthEmulator(getAuth(), "http://localhost:9099");` – Robert Rendell Jan 11 '23 at 04:21