Merge pull request #3252 from nocodb/feat/google-auth

feat(gui-v2): add google auth signup option

packages/nc-gui-v2/assets/style.scss

@@ -146,7 +146,7 @@ a {
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  @apply transition-opacity duration-400 ease-in-out;
+  @apply transition-all duration-200 ease;
 }
 
 .page-enter-from,
@@ -162,7 +162,6 @@ a {
 }
 
 .slide-enter-from,
-
 .slide-leave-to {
   transform: translate(-100%, 0);
 }

packages/nc-gui-v2/components/general/SocialCard.vue

@@ -7,7 +7,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 </script>
 
 <template>
-  <a-card :body-style="{ padding: '0' }" class="w-[300px] shadow-sm rounded-lg">
+  <a-card :body-style="{ padding: '0px' }" class="w-[300px] shadow-sm !rounded-lg">
     <a-list class="w-full" dense>
       <a-list-item>
         <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">

packages/nc-gui-v2/components/general/Sponsors.vue

@@ -7,9 +7,9 @@ const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <a-card class="w-[300px] shadow-sm rounded-lg">
+  <a-card class="w-[300px] shadow-sm !rounded-lg">
     <template #cover>
-      <img class="max-h-[180px] rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
+      <img class="max-h-[180px] !rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
     </template>
 
     <a-card-meta>

packages/nc-gui-v2/composables/useTheme/index.ts

@@ -43,7 +43,7 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
     theme: currentTheme,
     setTheme,
   }
-})
+}, 'theme')
 
 export const provideTheme = setup
 

packages/nc-gui-v2/layouts/base.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { navigateTo } from '#app'
+import { computed, navigateTo, ref, useGlobal, useNuxtApp, useProject, useRoute } from '#imports'
-import { computed, useGlobal, useRoute } from '#imports'
 
 const { signOut, signedIn, isLoading, user } = useGlobal()
 
@@ -10,26 +9,38 @@ const route = useRoute()
 
 const email = computed(() => user.value?.email ?? '---')
 
+const hasSider = ref(false)
+
+const sidebar = ref<HTMLDivElement>()
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
 }
+
+const { hooks } = useNuxtApp()
+
+/** when page suspensions have finished, check if a sidebar element was teleported into the layout */
+hooks.hook('page:finish', () => {
+  if (sidebar.value) {
+    hasSider.value = sidebar.value?.children.length > 0
+  }
+})
 </script>
 
 <template>
   <a-layout id="nc-app" has-sider>
-    <div id="nc-sidebar-left" />
+    <Transition name="slide">
+      <div v-show="hasSider" id="nc-sidebar-left" ref="sidebar" />
+    </Transition>
 
     <a-layout class="!flex-col">
-      <Transition name="layout">
       <a-layout-header
         v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
         class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
       >
         <div
-            v-if="
+          v-if="route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'"
-              route.name === 'index' || route.name === 'project-index-create' || route.name === 'project-index-create-external'
-            "
           class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
           @click="navigateTo('/')"
         >
