Merge pull request #10 from davidroll20/firebase-auth

Beginning to setup firebase auth with google signin

src/components/SimpleLogin/SimpleLogin.vue

@@ -22,13 +22,36 @@
 
     <span v-if="store.strike">Try again in a moment.</span>
     <button @click="store.proxyVerify()" class="simple-login__submit">Submit</button>
+    <button @click="signinRedirect()" class="simple-login__submit">Sign-in with Google</button>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useLoginStore } from '@/stores/loginStore';
+import { getRedirectResult, GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';
+import { onMounted, ref } from 'vue';
+import { useFirebaseAuth } from 'vuefire';
 
 const store = useLoginStore();
+
+const auth = useFirebaseAuth(); // only exists on client side
+
+// display errors if any
+const error = ref(null);
+function signinRedirect() {
+  signInWithRedirect(auth, new GoogleAuthProvider()).catch((reason) => {
+    console.error('Failed signinRedirect', reason);
+    error.value = reason;
+  });
+}
+
+// only on client side
+onMounted(() => {
+  getRedirectResult(auth).catch((reason) => {
+    console.error('Failed redirect result', reason);
+    error.value = reason;
+  });
+});
 </script>
 
 <style lang="scss">

src/firebase.ts

@@ -1,20 +1,21 @@
-import { initializeApp } from 'firebase/app'
-import { collection, getFirestore } from 'firebase/firestore'
+import { initializeApp } from 'firebase/app';
+import { collection, getFirestore } from 'firebase/firestore';
 
 export const firebaseApp = initializeApp({
   apiKey: 'AIzaSyBQ6izD-t26QvAFhHV9SvmNy1cdt9fLaz8',
-  authDomain: 'ryan-fam.firebaseapp.com',
+  // authDomain: 'ryan-fam.firebaseapp.com',
+  authDomain: 'www.ryan-fam.com',
   projectId: 'ryan-fam',
   storageBucket: 'ryan-fam.firebasestorage.app',
   messagingSenderId: '750155303707',
   appId: '1:750155303707:web:d16ef825d3c2a14e93a1be',
-})
+});
 
-export const db = getFirestore(firebaseApp)
+export const db = getFirestore(firebaseApp);
 
 export enum ryanFamCollection {
   CALENDAR = 'calendar-events',
   BULLETIN = 'bulletins',
 }
-export const ryanFamCalendarRef = collection(db, ryanFamCollection.CALENDAR)
-export const ryanFamBulletinsRef = collection(db, ryanFamCollection.BULLETIN)
+export const ryanFamCalendarRef = collection(db, ryanFamCollection.CALENDAR);
+export const ryanFamBulletinsRef = collection(db, ryanFamCollection.BULLETIN);

src/main.ts

@@ -20,7 +20,7 @@ import {
   uniEye,
 } from 'vue-unicons/dist/icons';
 import { firebaseApp } from './firebase';
-import { VueFire } from 'vuefire';
+import { VueFire, VueFireAuth } from 'vuefire';
 
 Unicon.add([
   uniCheck,
@@ -42,7 +42,7 @@ app.use(Unicon);
 app.use(createPinia());
 app.use(VueFire, {
   firebaseApp,
-  // modules: [VueFireFirestoreOptionsAPI()],
+  modules: [VueFireAuth()],
 });
 
 app.use(router);