From 545d473085e8ba9243349694e019aac39bfaca5a Mon Sep 17 00:00:00 2001
From: Jaakko Lappalainen <jkk.lapp@gmail.com>
Date: Fri, 27 May 2022 16:44:45 +0100
Subject: [PATCH] fix: auth with emulator

---
 backend/src/firebase/firebase-auth.strategy.ts |  5 ++---
 frontend/package.json                          |  2 +-
 frontend/src/auth/index.js                     |  9 +++++++++
 frontend/src/components/Dashboard.spec.js      | 12 +++---------
 frontend/src/components/Dashboard.vue          |  4 ++--
 frontend/src/components/Navbar.vue             |  8 +++-----
 frontend/src/components/Register.vue           |  5 ++---
 frontend/src/store/actions/api.js              |  4 ++--
 frontend/src/store/actions/api.spec.js         | 10 +++-------
 9 files changed, 27 insertions(+), 32 deletions(-)
 create mode 100644 frontend/src/auth/index.js

diff --git a/backend/src/firebase/firebase-auth.strategy.ts b/backend/src/firebase/firebase-auth.strategy.ts
index ca08a18..f72e735 100644
--- a/backend/src/firebase/firebase-auth.strategy.ts
+++ b/backend/src/firebase/firebase-auth.strategy.ts
@@ -13,7 +13,7 @@ export class FirebaseAuthStrategy extends PassportStrategy(
     super({
       jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
     });
-    const firebase_params = {
+    const firebaseParams = {
       type: process.env.FB_PARAMS_TYPE,
       projectId: process.env.FB_PARAMS_PROJECT_ID,
       privateKeyId: process.env.FB_PARAMS_PRIVATE_KEY_ID,
@@ -27,7 +27,7 @@ export class FirebaseAuthStrategy extends PassportStrategy(
       clientC509CertUrl: process.env.FB_PARAMS_CLIENT_C509_CERT_URL,
     };
     this.defaultApp = firebase.initializeApp({
-      credential: firebase.credential.cert(firebase_params),
+      credential: firebase.credential.cert(firebaseParams),
     });
   }
   async validate(token: string) {
@@ -38,7 +38,6 @@ export class FirebaseAuthStrategy extends PassportStrategy(
         console.log(err);
         throw new UnauthorizedException(err.message);
       });
-
     if (!firebaseUser) {
       throw new UnauthorizedException();
     }
diff --git a/frontend/package.json b/frontend/package.json
index 039c3e5..16529cf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "serve": "PORT=8888 vue-cli-service serve",
-    "build:local": "vue-cli-service build --mode local --watch",
+    "build:local": "NODE_ENV=local vue-cli-service build --mode local --watch",
     "build:preview": "vue-cli-service build --mode development",
     "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint --max-warnings=0",
diff --git a/frontend/src/auth/index.js b/frontend/src/auth/index.js
new file mode 100644
index 0000000..c74aa42
--- /dev/null
+++ b/frontend/src/auth/index.js
@@ -0,0 +1,9 @@
+import { getAuth as getFirebaseAuth, connectAuthEmulator } from 'firebase/auth';
+
+export const getAuth = () => {
+  const auth = getFirebaseAuth();
+  if (process.env.NODE_ENV == 'local' && auth.emulatorConfig === null) {
+    connectAuthEmulator(auth, 'http://localhost:9099');
+  }
+  return auth;
+};
diff --git a/frontend/src/components/Dashboard.spec.js b/frontend/src/components/Dashboard.spec.js
index 7be7317..8d4be87 100644
--- a/frontend/src/components/Dashboard.spec.js
+++ b/frontend/src/components/Dashboard.spec.js
@@ -1,13 +1,9 @@
 import { mount } from '@vue/test-utils';
 import Dashboard from './Dashboard.vue';
-import firebase from 'firebase/compat/app';
+import { getAuth } from '../auth';
 import { apiRequest } from '../store/actions/api';
 
-jest.mock('firebase/compat/app', () => {
-  return {
-    auth: jest.fn(),
-  };
-});
+jest.mock('../auth');
 jest.mock('../store/actions/api');
 
 const POSTS_RESPONSE_FIXTURE = [
@@ -19,7 +15,7 @@ const POSTS_RESPONSE_FIXTURE = [
 
 describe('Dashboard', () => {
   beforeEach(() => {
-    firebase.auth.mockReturnValue({
+    getAuth.mockReturnValue({
       onAuthStateChanged: jest.fn(() => ({ email: 'test' })),
     });
     apiRequest.mockResolvedValueOnce({ data: POSTS_RESPONSE_FIXTURE });
@@ -128,8 +124,6 @@ describe('Dashboard', () => {
         message: 'Hello World',
       });
 
-      console.log(wrapper.emitted('click')[0][0]);
-
       done();
     });
   });
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index d61643d..0b60512 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -19,7 +19,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import store from '../store';
-import firebase from 'firebase/compat/app';
+import { getAuth } from '../auth';
 
 export default {
   data() {
@@ -35,7 +35,7 @@ export default {
     }),
   },
   mounted() {
-    firebase.auth().onAuthStateChanged((user) => {
+    getAuth().onAuthStateChanged((user) => {
       if (user) {
         store.dispatch('setUser', user);
         store.dispatch('fetchPosts');
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
index 7f9c373..64b4e9c 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -43,8 +43,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import firebase from 'firebase/compat/app';
-
+import { getAuth } from '../auth';
 export default {
   computed: {
     appName: () => process.env.VUE_APP_NAME,
@@ -56,12 +55,11 @@ export default {
   },
   methods: {
     signOut() {
-      firebase
-        .auth()
+      getAuth()
         .signOut()
         .then(() => {
           this.$router.replace({
-            name: '',
+            name: 'Login',
           });
         })
         .catch((err) => {
diff --git a/frontend/src/components/Register.vue b/frontend/src/components/Register.vue
index 948595a..13b264a 100644
--- a/frontend/src/components/Register.vue
+++ b/frontend/src/components/Register.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script>
-import firebase from 'firebase/compat/app';
+import { getAuth } from '../auth';
 
 export default {
   data() {
@@ -97,8 +97,7 @@ export default {
   },
   methods: {
     submit() {
-      firebase
-        .auth()
+      getAuth()
         .createUserWithEmailAndPassword(this.form.email, this.form.password)
         .then((data) => {
           data.user
diff --git a/frontend/src/store/actions/api.js b/frontend/src/store/actions/api.js
index 4fa2bb6..97eb520 100644
--- a/frontend/src/store/actions/api.js
+++ b/frontend/src/store/actions/api.js
@@ -1,8 +1,8 @@
-import firebase from 'firebase/compat/app';
 import axios from 'axios';
+import { getAuth } from '../../auth';
 
 export const apiRequest = async (method, url, data) => {
-  const idToken = await firebase.auth().currentUser.getIdToken(true);
+  const idToken = await getAuth().currentUser.getIdToken(true);
   return await axios({
     method,
     url: process.env.VUE_APP_API_BASE + url,
diff --git a/frontend/src/store/actions/api.spec.js b/frontend/src/store/actions/api.spec.js
index a0b05d9..3b0ce8c 100644
--- a/frontend/src/store/actions/api.spec.js
+++ b/frontend/src/store/actions/api.spec.js
@@ -1,12 +1,8 @@
 import { apiRequest } from './api';
-import firebase from 'firebase/compat/app';
+import { getAuth } from '../../auth';
 import axios from 'axios';
 
-jest.mock('firebase/compat/app', () => {
-  return {
-    auth: jest.fn(),
-  };
-});
+jest.mock('../../auth');
 jest.mock('axios');
 
 describe('apiRequest', () => {
@@ -16,7 +12,7 @@ describe('apiRequest', () => {
     process.env = {
       VUE_APP_API_BASE: 'https://my-api.com',
     };
-    firebase.auth.mockReturnValue({
+    getAuth.mockReturnValue({
       currentUser: {
         email: 'example@gmail.com',
         uid: 1,