implement google auth

components/Avatar.vue

@@ -0,0 +1,8 @@
+<template>
+  <img :src="data.avatar" alt="Avatar" class="w-12 h-12 rounded-full" />
+</template>
+<script setup>
+const { data, pending, error } = await useFetch("/api/user", {
+  credentials: "include",
+});
+</script>

components/LoginView.vue

@@ -1,12 +1,55 @@
 <template>
-  <div class="container p-4">
-    <GoogleLogin :callback="callback" class="w-full" />
+  <div class="container p-4 pb-6">
+    <h1 class="text-2xl font-bold text-center text-black pb-4">
+      Login to your account
+    </h1>
+    <button
+      @click="doAuth('github')"
+      class="flex items-center justify-center w-full rounded-lg border hover:shadow"
+    >
+      <div class="py-2 flex gap-2 text-slate-700 transition duration-150">
+        <img
+          class="w-6 h-6"
+          src="/github-logo.svg"
+          loading="lazy"
+          alt="github logo"
+        />
+        <span>Login with Github</span>
+      </div>
+    </button>
+    <button
+      @click="doAuth('google')"
+      class="mt-4 flex items-center justify-center w-full rounded-lg border hover:shadow"
+    >
+      <div class="py-2 flex gap-2 text-slate-700 transition duration-150">
+        <img
+          class="w-6 h-6"
+          src="/google-logo.svg"
+          loading="lazy"
+          alt="google logo"
+        />
+        <span>Login with Google</span>
+      </div>
+    </button>
   </div>
 </template>
 
 <script setup lang="js">
+import {navigateTo} from 'nuxt/app';
 
-const callback = (response) => {
-  console.log("Handle the response", response)
+const doAuth = async (provider) => {
+  const request = {
+    provider: provider,
+  }
+
+  const response = await $fetch('/api/auth/start', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  });
+
+  navigateTo(response.url, { external: true });
 }
 </script>

layouts/auth.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col min-h-screen">
+    <header class="py-4 lg:py-6 border-b border-gray-300">
+      <div
+        class="container mx-auto flex justify-between items-center px-4 lg:px-8"
+      >
+        <a class="text-2xl lg:text-3xl font-bold" href="/home"> Nest2d </a>
+        <nav class="hidden lg:flex items-center space-x-6">
+          <a href="#features" class="text-lg hover:text-gray-500">Features</a>
+        </nav>
+        <Avatar
+          class="inline-block bg-black text-white rounded-lg text-lg shadow-md"
+        >
+        </Avatar>
+      </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 mt-4 mb-4 lg:mt-8 lg:mb-8">
+      <slot />
+    </main>
+
+    <footer class="bg-black text-white p-4">
+      <div
+        class="container mx-auto px-4 lg:px-8 flex flex-col lg:flex-row justify-between items-center"
+      >
+        <ul class="flex flex-col lg:flex-row">
+          <li class="mr-4 mb-2 lg:mb-0">
+            <a
+              href="https://github.com/VovaStelmashchuk/nest2d"
+              target="_blank"
+              class="hover:underline"
+              >GitHub</a
+            >
+          </li>
+          <li class="mr-4 mb-2 lg:mb-0">
+            <a href="/terms-and-conditions" class="hover:underline"
+              >Terms and Conditions</a
+            >
+          </li>
+        </ul>
+        <p class="text-sm text-gray-400 mt-4 lg:mt-0 text-center lg:text-end">
+          © 2025 Vova Stelmashchuk. All rights reserved. Built with ♥ and open
+          source principles.
+        </p>
+      </div>
+    </footer>
+  </div>
+</template>
+<script setup></script>

layouts/default.vue

@@ -4,7 +4,7 @@
       <div
         class="container mx-auto flex justify-between items-center px-4 lg:px-8"
       >
-        <h1 class="text-2xl lg:text-3xl font-bold">Nest2d</h1>
+        <a class="text-2xl lg:text-3xl font-bold" href="/"> Nest2d </a>
         <nav class="hidden lg:flex items-center space-x-6">
           <a href="#features" class="text-lg hover:text-gray-500">Features</a>
           <a href="#how-it-works" class="text-lg hover:text-gray-500"
@@ -97,21 +97,13 @@
         </p>
       </div>
     </footer>
-    <!-- Login Dialog -->
     <DialogWrapper v-model:isOpen="loginDialog">
       <LoginView />
     </DialogWrapper>
   </div>
 </template>
 
 <script setup lang="js">
-
-const callback = (response) => {
-  // This callback will be triggered when the user selects or login to
-  // his Google account from the popup
-  console.log("Handle the response", response)
-}
-
 const loginDialog = useLoginDialog();
 const menuOpen = ref(false);
 </script>