Google Login

Client/src/components/LoginBadge.vue

@@ -1,21 +1,32 @@
 <script setup lang="ts">
-import { useLogin } from '@/models/users'
+import { refSession, useLogin } from '@/models/users'
 
-const logins = useLogin
+const logins = useLogin()
 function googleLogin() {
   logins.googleLogin()
 }
+
+const session = refSession()
 </script>
 
 <template>
   <a class="button is-primary">
     <strong>Sign up</strong>
   </a>
-  <a class="button is-light" @click.prevent="googleLogin">
+  <a class="button is-light" @click.prevent="googleLogin" v-if="!session.user">
     <i class="icon">
-      <img src="https://fontawesome.com/icons/google?f=brands&s=solid" alt="" />
+      <img
+        src="https://cdn-icons-png.flaticon.com/512/281/281764.png"
+        alt="Google Logo"
+        width="20"
+      />
     </i>
+    Google Login
   </a>
+  <div v-if="session.user">
+    {{ session.user.firstName }}
+    {{ session.user.lastName }}
+  </div>
 </template>
 
 <style scoped></style>

Client/src/components/NavBar.vue

@@ -50,6 +50,7 @@ const isCartOpen = ref(false)
 
         <div class="navbar-end">
           <div class="navbar-item">
+            <div class="buttons">       
             <LoginBadge />
             <button
               class="button is-warning is-light is-active"

Client/src/models/users.ts

@@ -1,5 +1,5 @@
-import { errorMessages } from "vue/compiler-sfc"
-import { loadScript } from "./myFetch"
+import { ref } from 'vue'
+import { loadScript } from './myFetch'
 
 export class User {
   id?: number
@@ -37,27 +37,24 @@ const session = ref({
 
 export const refSession = () => session
 
-export const useLogin => ({
-  async login(email: string, password: string) {
-  },
+export const useLogin = () => ({
+  async login(email: string, password: string) {},
   async logout() {
     session.value.user = null
   },
   async googleLogin() {
-    await loadScript('https://apis.google.com/js/api.js')
     await loadScript('https://accounts.google.com/gsi/client')
 
     const tokenClient = google.accounts.oauth2.initTokenClient({
       client_id: 'import.meta.env.VITE_GOOGLE_CLIENT_ID',
       scope: 'email',
-      callback: (response, any) => {
-        if(response.credential) {
-          session.value.token = response.credential
-          firstName = response.given_name,
-          lastName = response.family_name,
-          email = response.email
+      callback: (response: any) => {
+        console.log('response', response)
+        if (response.access_token) {
+          session.value.token = response.access_token
+        }
+        tokenClient.requestAccessToken({})
       }
     })
   }
-
-})
+})