Test: Google oauth

.env.development

@@ -1 +1,2 @@
 VITE_API_URL=https://localhost:5001/
+VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com

.env.production

@@ -1 +1,2 @@
 VITE_API_URL=todo
+VITE_GOOGLE_CLIENT_ID=468391910875-78sfopq1t12ulrv4f5vj227j45guuj66.apps.googleusercontent.com

package-lock.json

@@ -14,6 +14,7 @@
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
         "vue-router": "^4.2.5",
+        "vue3-google-login": "^2.0.26",
         "vuetify": "^3.5.6"
       },
       "devDependencies": {
@@ -3479,6 +3480,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-google-login": {
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/vue3-google-login/-/vue3-google-login-2.0.26.tgz",
+      "integrity": "sha512-BuTSIeSjINNHNPs+BDF4COnjWvff27IfCBDxK6JPRqvm57lF8iK4B3+zcG8ud6BXfZdyuiDlxletbEDgg4/RFA==",
+      "peerDependencies": {
+        "vue": "^3.0.3"
+      }
+    },
     "node_modules/vuetify": {
       "version": "3.5.6",
       "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.6.tgz",

package.json

@@ -15,6 +15,7 @@
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
+    "vue3-google-login": "^2.0.26",
     "vuetify": "^3.5.6"
   },
   "devDependencies": {
@@ -26,4 +27,4 @@
     "tailwindcss": "^3.4.1",
     "vite": "^5.0.11"
   }
-}
+}

src/main.js

@@ -9,6 +9,7 @@ import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 import clientPlugin from './plugins/api.js'
+import vueGoogleOauth from 'vue3-google-login'
 
 const vuetify = createVuetify({
   components,
@@ -20,6 +21,9 @@ const app = createApp(App);
 // Create an axios client preconfigured to the Hutopy API.
 app.use(clientPlugin);
 
+app.use(vueGoogleOauth, {
+  clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
+})
 app.use(createPinia());
 app.use(vuetify);
 app.use(router);

src/stores/auth.js

@@ -4,47 +4,64 @@ const baseUrl = '/api/Users';
 
 export const auth = defineStore({
     id: 'auth',
+
     state: () => ({
-        user: null,
+        user: "",
-        refreshTokenTimeout: null
+        refreshTokenTimeout: 0
     }),
+
     actions: {
+        async googleLogin(client, idToken) {
+            const response = await client.post("https://people.googleapis.com/v1/people/me", {
+                headers: {
+                    "Authorization": "Bearer " + idToken
+                }
+            })
+            this.user = {
+                accessToken: response.data.accessToken,
+                refreshToken: response.data.refreshToken,
+                email: response.data.email
+            }
+            localStorage.setItem('jwt', this.user.accessToken);
+            this.startRefreshTokenTimer();
+        },
+
         async login(client, email, password) {
             const requestBody = {
                 email: email,
                 password: password
             };
-            try {
+            const response = await client.post(`${baseUrl}/login`, requestBody)
-                const response = await client.post(`${baseUrl}/login`, requestBody)
+            this.user = {
-                this.user = {
+                accessToken: response.data.accessToken,
-                    accessToken: response.data.accessToken,
+                refreshToken: response.data.refreshToken,
-                    refreshToken: response.data.refreshToken,
+                email: email
-                    email: email
-                }
-                localStorage.setItem('jwt', this.user.accessToken);
-                this.startRefreshTokenTimer();
-            } catch (error) {
-                throw new Error('Login failed.')
             }
-        },
-        logout() {
-            localStorage.setItem('jwt', '');
-            this.stopRefreshTokenTimer();
-            this.user = null;
-
-        },
-        async refreshToken(client) {
-            const response = await client.post(`${baseUrl}/refresh`, {});
-            this.user.accessToken = response.accessToken;
             localStorage.setItem('jwt', this.user.accessToken);
 
-
             this.startRefreshTokenTimer();
         },
+
+        logout() {
+            localStorage.setItem('jwt', '');
+            this.user = null;
+
+            this.stopRefreshTokenTimer();
+        },
+
+        async refreshToken(client) {
+            const response = await client.post(`${baseUrl}/refresh`);
+            this.user.accessToken = response.accessToken;
+            localStorage.setItem('jwt', this.user.accessToken);
+
+            this.startRefreshTokenTimer();
+        },
+
         startRefreshTokenTimer() {
             const timeout = 50 * 1000;
             this.refreshTokenTimeout = setTimeout(this.refreshToken, timeout);
         },
+
         stopRefreshTokenTimer() {
             clearTimeout(this.refreshTokenTimeout);
         }

src/views/LoginView.vue

@@ -1,5 +1,9 @@
 <template>
     <v-app style="background-color: #f4f4f4;">
+      <!-- Google Oauth -->
+      <GoogleLogin :callback="googleCallback" popup-type="TOKEN">
+        <button>Login Using Google</button>
+      </GoogleLogin>
         <div class="sm:flex hidden items-center justify-between flex-col"
             style="background-color: #f4f4f4; margin-top: 3%;">
 
@@ -101,6 +105,7 @@ import {auth} from '@/stores/auth.js';
 import {ref} from 'vue';
 import {useRouter} from 'vue-router';
 import {useClient} from "@/plugins/api.js";
+import {decodeCredential} from 'vue3-google-login'
 
 const api = useClient()
 
@@ -119,6 +124,10 @@ async function login() {
     }
 }
 
+const googleCallback = (response) => {
+  console.log(response)
+  //store.loginWithGoogle(api, credential)
+}
 </script>
 
 <style scoped>

src/views/main/CreatorFolio.vue

@@ -1218,4 +1218,4 @@ let items = [
 
 
 }
-</style>
+</style>

src/views/main/HomeView.vue

@@ -8,7 +8,6 @@
       <v-container class="d-flex justify-center align-center">
         <div style="margin-left: 20%;">
           <v-row>
-
             <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
             <RouterLink :to="{ name: 'login' }">
               <v-btn size="large"