Skip to content

Commit f854b67

Browse files
posvaposva
committed
feat: composables to use firebase
1 parent 4849006 commit f854b67

21 files changed

+251
-103
lines changed

‎playground/src/firebase.ts‎

Lines changed: 2 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
import { initializeApp, type FirebaseApp } from 'firebase/app'
2-
import { Firestore, getFirestore } from 'firebase/firestore'
3-
import { inject, type App, type InjectionKey } from 'vue'
4-
import { getAnalytics, type Analytics } from 'firebase/analytics'
5-
import { Database, getDatabase } from 'firebase/database'
1+
import { initializeApp } from 'firebase/app'
62

73
export function createFirebaseApp() {
8-
const firebaseApp = initializeApp({
4+
return initializeApp({
95
apiKey: 'AIzaSyAkUKe36TPWL2eZTshgk-Xl4bY_R5SB97U',
106
authDomain: 'vue-fire-store.firebaseapp.com',
117
databaseURL: 'https://vue-fire-store.firebaseio.com',
@@ -15,50 +11,4 @@ export function createFirebaseApp() {
1511
appId: '1:998674887640:web:1e2bb2cc3e5eb2fc3478ad',
1612
measurementId: 'G-RL4BTWXKJ7',
1713
})
18-
19-
const firestore = getFirestore(firebaseApp)
20-
const database = getDatabase(firebaseApp)
21-
const analytics = getAnalytics(firebaseApp)
22-
23-
// connectFirestoreEmulator(firestore, 'localhost', 8080)
24-
25-
return { firebaseApp, firestore, database, analytics }
26-
}
27-
28-
export function VueFirePlugin({
29-
firebaseApp,
30-
firestore,
31-
analytics,
32-
database,
33-
}: ReturnType<typeof createFirebaseApp>) {
34-
return (app: App) => {
35-
app.provide(FirebaseAppInjectKey, firebaseApp)
36-
app.provide(FirestoreInjectKey, firestore)
37-
app.provide(FirebaseAnalyticsInjectKey, analytics)
38-
app.provide(DatabaseInjectKey, database)
39-
}
40-
}
41-
42-
export const FirestoreInjectKey: InjectionKey<Firestore> = Symbol('firestore')
43-
export const DatabaseInjectKey: InjectionKey<Database> = Symbol('database')
44-
export const FirebaseAppInjectKey: InjectionKey<FirebaseApp> =
45-
Symbol('firebaseApp')
46-
export const FirebaseAnalyticsInjectKey: InjectionKey<Analytics> =
47-
Symbol('analytics')
48-
49-
export function useFirestore() {
50-
// TODO: warning with no currentInstance
51-
return inject(FirestoreInjectKey)!
52-
}
53-
54-
export function useDatabase() {
55-
return inject(DatabaseInjectKey)!
56-
}
57-
58-
export function useFirebaseApp() {
59-
return inject(FirebaseAppInjectKey)!
60-
}
61-
62-
export function useFirebaseAnalytics() {
63-
return inject(FirebaseAnalyticsInjectKey)!
6414
}

‎playground/src/main.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { createApp } from 'vue'
22
import { createPinia } from 'pinia'
3-
import { firestorePlugin } from 'vuefire'
3+
import { firestorePlugin, VueFire, VueFireAuth } from 'vuefire'
44
import App from './App.vue'
5-
import { createFirebaseApp, VueFirePlugin } from './firebase'
5+
import { createFirebaseApp } from './firebase'
66
import { createWebHistory, createRouter } from 'vue-router/auto'
77
import { createStore } from 'vuex'
88

@@ -22,8 +22,11 @@ const store = createStore({
2222
const app = createApp(App)
2323
app
2424
.use(createPinia())
25+
.use(VueFire, {
26+
firebaseApp: createFirebaseApp(),
27+
modules: [VueFireAuth],
28+
})
2529
.use(firestorePlugin)
26-
.use(VueFirePlugin(createFirebaseApp()))
2730
.use(store)
2831
.use(router)
2932

‎playground/src/pages/authentication.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script lang="ts" setup>
2+
import {
3+
createUserWithEmailAndPassword,
4+
EmailAuthProvider,
5+
linkWithCredential,
6+
signInAnonymously,
7+
signInWithEmailAndPassword,
8+
signInWithPopup,
9+
signInWithRedirect,
10+
signOut,
11+
} from 'firebase/auth'
12+
import { ref } from 'vue'
13+
import { useCurrentUser, useFirebaseAuth } from 'vuefire'
14+
15+
const auth = useFirebaseAuth()
16+
const user = useCurrentUser()
17+
18+
// new user
19+
const email = ref('')
20+
const password = ref('')
21+
function signUp() {
22+
// link to an existing anonymous account
23+
if (user.value?.isAnonymous) {
24+
const credential = EmailAuthProvider.credential(email.value, password.value)
25+
return linkWithCredential(user.value, credential).then(() => {
26+
return signInWithEmailAndPassword(auth, email.value, password.value)
27+
})
28+
}
29+
30+
// create a regular account
31+
return createUserWithEmailAndPassword(auth, email.value, password.value)
32+
}
33+
</script>
34+
35+
<template>
36+
<main>
37+
<h1>Auth playground</h1>
38+
<button @click="signOut(auth)">SignOut</button>
39+
<button @click="signInAnonymously(auth)">Anonymous signIn</button>
40+
<form @submit.prevent="signUp()">
41+
<fieldset>
42+
<legend>New User</legend>
43+
44+
<label> Email: <input type="email" required v-model="email" /> </label>
45+
46+
<label>
47+
Password: <input type="password" required v-model="password" />
48+
</label>
49+
50+
<button>Create</button>
51+
</fieldset>
52+
</form>
53+
54+
<form @submit.prevent="signInWithEmailAndPassword(auth, email, password)">
55+
<fieldset>
56+
<legend>Sign in</legend>
57+
58+
<label> Email: <input type="email" required v-model="email" /> </label>
59+
60+
<label>
61+
Password: <input type="password" required v-model="password" />
62+
</label>
63+
64+
<button>Signin</button>
65+
</fieldset>
66+
</form>
67+
<p>Current User:</p>
68+
<pre>{{ user }}</pre>
69+
</main>
70+
</template>

‎playground/src/pages/config.vue‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
<script setup lang="ts">
22
import { doc, getDoc } from 'firebase/firestore'
3-
import { useDocument } from 'vuefire'
4-
import { useFirestore } from '@/firebase'
3+
import { useDocument, useFirestore, usePendingPromises } from 'vuefire'
54
import { ref } from 'vue'
6-
import { usePendingPromises } from '../../../src/ssr/plugin'
75
86
const db = useFirestore()
97
const configRef = doc(db, 'configs', 'jORwjIykFo2NmkdzTkhU')

‎playground/src/pages/converter-with-number.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import { collection, doc } from 'firebase/firestore'
3-
import { useCollection } from 'vuefire'
4-
import { useFirestore } from '@/firebase'
3+
import { useCollection, useFirestore } from 'vuefire'
54
65
const db = useFirestore()
76
const numbers = useCollection(

‎playground/src/pages/nested-collections.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
22
import { collection } from 'firebase/firestore'
3-
import { useCollection } from 'vuefire'
4-
import { useFirestore } from '@/firebase'
3+
import { useCollection, useFirestore } from 'vuefire'
54
65
const db = useFirestore()
76
const tweetsRef = collection(db, 'tweets')

‎playground/src/pages/nested-refs-list.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<script setup lang="ts">
2-
import { collection, doc, getDoc } from 'firebase/firestore'
3-
import { useCollection, useDocument } from 'vuefire'
4-
import { useFirestore } from '@/firebase'
2+
import { collection } from 'firebase/firestore'
3+
import { useCollection, useFirestore } from 'vuefire'
54
65
const db = useFirestore()
76
const nestedRefs = collection(db, 'playground/nested-refs/list')

‎playground/src/pages/rtdb-todos.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import {
77
update,
88
} from 'firebase/database'
99
import { ref } from 'vue'
10-
import { useList } from 'vuefire'
11-
import { useDatabase } from '@/firebase'
10+
import { useDatabase, useList } from 'vuefire'
1211
1312
interface Todo {
1413
created: Date

‎playground/src/pages/todos.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ import {
1010
where,
1111
} from 'firebase/firestore'
1212
import { ref } from 'vue'
13-
import { useCollection } from 'vuefire'
14-
import { useFirestore } from '@/firebase'
13+
import { useCollection, useFirestore } from 'vuefire'
1514
1615
interface Todo {
1716
created: Date
1817
finished: boolean
1918
text: string
2019
}
2120
21+
// TODO: expose some kind of type to make this posssible
22+
// type TodoData = _VueFireQueryData<Todo>
23+
2224
const db = useFirestore()
2325
const todosRef = collection(db, 'todos')
2426
const todosWithConverterRef = collection(db, 'todos').withConverter<Todo>({

‎playground/src/pages/vuex-store.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script lang="ts" setup>
2-
import { useFirestore } from '@/firebase'
32
import { doc, setDoc } from 'firebase/firestore'
43
import { toRef } from 'vue'
5-
import { useDocument } from 'vuefire'
4+
import { useDocument, useFirestore } from 'vuefire'
65
import { useStore } from 'vuex'
76
87
const store = useStore()

0 commit comments

Comments
 (0)