Updates to login and store.js auth

Author: philwing100

src/axios.js

@@ -0,0 +1,11 @@
+// axios.js
+import axios from 'axios';
+
+const baseURL = 'http://localhost:3000/api'; // Define the base URL here
+
+const instance = axios.create({
+  baseURL, // Use the base URL here
+  withCredentials: true, // Include credentials with requests
+});
+
+export { instance, baseURL }; // Export both the instance and base URL

src/components/CalendarComponents/DailyCalendar.vue

@@ -174,7 +174,7 @@ export default {
   text-overflow: ellipsis;
 }
 
-.event:hover {
+.event:hover {  
   background-color: #388e3c;
 }
 

src/components/Login.vue

@@ -1,76 +1,51 @@
 <template>
   <div>
-    <div v-if="!isAuthenticated" class="bruh">
+    <div v-if="!isAuthenticated" class="login-container">
       <h1>Login</h1>
-      <div>
-        <form @submit.prevent="login">
-          <label for="username">Email</label>
-          <input v-model="username" name="username" placeholder="username" type="text" />
-          <label for="password">Password</label>
-          <input v-model="password" name="password" type="password" />
-          <button>Login</button>
-        </form>
-      
-        <button @click="redirectToSignUp()">Sign up</button>
-      </div>
+      <button class="button google" @click="redirectToGoogleSignIn">Sign in with Google</button>
     </div>
 
-    <div v-if="isAuthenticated">
-      <h1>You are currently logged in</h1>
-      <button @click="logout()">Logout</button>
+    <div v-if="isAuthenticated" class="logged-in-container">
+      <h1>Welcome, {{ user.email }}</h1>
+      <button @click="logout">Logout</button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex';
-import axios from 'axios';
+import { mapState } from 'vuex'; // Importing Vuex to access state
+import { baseURL } from '../axios'; // Importing the base URL from axios
 
 export default {
   name: 'LoginComponent',
   computed: {
-    ...mapState(['isAuthenticated', 'user']),
-  },
-  data() {
-    return {
-      username: '',
-      password: '',
-    };
+    ...mapState(['isAuthenticated', 'user']), // Accessing authentication state and user data from Vuex store
   },
   methods: {
-    async login() {
-      try {
-        await this.$store.dispatch('login', { username: this.username, password: this.password });
-        this.$router.push('/');
-      } catch (error) {
-        console.error('Login error:', error);
-      }
-    },
-    redirectToSignUp() {
-      this.$router.push('/signup');
+    redirectToGoogleSignIn() {
+      // Redirecting to the Google login URL using the imported base URL
+      window.location.href = `${baseURL}/login/google`; 
     },
     async logout() {
       try {
-        await this.$store.dispatch('logout');
-      } catch (error) {
-        console.error('Logout error:', error);
-      }
-    },
-    async testAPI() {
-      try {
-        const response = await axios.get('http://localhost:3000/api/test');
-        console.log(response.data);
+        await this.$store.dispatch('logout'); // Dispatching the logout action to Vuex
+        // Optionally, redirect to login page after logging out
+        this.$router.push('/login');
       } catch (error) {
-        console.error('Error calling test API:', error);
+        console.error('Logout error:', error); // Logging any errors that occur during logout
       }
     },
   },
-  created() {
+  mounted() {
+    // Check if the user is authenticated when the component is mounted
     this.$store.dispatch('checkAuth');
-    this.testAPI();
   },
 };
 </script>
 
-<style>
+<style scoped>
+.login-container, .logged-in-container {
+  text-align: center; 
+  margin-top: 20px;
+}
 </style>

src/main.js

@@ -2,6 +2,9 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import store from './store'; // Ensure the correct path
 import router from './router'; // Assuming you have a router
+import axios from 'axios';
+
+axios.defaults.withCredentials = true;
 
 const app = createApp(App);
 

src/router/accountRoutes.js

@@ -0,0 +1,16 @@
+// src/router/routes/accountRoutes.js
+import Login from '@/views/Login.vue';
+import SignUp from '@/views/SignUp.vue';
+
+export default [
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+  },
+  {
+    path: '/signup',
+    name: 'SignUp',
+    component: SignUp,
+  },
+];

src/router/authRoutes.js

@@ -0,0 +1,15 @@
+import Login from '../views/Login.vue';
+import SignUp from '../views/SignUp.vue';
+
+export default [
+  {
+    path: '/login',
+    name: 'Login',
+    component: Login,
+  },
+  {
+    path: '/signup',
+    name: 'SignUp',
+    component: SignUp,
+  },
+];

src/router/dashboardRoutes.js

@@ -0,0 +1,9 @@
+import DashboardWorld from '../views/Dashboard.vue';
+
+export default [
+  {
+    path: '/',
+    name: 'dashboard',
+    component: DashboardWorld,
+  },
+];

src/router/generalRoutes.js

@@ -0,0 +1,22 @@
+// src/router/routes/generalRoutes.js
+import AboutMe from '@/views/AboutMe.vue';
+import Learn from '@/views/Learn.vue';
+import Type from '@/views/Type.vue';
+
+export default [
+  {
+    path: '/about-me',
+    name: 'AboutMe',
+    component: AboutMe
+  },
+  {
+    path: '/learn',
+    name: 'Learn',
+    component: Learn
+  },
+  {
+    path: '/type',
+    name: 'Type',
+    component: Type
+  }
+];

src/router/index.js

@@ -1,59 +1,38 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import DashboardWorld from '../views/Dashboard.vue'
-import ListsWorld from '../views/Lists.vue'
-import SettingsWorld from '../views/Settings.vue'
-import AboutMe from '../views/AboutMe.vue'
-import Learn from '../views/Learn.vue'
-import Type from '../views/Type.vue'
-import Login from '../views/Login.vue'
-import SignUp from '../views/SignUp.vue'
+// src/router/index.js
+import { createRouter, createWebHistory } from 'vue-router';
+import store from '@/store'; // Vuex store for authentication state
 
+// Import route groups
+import dashboardRoutes from './dashboardRoutes';
+import accountRoutes from './accountRoutes';
+import generalRoutes from './generalRoutes';
+
+// Combine routes
 const routes = [
-  {
-    path: '/',
-    name: 'dashboard',
-    component: DashboardWorld
-  },
-  {
-    path: '/Lists',
-    name: 'Lists',
-    component: ListsWorld
-  },
-  {
-    path: '/Settings',
-    name: 'Settings',
-    component: SettingsWorld
-  },
-  {
-    path: '/About-me',
-    name: 'About Me',
-    component: AboutMe
-  },
-  {
-    path: '/Learn',
-    name: 'Learn',
-    component: Learn
-  },
-  {
-    path: '/Type',
-    name: 'Type',
-    component: Type
-  },
-  {
-    path: '/Login',
-    name: 'Login',
-    component: Login
-  },
-  {
-    path: '/SignUp',
-    name: 'SignUp',
-    component: SignUp
-  },
-]
+  ...dashboardRoutes,
+  ...accountRoutes,
+  ...generalRoutes
+];
 
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
-  routes
-})
+  routes,
+});
+
+// Navigation guard for protected routes
+router.beforeEach((to, from, next) => {
+  const isAuthenticated = store.state.isAuthenticated; // Get auth status from Vuex
+
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // Route requires auth and user is not authenticated
+    if (!isAuthenticated) {
+      next({ name: 'Login' }); // Redirect to login page
+    } else {
+      next(); // Proceed to route
+    }
+  } else {
+    next(); // Proceed to route
+  }
+});
 
