feat - migrated auth module from sidebase-nuxt-auth to nuxt-auth-utils

.gitignore

@@ -22,6 +22,8 @@ logs
 .env.*
 !.env.example
 
+# VS Code
+.vscode/
 
 nuxt.d.ts
 .history

components/Home/Hero.vue

@@ -1,34 +1,34 @@
 <template>
-  <section class="py-16 md:py-32 px-6 lg:px-0 max-w-4xl mx-auto">
+  <section class="px-6 py-16 mx-auto max-w-4xl md:py-32 lg:px-0">
     <div class="space-y-5 max-w-2xl">
       <HomeWhatsNewPill text="v.0.1.23 We're now open source" />
-      <h1 class="font-display text-2xl md:text-4xl font-bold">
+      <h1 class="text-2xl font-bold font-display md:text-4xl">
         Streamlined feedback, public roadmaps, and changelogs.
       </h1>
       <p
-        class="text-base md:text-lg font-medium text-gray-600 dark:text-gray-400"
+        class="text-base font-medium text-gray-600 md:text-lg dark:text-gray-400"
       >
         Feedbackjar empowers product teams to effortlessly gather feedback,
         track issues, and seamlessly manage them with public roadmaps and
         provide updates via changelogs.
       </p>
       <div class="!mt-10">
         <UButton
-          :to="loggedIn ? '/dashboard' : '/api/auth/github'"
+          :to="loggedIn ? '/dashboard' : '/login'"
+          :ui="{ rounded: 'rounded-lg' }"
           size="xl"
           color="black"
-          :ui="{ rounded: 'rounded-lg' }"
           variant="solid"
           class="transition-transform active:scale-[0.98]"
           external
         >
-          {{ loggedIn ? "Go to dashboard &rarr;" : "Sign up with Github &rarr;" }}
+          {{ loggedIn ? "Go to dashboard &rarr;" : "Get Started &rarr;" }}
         </UButton>
       </div>
     </div>
   </section>
   <section
-    class="rounded-none md:rounded-xl max-w-4xl mx-auto overflow-hidden ring-8 ring-gray-200 dark:ring-white/10"
+    class="overflow-hidden mx-auto max-w-4xl rounded-none ring-8 ring-gray-200 md:rounded-xl dark:ring-white/10"
   >
     <img src="/feedbackjar-dashboard.png" alt="Feedbackjar dashboard" />
   </section>

components/Home/Navbar.vue

@@ -1,13 +1,13 @@
 <template>
   <nav
-    class="h-16 max-w-4xl mx-auto flex items-center justify-between px-6 lg:px-0"
+    class="flex justify-between items-center px-6 mx-auto max-w-4xl h-16 lg:px-0"
   >
-    <div class="flex items-center gap-x-2">
-      <Logo class="h-8 w-auto" />
+    <div class="flex gap-x-2 items-center">
+      <Logo class="w-auto h-8" />
       <span class="text-lg font-bold font-display">Feedbackjar</span>
     </div>
     <div>
-      <div class="items-center gap-x-4 hidden md:flex">
+      <div class="hidden gap-x-4 items-center md:flex">
         <UButton
           variant="ghost"
           color="gray"
@@ -40,7 +40,7 @@
           variant="ghost"
           color="gray"
           class="transition-transform active:scale-[0.98]"
-          :to="loggedIn ? '/dashboard' : '/api/auth/github'"
+          :to="loggedIn ? '/dashboard' : '/login'"
           external
           >{{ loggedIn ? "Dashboard &rarr;" : "Login &rarr;" }}</UButton
         >

components/Login/Github.vue

@@ -0,0 +1,13 @@
+<template>
+  <UButton
+    v-if="!loggedIn"
+    to="/api/auth/github"
+    icon="i-simple-icons-github"
+    label="Login with Github"
+    color="black"
+    external
+  />
+</template>
+<script setup>
+const { loggedIn } = useUserSession();
+</script>

components/Login/Google.vue

@@ -0,0 +1,13 @@
+<template>
+  <UButton
+    v-if="!loggedIn"
+    to="/api/auth/google"
+    icon="i-simple-icons-google"
+    label="Login with Google"
+    color="black"
+    external
+  />
+</template>
+<script setup>
+const { loggedIn } = useUserSession();
+</script>

env.example

@@ -0,0 +1,9 @@
+NUXT_SESSION_PASSWORD=                                                                                                                                                                         23:11:06
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+NODE_ENV=
+NUXT_OAUTH_GOOGLE_CLIENT_ID=
+NUXT_OAUTH_GOOGLE_CLIENT_SECRET=
+
+TURSO_DB_URL=
+TURSO_DB_TOKEN=

lib/helper.ts

@@ -0,0 +1,10 @@
+export const loadScript = function (url: string) {
+  return new Promise(function (resolve, reject) {
+    const script = document.createElement("script");
+    script.src = url;
+    script.addEventListener("load", function () {
+      resolve(true);
+    });
+    document.head.appendChild(script);
+  });
+};

lib/types/google.ts

@@ -0,0 +1,20 @@
+export interface Config {
+  [x: string]: any;
+  google: {
+    clientId: string;
+  };
+}
+
+export interface GithubUser {
+  id: number;
+  login?: string;
+  name?: string;
+  email?: string;
+  avatarUrl?: string;
+  githubUrl?: string;
+  twitterUsername?: string;
+  bio?: string;
+  blog?: string;
+  company?: string;
+  location?: string;
+}

