Skip to content

Commit 2babb09

Browse files
frozenheliumfrozenhelium
committed
Add support for firebase emulator
1 parent 85a4768 commit 2babb09

File tree

8 files changed

+48
-22
lines changed

8 files changed

+48
-22
lines changed

‎.env.development.local.sample‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@ VITE_FIREBASE_MEASUREMENT_ID=
1212
VITE_MAPILLARY_API_KEY=
1313

1414
VITE_OSM_OAUTH_REDIRECT_URI=
15+
16+
VITE_FIREBASE_DB_EMULATOR_HOST=
17+
VITE_FIREBASE_DB_EMULATOR_PORT=
18+
VITE_FIREBASE_AUTH_EMULATOR_URL=

‎src/components/OauthReturn.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import { defineComponent } from 'vue'
33
import { i18nRoute } from '@/i18n/translation'
4-
import { signInWithCustomToken, getAuth } from 'firebase/auth'
5-
import { logAnalyticsEvent } from '@/firebase'
4+
import { signInWithCustomToken } from 'firebase/auth'
5+
import { getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
66
77
export default defineComponent({
88
props: {
@@ -15,7 +15,7 @@ export default defineComponent({
1515
i18nRoute,
1616
signin(token: String) {
1717
const routerReplace = this.$router.replace
18-
const auth = getAuth()
18+
const auth = getFirebaseAuth()
1919
signInWithCustomToken(auth, token)
2020
.then(() => {
2121
this.showSnackbar(this.$t('authView.osmSignInSuccess'), 'success')

‎src/components/RecoverAccount.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import { defineComponent } from 'vue'
3-
import { getAuth, sendPasswordResetEmail, type ActionCodeSettings } from 'firebase/auth'
3+
import { sendPasswordResetEmail, type ActionCodeSettings } from 'firebase/auth'
4+
import { getFirebaseAuth } from '@/firebase'
45
56
export default defineComponent({
67
data() {
@@ -36,7 +37,7 @@ export default defineComponent({
3637
methods: {
3738
requestReset() {
3839
if (this.isFormValid) {
39-
const auth = getAuth()
40+
const auth = getFirebaseAuth()
4041
// workaround: dev instance does not accept continueUrl argument at the moment
4142
var actionCodeSettings = undefined
4243
const mode = import.meta.env.MODE

‎src/components/SignIn.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts">
22
import { defineComponent } from 'vue'
33
import { i18nRoute } from '@/i18n/translation'
4-
import { signInWithEmailAndPassword, getAuth } from 'firebase/auth'
5-
import { logAnalyticsEvent } from '@/firebase'
4+
import { signInWithEmailAndPassword } from 'firebase/auth'
5+
import { getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
66
import SignInOsm from '@/components/SignInOsm.vue'
77
88
export default defineComponent({
@@ -49,7 +49,7 @@ export default defineComponent({
4949
signin() {
5050
if (this.isFormValid) {
5151
const routerPush = this.$router.push
52-
const auth = getAuth()
52+
const auth = getFirebaseAuth()
5353
signInWithEmailAndPassword(auth, this.email, this.password)
5454
.then((userCredential) => {
5555
const user = userCredential.user

‎src/components/SignUp.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@
22
import { defineComponent } from 'vue'
33
import {
44
type ActionCodeSettings,
5-
getAuth,
65
createUserWithEmailAndPassword,
76
sendEmailVerification,
87
updateProfile,
98
} from 'firebase/auth'
10-
import { getDatabase, ref, set } from 'firebase/database'
11-
import { logAnalyticsEvent } from '@/firebase'
9+
import { ref, set } from 'firebase/database'
10+
import { db, getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
1211
import { i18nRoute } from '@/i18n/translation'
1312
import SignInOsm from '@/components/SignInOsm.vue'
1413
@@ -70,8 +69,7 @@ export default defineComponent({
7069
methods: {
7170
signup() {
7271
if (this.isFormValid && this.consent) {
73-
const auth = getAuth()
74-
const db = getDatabase()
72+
const auth = getFirebaseAuth()
7573
const routerPush = this.$router.push
7674
7775
createUserWithEmailAndPassword(auth, this.email, this.password)

‎src/firebase/index.ts‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { initializeApp } from 'firebase/app'
22
import { initializeAnalytics, logEvent } from 'firebase/analytics'
3-
import { equalTo, getDatabase, orderByChild, query, ref, startAfter } from 'firebase/database'
3+
import { connectDatabaseEmulator, equalTo, getDatabase, orderByChild, query, ref, startAfter } from 'firebase/database'
4+
import { connectAuthEmulator, getAuth } from 'firebase/auth'
5+
import { isDefined } from '@togglecorp/fujs'
46

57
const firebaseConfig = {
68
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
@@ -25,6 +27,27 @@ export const logAnalyticsEvent = (eventName, eventParams = {}) => {
2527
// used for the database refs
2628
export const db = getDatabase(firebaseApp)
2729

30+
const shouldUseEmulator = isDefined(import.meta.env.VITE_FIREBASE_DB_EMULATOR_HOST)
31+
&& isDefined(import.meta.env.VITE_FIREBASE_DB_EMULATOR_PORT);
32+
33+
if (shouldUseEmulator) {
34+
connectDatabaseEmulator(
35+
db,
36+
import.meta.env.VITE_FIREBASE_DB_EMULATOR_HOST,
37+
import.meta.env.VITE_FIREBASE_DB_EMULATOR_PORT,
38+
);
39+
}
40+
41+
export function getFirebaseAuth() {
42+
const auth = getAuth(firebaseApp);
43+
44+
if (shouldUseEmulator && isDefined(import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_URL)) {
45+
connectAuthEmulator(auth, import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_URL);
46+
}
47+
48+
return auth;
49+
}
50+
2851
// export reusable database references
2952
export const dbRef = ref(db)
3053
export const getProjectRef = (projectId: string) => ref(db, `v2/projects/${projectId}`)

‎src/views/ProfileView.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
import BasicPage from '@/components/BasicPage.vue'
33
import { defineComponent } from 'vue'
44
import { mapStores } from 'pinia'
5-
import { getAuth, signOut, updateProfile } from 'firebase/auth'
6-
import { getDatabase, ref, push, set, update, onValue } from 'firebase/database'
7-
import { logAnalyticsEvent } from '@/firebase'
5+
import { signOut, updateProfile } from 'firebase/auth'
6+
import { ref, push, set, update, onValue } from 'firebase/database'
7+
import { db, getFirebaseAuth, logAnalyticsEvent } from '@/firebase'
88
import { useCurrentUserStore } from '@/stores/currentUser'
99
import {
1010
dbRef,
@@ -91,7 +91,6 @@ export default defineComponent({
9191
changeUsername() {
9292
this.changeUsernameDialog = false
9393
const userId = this.user.uid
94-
const db = getDatabase()
9594
9695
if ((this.newUsername?.length ?? 0) >= 4) {
9796
updateProfile(this.user, { displayName: this.newUsername })
@@ -202,7 +201,7 @@ export default defineComponent({
202201
},
203202
signOut() {
204203
this.hideDialog()
205-
const auth = getAuth()
204+
const auth = getFirebaseAuth()
206205
signOut(auth)
207206
.then(() => {
208207
logAnalyticsEvent('sign_out')

‎src/views/ProjectsView.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { defineComponent } from 'vue'
33
import BasicPage from '@/components/BasicPage.vue'
44
import ProjectMoreInfo from '@/components/ProjectMoreInfo.vue'
5-
import { ref, getDatabase, onValue, set } from 'firebase/database'
6-
import { activeProjectsQuery, logAnalyticsEvent, getUserContributionsRef } from '@/firebase'
5+
import { ref, onValue, set } from 'firebase/database'
6+
import { activeProjectsQuery, logAnalyticsEvent, getUserContributionsRef, db } from '@/firebase'
77
import { i18nRoute } from '@/i18n/translation'
88
import { mapStores } from 'pinia'
99
import { useCurrentUserStore } from '@/stores/currentUser'
@@ -83,6 +83,7 @@ export default defineComponent({
8383
methods: {
8484
bindProjects() {
8585
onValue(activeProjectsQuery, (snapshot) => {
86+
console.info('project snapshot', snapshot, snapshot.val());
8687
const data = snapshot.val() || {}
8788
this.projects = data
8889
})
@@ -156,7 +157,7 @@ export default defineComponent({
156157
},
157158
updateLastAppUse() {
158159
const userId = this.user.uid
159-
set(ref(getDatabase(), `/v2/users/${userId}/lastAppUse`), new Date().toISOString())
160+
set(ref(db, `/v2/users/${userId}/lastAppUse`), new Date().toISOString())
160161
},
161162
},
162163
mounted() {

0 commit comments

Comments
 (0)