auth-solved-commit

src/components/SignInComponent.vue

@@ -1,31 +1,43 @@
 <template>
-    <div >
-        <form class="ion-padding" @submit.prevent="userLogin">
-            <h3>Sign In</h3>
+  <div>
+    <form class="ion-padding" @submit.prevent="userLogin">
+      <h3>Sign In</h3>
 
-            <ion-list>
-              <!-- Email Item -->
-              <ion-item class="form-group">
-                  <ion-label>Email address</ion-label>
-                  <ion-input type="email" class="form-control form-control-lg" v-model="user.email" required/>
-              </ion-item>
-              <!-- Password Item -->
-              <ion-item class="form-group">
-                  <ion-label>Password</ion-label>
-                  <ion-input type="password" class="form-control form-control-lg" v-model="user.password" required/>
-              </ion-item>
-              <!-- Submit Button -->
-              <ion-button type="submit" class="btn btn-dark btn-lg btn-block">Sign In</ion-button>
-            </ion-list>
-            <!-- Forget Password Link --> 
-            <p class="forgot-password text-right mt-2 mb-4">
-                <router-link to="/forgot-password">Forgot password ?</router-link>
-            </p>
-            <p class="not-account text-right mt-2 mb-4">
-                <router-link to="/signup">Don't you have an account yet?</router-link>
-            </p>
-        </form>
-    </div>
+      <ion-list>
+        <!-- Email Item -->
+        <ion-item class="form-group">
+          <ion-label>Email address</ion-label>
+          <ion-input
+            type="email"
+            class="form-control form-control-lg"
+            v-model="user.email"
+            required
+          />
+        </ion-item>
+        <!-- Password Item -->
+        <ion-item class="form-group">
+          <ion-label>Password</ion-label>
+          <ion-input
+            type="password"
+            class="form-control form-control-lg"
+            v-model="user.password"
+            required
+          />
+        </ion-item>
+        <!-- Submit Button -->
+        <ion-button type="submit" class="btn btn-dark btn-lg btn-block"
+          >Sign In</ion-button
+        >
+      </ion-list>
+      <!-- Forget Password Link -->
+      <p class="forgot-password text-right mt-2 mb-4">
+        <router-link to="/forgot-password">Forgot password ?</router-link>
+      </p>
+      <p class="not-account text-right mt-2 mb-4">
+        <router-link to="/signup">Don't you have an account yet?</router-link>
+      </p>
+    </form>
+  </div>
 </template>
 
 
@@ -38,16 +50,18 @@ import {
   IonLabel,
   IonInput,
   IonButton,
-  toastController
+  toastController,
 } from "@ionic/vue";
 
+import { getCurrentUser } from "../firebaseConfig.js";
+
 export default {
   data() {
     return {
-      user: {   
-        email: '',
-        password: ''
-      }
+      user: {
+        email: "",
+        password: "",
+      },
     };
   },
   components: {
@@ -56,7 +70,15 @@ export default {
     IonLabel,
     IonInput,
     IonButton,
-    
+  },
+  async created() {
+    const user = await getCurrentUser();
+    if (user) {
+      console.log("User credentials", user.email, user.password)
+      this.user.email = user.email;
+      this.user.password = user.password;
+      this.userLogin();
+    }
   },
   methods: {
     async openToast(msg) {
@@ -71,18 +93,17 @@ export default {
     async userLogin() {
       const payload = {
         email: this.user.email,
-        password: this.user.password
-      }
-      try{
-        await this.$store.dispatch("signin", payload)
-      }catch(error){
-        this.openToast(error.message)
-        return 
+        password: this.user.password,
+      };
+      try {
+        await this.$store.dispatch("signin", payload);
+      } catch (error) {
+        this.openToast(error.message);
+        return;
       }
-      this.$router.replace("/animals/slider")
+      this.$router.replace("/animals/slider");
       // setStoragePassword(payload)
-      }
-      
-  }
-}
+    },
+  },
+};
 </script>

src/firebaseConfig.js

@@ -38,7 +38,7 @@ async function getCollectionFromCollection(from_collection, collection, doc_id)
 }
 
 async function updateName(newName) {
-    const user = getCurrentUser()
+    const user = await getCurrentUser()
     await user.updateProfile({
         displayName: newName
     })
@@ -60,6 +60,7 @@ async function getData(collection) {
     return data
 }
 
+
 async function addNewDocument(data, collection) {
     const ref = await db.collection(collection)
         .add({
@@ -123,12 +124,12 @@ async function logInUser(email, password) {
 }
 
 async function logOutUser(){
+    console.log("Logging out User")
     firebase.auth().signOut();
 }
 
 async function getCurrentUser() {
     const user = await firebase.auth().currentUser
-    console.log('User Firebase: ', user)
     return user  
 }
 

src/main.js

@@ -7,6 +7,11 @@ import ContentContainer from './ui/ContentContainer.vue'
 
 import { IonicVue } from '@ionic/vue';
 
+import firebase from "firebase/app"
+
+
+
+
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/vue/css/core.css';
 
@@ -30,22 +35,48 @@ import './theme/typography.css';
 import './theme/padding.css'
 import './theme/customInterface.css'
 
+// const app = createApp(App)
+//   .use(IonicVue)
+//   .use(router)
+//   .use(store);
+
+// app.component('content-container', ContentContainer);
 
 
-const app = createApp(App)
-  .use(IonicVue)
-  .use(router)
-  .use(store);
+// router.isReady().then(() => {
+//   app.mount('#app');
+// });
 
-app.component('content-container', ContentContainer);
 
 
-router.isReady().then(() => {
-  app.mount('#app');
+
+let app = '';
+
+
+firebase.auth().onAuthStateChanged(async user => {
+  if (user) {
+    const payload = {
+      id: user.uid,
+      email: user.email,
+      name: user.displayName
+    }
+    store.dispatch("setLoggedUser", payload)
+  }
+  if (!app) {
+    app = createApp(App)
+      .use(IonicVue)
+      .use(router)
+      .use(store);
+    app.component('content-container', ContentContainer);
+
+    router.isReady().then(() => {
+      app.mount('#app');
+    })
+  }
 });
 
+
 router.beforeEach(async (to, from, next) => {
-  console.log(await store.getters.getLoggedUser)
   if (to.name == 'login' && await store.getters.getLoggedUser) next({ name: 'slider' })
   else next()
-})
+})

src/router/index.js

@@ -46,6 +46,7 @@ const routes = [
   },
   {
     path: '/profile',
+    name: 'profile',
     component: () => import('@/views/EditProfile.vue')
   },
   {