@@ -88,7 +99,6 @@ const logout = () => {
           </a-dropdown>
         </template>
       </a-layout-header>
-      </Transition>
 
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>

packages/nc-gui-v2/layouts/default.vue

@@ -13,15 +13,15 @@ useHead({
 
 <script lang="ts">
 export default {
-  name: 'Default',
+  name: 'DefaultLayout',
 }
 </script>
 
 <template>
   <div class="w-full h-full">
-    <teleport v-if="$slots.sidebar" to="#nc-sidebar-left">
+    <Teleport to="#nc-sidebar-left">
       <slot name="sidebar" />
-    </teleport>
+    </Teleport>
 
     <a-layout-content>
       <slot />

packages/nc-gui-v2/middleware/auth.global.ts

@@ -1,5 +1,6 @@
+import { message } from 'ant-design-vue'
 import { defineNuxtRouteMiddleware, navigateTo } from '#app'
-import { useGlobal } from '#imports'
+import { useApi, useGlobal } from '#imports'
 
 /**
  * Global auth middleware
@@ -10,7 +11,19 @@ import { useGlobal } from '#imports'
  * the user is redirected to the home page.
  *
  * By default, we assume that auth is required
- * If not required, mark the page as `requiresAuth: false` using `definePageMeta`
+ * If not required, mark the page as
+ * ```
+ * definePageMeta({
+ *   requiresAuth: false
+ * })
+ * ```
+ *
+ * If auth should be circumvented completely mark the page as public
+ * ```
+ * definePageMeta({
+ *   public: true
+ * })
+ * ```
  *
  * @example
  * ```
@@ -20,17 +33,18 @@ import { useGlobal } from '#imports'
  *  })
  * ```
  */
-export default defineNuxtRouteMiddleware((to, from) => {
+export default defineNuxtRouteMiddleware(async (to, from) => {
   const state = useGlobal()
 
-  /** if public allow */
+  /** if user isn't signed in and google auth is enabled, try to check if sign-in data is present */
+  if (!state.signedIn && state.appInfo.value.googleAuthEnabled) await tryGoogleAuth()
+
+  /** if public allow all visitors */
   if (to.meta.public) return
 
-  /** if shred base allow without validating */
+  /** if shared base allow without validating */
   if (to.params?.projectType === 'base') return
 
-  if (to.meta.public) return
-
   /** if auth is required or unspecified (same as required) and user is not signed in, redirect to signin page */
   if ((to.meta.requiresAuth || typeof to.meta.requiresAuth === 'undefined') && !state.signedIn.value) {
     return navigateTo('/signin')
@@ -48,3 +62,31 @@ export default defineNuxtRouteMiddleware((to, from) => {
     }
   }
 })
+
+/**
+ * If present, try using google auth data to sign user in before navigating to the next page
+ */
+async function tryGoogleAuth() {
+  const { signIn } = useGlobal()
+
+  const { api } = useApi()
+
+  if (window.location.search && /\bscope=|\bstate=/.test(window.location.search) && /\bcode=/.test(window.location.search)) {
+    try {
+      const {
+        data: { token },
+      } = await api.instance.post(
+        `/auth/${window.location.search.includes('state=github') ? 'github' : 'google'}/genTokenByCode${window.location.search}`,
+      )
+
+      signIn(token)
+    } catch (e: any) {
+      if (e.response && e.response.data && e.response.data.msg) {
+        message.error({ content: e.response.data.msg })
+      }
+    }
+
+    const newURL = window.location.href.split('?')[0]
+    window.history.pushState('object', document.title, newURL)
+  }
+}

packages/nc-gui-v2/nuxt.config.ts

@@ -98,4 +98,13 @@ export default defineNuxtConfig({
     dirs: ['./context', './utils', './lib'],
     imports: [{ name: 'useI18n', from: 'vue-i18n' }],
   },
+
+  pageTransition: {
+    name: 'page',
+    mode: 'out-in',
+  },
+  layoutTransition: {
+    name: 'layout',
+    mode: 'out-in',
+  },
 })

packages/nc-gui-v2/package-lock.json

@@ -36,6 +36,7 @@
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
+        "@iconify-json/logos": "^1.1.14",
         "@iconify-json/lucide": "^1.1.36",
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
@@ -1041,6 +1042,15 @@
         "@iconify/types": "*"
       }
     },
+    "node_modules/@iconify-json/logos": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.14.tgz",
+      "integrity": "sha512-SvSxKubQbP/7Wdb3loShUeRGv82ejkNo5gjzvJzQeauntuU4aZjDrx0mnkhFZgNYd3li/mxvzPn79Xc5SGVliw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/lucide": {
       "version": "1.1.38",
       "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz",
@@ -15853,6 +15863,15 @@
         "@iconify/types": "*"
       }
     },
+    "@iconify-json/logos": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@iconify-json/logos/-/logos-1.1.14.tgz",
+      "integrity": "sha512-SvSxKubQbP/7Wdb3loShUeRGv82ejkNo5gjzvJzQeauntuU4aZjDrx0mnkhFZgNYd3li/mxvzPn79Xc5SGVliw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/lucide": {
       "version": "1.1.38",
       "resolved": "https://registry.npmjs.org/@iconify-json/lucide/-/lucide-1.1.38.tgz",

packages/nc-gui-v2/package.json

@@ -42,6 +42,7 @@
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",
+    "@iconify-json/logos": "^1.1.14",
     "@iconify-json/lucide": "^1.1.36",
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",

packages/nc-gui-v2/pages/index/index.vue

@@ -112,14 +112,14 @@ onMounted(() => {
               </button>
 
               <template #overlay>
-                <a-menu>
+                <a-menu class="!py-0 rounded">
                   <a-menu-item>
                     <div
                       v-t="['c:project:create:xcdb']"
-                      class="nc-project-menu-item gap-4"
+                      class="nc-project-menu-item group"
                       @click="navigateTo('/project/create')"
                     >
-                      <MdiPlusOutline class="text-lg" />
+                      <MdiPlusOutline class="group-hover:text-accent" />
 
                       <div>{{ $t('activity.createProject') }}</div>
                     </div>
@@ -128,10 +128,10 @@ onMounted(() => {
                   <a-menu-item>
                     <div
                       v-t="['c:project:create:extdb']"
-                      class="nc-project-menu-item gap-4"
+                      class="nc-project-menu-item group"
                       @click="navigateTo('/project/create-external')"
                     >
-                      <MdiDatabaseOutline class="text-lg" />
+                      <MdiDatabaseOutline class="group-hover:text-accent" />
 
                       <div v-html="$t('activity.createProjectExtended.extDB')" />
                     </div>
@@ -165,7 +165,7 @@ onMounted(() => {
               <a-table-column key="title" :title="$t('general.title')" data-index="title">
                 <template #default="{ text }">
                   <div
-                    class="capitalize color-transition group-hover:text-accent !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
+                    class="capitalize color-transition group-hover:text-primary !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap"
                   >
                     {{ text }}
                   </div>
@@ -204,7 +204,7 @@ onMounted(() => {
 
 <style scoped>
 .nc-action-btn {
-  @apply text-gray-500 hover:(text-accent ring) active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
+  @apply text-gray-500 group-hover:text-accent active:(ring ring-accent) cursor-pointer p-2 w-[30px] h-[30px] hover:bg-gray-300/50 rounded-full;
 }
 
 .nc-new-project-menu {

packages/nc-gui-v2/pages/signup/[[token]].vue

@@ -152,6 +152,18 @@ function resetError() {
               </span>
             </button>
 
+            <a
+              v-if="appInfo.googleAuthEnabled"
+              :href="`${api.instance.defaults.baseURL}/auth/google`"
+              class="submit after:(!bg-white) !text-primary border-1 border-primary !no-underline"
+            >
+              <span class="flex items-center gap-2">
+                <LogosGoogleGmail />
+
+                Sign up with Google
+              </span>
+            </a>
+
             <div class="flex items-center gap-2">
               <a-switch
                 v-model:checked="subscribe"