Add auth emulator

CONTRIBUTING.md

@@ -12,6 +12,10 @@ This project uses Firebase for authentication. You may want to set up your own
 Firebase project for development of this application. Alternatively, you can
 share one with other people.
 
+You will need to update the `.firebaserc` file with the new project identifier,
+regardless of which of the following steps you decide to take. There is a
+`.firebaserc` located in both the frontend and backend directories.
+
 #### New Project
 
 > Follow this if you want to setup a new Firebase project.

README.md

@@ -56,8 +56,10 @@ $ yarn install
 $ yarn start
 ```
 
-by default your application will be hosted at `http://localhost:3000`, while the api will be hosted at
-`http://localhost:4200/api`. These can be changed in the config/environment values.
+by default your application will be hosted at `http://localhost:3000`, while the
+api will be hosted at `http://localhost:4200/api`. These can be changed in the
+config/environment values. See the `contributing` section below for more
+details. on running the app.
 
 ## Running Tests
 

packages/backend/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "flat-split"
+  }
+}

packages/backend/firebase.json

@@ -0,0 +1,10 @@
+{
+  "emulators": {
+    "auth": {
+      "port": 9099
+    },
+    "ui": {
+      "enabled": true
+    }
+  }
+}

packages/backend/package.json

@@ -10,7 +10,9 @@
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
     "start": "nest start",
-    "start:dev": "cross-env NODE_ENV=development nest start --watch",
+    "start:dev": "cross-env NODE_ENV=development FIREBASE_AUTH_EMULATOR_HOST=\"localhost:9099\" run-p start:emulators start:watch",
+    "start:emulators": "firebase emulators:start",
+    "start:watch": "nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "cross-env NODE_ENV=production node dist/main",
     "test": "jest",
@@ -51,7 +53,9 @@
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "firebase-tools": "^10.4.0",
     "jest": "^27.2.5",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.2",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",

packages/frontend/.env.development

@@ -1,5 +1,6 @@
-# This file should be the same for all developers
+# This file should be the same for all developers. Create .env.development.local if you want your own configuration.
 
 REACT_APP_ENDPOINT=http://localhost:4200
 # This information is public
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCWgxNPREB1Pw7JXaOjq5c63TdhK0HKHcg","authDomain":"flat-split.firebaseapp.com","projectId":"flat-split","storageBucket":"flat-split.appspot.com","messagingSenderId":"404672973040","appId":"1:404672973040:web:496005cc4f28f56ab75a35","measurementId":"G-D05DK4ZWJ2"}'
+REACT_APP_USE_AUTH_EMULATOR_IF_DEV=true

packages/frontend/.env.production

@@ -1,2 +1,2 @@
-
 REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCWgxNPREB1Pw7JXaOjq5c63TdhK0HKHcg","authDomain":"flat-split.firebaseapp.com","projectId":"flat-split","storageBucket":"flat-split.appspot.com","messagingSenderId":"404672973040","appId":"1:404672973040:web:496005cc4f28f56ab75a35","measurementId":"G-D05DK4ZWJ2"}'
+REACT_APP_USE_AUTH_EMULATOR_IF_DEV=false

packages/frontend/src/services/firebase.ts

@@ -1,12 +1,19 @@
 import { initializeApp } from 'firebase/app';
-import { getAuth } from 'firebase/auth';
+import { connectAuthEmulator, getAuth } from 'firebase/auth';
 
 const firebaseConfig = JSON.parse(
   process.env.REACT_APP_FIREBASE_CONFIG ?? '{}',
 );
 
 const app = initializeApp(firebaseConfig);
 
+if (
+  process.env.NODE_ENV === 'development' &&
+  process.env.REACT_APP_USE_AUTH_EMULATOR_IF_DEV
+) {
+  connectAuthEmulator(getAuth(), 'http://localhost:9099');
+}
+
 //Use auth from other components to access the up-to-date user information
 //i.e. auth.currentUser
 export const auth = getAuth(app);