nuxt.config.ts

@@ -4,22 +4,33 @@ const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxthq/ui", "@vueuse/nuxt", "@nuxtjs/fontaine", "nuxt-icon"],
+  modules: [
+    "@nuxt/ui",
+    "@vueuse/nuxt",
+    "@nuxtjs/fontaine",
+    "nuxt-icon",
+    "nuxt-auth-utils",
+  ],
   ui: {
-    icons: ["heroicons", "mdi"],
+    icons: ["heroicons", "mdi", "simple-icons"],
   },
   css: ["~/assets/css/font.css"],
   runtimeConfig: {
     dbDir: resolve("./server/db"),
-    github: {
-      clientId: process.env.GITHUB_CLIENT_ID,
-      clientSecret: process.env.GITHUB_CLIENT_SECRET
-    },
     session: {
       name: "nuxt-session",
       password: "",
     },
+    oauth: {
+      github: {
+        clientId: process.env.GITHUB_CLIENT_ID,
+        clientSecret: process.env.GITHUB_CLIENT_SECRET,
+      },
+      google: {
+        clientId: process.env.NUXT_OAUTH_GOOGLE_CLIENT_ID ?? "",
+        clientSecret: process.env.NUXT_OAUTH_GOOGLE_CLIENT_SECRET ?? "",
+      },
+    },
   },
-
   plugins: ["~/plugins/session.server.ts"],
 });

package.json

@@ -11,20 +11,22 @@
     "db:deploy": "drizzle-kit push:sqlite"
   },
   "devDependencies": {
+    "@iconify-json/simple-icons": "^1.1.77",
     "@nuxt/devtools": "0.7.4",
-    "@nuxthq/ui": "2.7.0",
     "@nuxtjs/fontaine": "0.4.1",
     "@types/node": "20.4.5",
     "@vueuse/core": "10.3.0",
     "@vueuse/nuxt": "10.3.0",
     "dotenv": "^16.3.1",
     "nuxt": "3.6.5",
+    "nuxt-auth-utils": "^0.0.5",
     "nuxt-icon": "^0.4.2",
     "typescript": "5.1.6"
   },
   "dependencies": {
     "@iconify-json/mdi": "^1.1.52",
     "@libsql/client": "0.3.1",
+    "@nuxt/ui": "^2.10.0",
     "better-sqlite3": "8.5.0",
     "bufferutil": "^4.0.7",
     "drizzle-kit": "0.19.12",

pages/dashboard/index.vue

@@ -26,11 +26,11 @@
     </div>
 
     <div
-      class="sticky h-14 top-0 z-40 md:pl-60 flex items-center justify-between gap-x-4 bg-white dark:bg-gray-950 dark:border-b border-gray-900 px-4 py-4 shadow-sm sm:px-6"
+      class="flex sticky top-0 z-40 gap-x-4 justify-between items-center px-4 py-4 h-14 bg-white border-gray-900 shadow-sm md:pl-60 dark:bg-gray-950 dark:border-b sm:px-6"
     >
-      <div class="flex items-center gap-x-2 md:hidden">
-        <Logo class="h-6 w-auto" />
-        <p class="font-medium text-lg">Feedbackjar</p>
+      <div class="flex gap-x-2 items-center md:hidden">
+        <Logo class="w-auto h-6" />
+        <p class="text-lg font-medium">Feedbackjar</p>
       </div>
       <div class="flex-grow"></div>
       <UButton
@@ -52,7 +52,7 @@
     </div>
 
     <div class="lg:pl-60">
-      <NuxtPage v-if="user.onboarded" />
+      <NuxtPage v-if="user?.onboarded" />
       <DashboardOnboard v-else />
     </div>
     <UNotifications />

pages/index.vue

@@ -15,7 +15,7 @@ const { loggedIn } = useUserSession();
 //   pick: ["stargazers_count"],
 // });
 const data = {
-  stargazers_count: 84
+  stargazers_count: 107
 }
 </script>
 

pages/login.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex h-screen flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+  <div class="flex flex-col flex-1 justify-center px-6 py-12 h-screen lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
-      <div class="flex items-center justify-center">
+      <div class="flex justify-center items-center">
         <img height="32" width="32" src="/logo.png" alt="Feedbackjar Logo" />
       </div>
-      <h2 class="mt-2 text-center text-2xl font-bold leading-9 tracking-tight">
+      <h2 class="mt-2 text-2xl font-bold tracking-tight leading-9 text-center">
         Sign in to your account
       </h2>
       <p class="text-center text-gray-500">
@@ -13,30 +13,11 @@
     </div>
 
     <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-      <UButton
-        to="/api/auth/github"
-        color="gray"
-        variant="solid"
-        block
-        size="lg"
-        external
-      >
-        <template #leading>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="h-6 w-6"
-          >
-            <path
-              fill="currentColor"
-              d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
-            />
-          </svg>
-        </template>
-        Continue with Github
-      </UButton>
-
-      <p class="mt-10 text-center text-sm">
+      <div class="grid grid-cols-1 gap-4">
+        <LoginGithub/>
+        <LoginGoogle/>
+      </div>
+      <p class="mt-10 text-sm text-center">
         <UButton to="/" variant="soft" icon="i-heroicons-chevron-left-20-solid">
           Back
         </UButton>