Added instructions for running auth demo against emulator (#5725)

Author: lisajian

packages/auth/demo/README.md

@@ -58,3 +58,19 @@ yarn run demo
 This will compile all the files needed to run Firebase Auth, and start a Firebase server locally at
 [http://localhost:5000](http://localhost:5000).
 
+## Running against Auth Emulator
+
+The demo page by default runs against the actual Auth Backend. To run against the Auth Emulator with mocked endpoints, do the following:
+
+1. (Optional) If you are running against local changes to the Auth Emulator (see [Firebase CLI Contributing Guide](https://github.com/firebase/firebase-tools/blob/master/CONTRIBUTING.md)), make sure that your version of `firebase-tools` is executing against your `npm link`’d repository and that you've built your local emulator changes with `npm run build`.
+
+2. From `auth/demo`, locally initialize a Firebase project by running `firebase init`. When asked "Which Firebase features do you want to set up for this directory?", select "Emulators". When asked "Which Firebase emulators do you want to set up?", select "Authentication Emulator". This will create a `firebase.json` file.
+
+3. Change the constants `USE_AUTH_EMULATOR` and `AUTH_EMULATOR_URL` in `auth/demo/src/index.js` to `true` and `http://localhost:{port}` where the auth `port` can be found in the `firebase.json` file.
+
+4. To run the app locally and against the Auth Emulator, simply issue the following command in the `auth/demo` directory:
+
+```bash
+yarn run demo:emulator
+```
+

packages/auth/demo/package.json

@@ -11,6 +11,7 @@
     "lint": "eslint -c .eslintrc.js '**/*.ts' --ignore-path '../../../.gitignore'",
     "lint:fix": "eslint --fix -c .eslintrc.js '**/*.ts' --ignore-path '../../../.gitignore'",
     "demo": "rollup -c && firebase serve",
+    "demo:emulator": "rollup -c && firebase emulators:start",
     "build": "rollup -c",
     "build:deps": "lerna run --scope @firebase/'{app,auth}' --include-dependencies build",
     "dev": "rollup -c -w"

packages/auth/demo/src/index.js

@@ -67,7 +67,8 @@ import {
   linkWithRedirect,
   reauthenticateWithRedirect,
   getRedirectResult,
-  browserPopupRedirectResolver
+  browserPopupRedirectResolver,
+  connectAuthEmulator
 } from '@firebase/auth';
 
 import { config } from './config';
@@ -80,6 +81,12 @@ import {
   logAtLevel_
 } from './logging';
 
+/** 
+ * Constants that are used when connecting to the Auth Emulator.
+ */
+const USE_AUTH_EMULATOR = false;
+const AUTH_EMULATOR_URL = 'http://localhost:9099';
+
 let app = null;
 let auth = null;
 let currentTab = null;
@@ -1643,6 +1650,10 @@ function initApp() {
   log('Initializing app...');
   app = initializeApp(config);
   auth = getAuth(app);
+  if (USE_AUTH_EMULATOR) {
+    connectAuthEmulator(auth, AUTH_EMULATOR_URL);
+  }
+  
 
   tempApp = initializeApp(
     {
@@ -1655,6 +1666,9 @@ function initApp() {
     persistence: inMemoryPersistence,
     popupRedirectResolver: browserPopupRedirectResolver
   });
+  if (USE_AUTH_EMULATOR) {
+    connectAuthEmulator(tempAuth, AUTH_EMULATOR_URL);
+  }
 
   // Listen to reCAPTCHA config togglers.
   initRecaptchaToggle(size => {