-export default router
+export default router;

src/store.js

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex';
-import axios from 'axios';
+import axios from './axios'; // Make sure to import your axios instance
 
 const store = createStore({
   state: {
@@ -18,25 +18,26 @@ const store = createStore({
   },
   actions: {
     async checkAuth({ commit }) {
+      console.log("checking auth");
       try {
-        const response = await axios.get('http://localhost:3000/api/check-auth');
-        commit('SET_USER', response.data.user);
+        const response = await axios.get('/check-auth', { withCredentials: true });
+        commit('SET_USER', response.data.user); // Set user data from response
       } catch (error) {
-        commit('LOGOUT');
+        commit('LOGOUT'); // If error occurs, user is not authenticated
       }
     },
-    async login({ commit }, credentials) {//!1Abcdefgh
+    async login({ commit }, credentials) {
       try {
-        await axios.post('http://localhost:3000/api/login', credentials);
+        await axios.post('/login', credentials, { withCredentials: true });
         await this.dispatch('checkAuth'); // Re-check auth status after login
       } catch (error) {
         console.error('Login error:', error);
       }
     },
     async logout({ commit }) {
       try {
-        await axios.post('http://localhost:3000/api/logout');
-        commit('LOGOUT');
+        await axios.post('/logout', {}, { withCredentials: true });
+        commit('LOGOUT'); // Commit mutation to log the user out
       } catch (error) {
         console.error('Logout error:', error);
       }

src/views/Login.vue

@@ -1,38 +1,16 @@
 <template>
-  <div class="bruh">
     <LoginComponent />
-  </div>
-  <h1>Sign in</h1>
-  <a class="button google" href="/login/federated/google">Sign in with Google</a>
 </template>
 
 <script>
 import LoginComponent from '@/components/Login.vue';
-//Needs to also display the sign up with google
-
 
 export default {
   name: 'LoginWorld',
   components: {
     LoginComponent
   },
   methods: {
-    async login() {
-      try {
-        const response = await axios.post('http://localhost:3000/api/signup', {
-          email: this.email,
-          password: this.password
-        });
-        this.message = 'Signup successful! Please log in.';
-        // Optionally, you can redirect the user to the login page
-        setTimeout(() => {
-          this.$router.push('/login');
-        }, 2000); // Redirect after 2 seconds
-      } catch (error) {
-        console.log(error.response.data.errors);
-        this.message = 'Error signing up: ' + (error.response.data.errors || error.message);
-      }
-    },
   }
 }
 </script>

vue.config.js

@@ -12,6 +12,5 @@ module.exports = defineConfig({
   },
 });
 
-//For some reason this stuff doesn't work and I don't know why but its very goofy. All api calls need to be to the exact link