Adding basic DevTools integration

client/.nuxtrc

@@ -0,0 +1 @@
+imports.autoImport=true

client/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

client/components/branding/Icon.vue

@@ -0,0 +1,4 @@
+<template>
+  <svg class="hidden dark:block" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" preserveAspectRatio="xMidYMid meet" version="1.0" viewBox="74.65 82.5 226.02 209.72"><defs><clipPath id="id1"><path d="M 123 82.507812 L 301 82.507812 L 301 235.597656 L 123 235.597656 Z M 123 82.507812 " clip-rule="nonzero"/></clipPath><clipPath id="id2"><path d="M 74.261719 110.808594 L 252.546875 110.808594 L 252.546875 263.898438 L 74.261719 263.898438 Z M 74.261719 110.808594 " clip-rule="nonzero"/></clipPath><clipPath id="id3"><path d="M 123 139.109375 L 301 139.109375 L 301 292.199219 L 123 292.199219 Z M 123 139.109375 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#id1)"><path fill="#ffffff" d="M 293.339844 235.597656 L 130.460938 235.597656 C 127.835938 235.597656 125.457031 234.253906 124.144531 231.957031 C 122.832031 229.691406 122.832031 226.972656 124.144531 224.707031 L 203.917969 87.101562 C 205.585938 84.238281 208.566406 82.507812 211.902344 82.507812 C 215.238281 82.507812 218.21875 84.203125 219.886719 87.101562 L 299.65625 224.742188 C 300.96875 227.007812 300.96875 229.726562 299.65625 231.992188 C 298.308594 234.253906 295.96875 235.597656 293.339844 235.597656 Z M 128.511719 227.21875 C 127.90625 228.242188 128.296875 229.128906 128.511719 229.480469 C 128.722656 229.835938 129.289062 230.613281 130.460938 230.613281 L 293.304688 230.613281 C 294.476562 230.613281 295.078125 229.835938 295.257812 229.480469 C 295.46875 229.128906 295.859375 228.242188 295.257812 227.21875 L 215.519531 89.578125 C 214.777344 88.269531 213.425781 87.492188 211.902344 87.492188 C 210.375 87.492188 209.027344 88.269531 208.28125 89.578125 Z M 128.511719 227.21875 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#id2)"><path fill="#585e63" d="M 244.84375 263.898438 L 81.964844 263.898438 C 79.339844 263.898438 76.960938 262.554688 75.648438 260.257812 C 74.335938 257.996094 74.335938 255.273438 75.648438 253.007812 L 155.417969 115.402344 C 157.085938 112.539062 160.070312 110.808594 163.402344 110.808594 C 166.738281 110.808594 169.71875 112.503906 171.386719 115.402344 L 251.160156 253.042969 C 252.472656 255.308594 252.472656 258.03125 251.160156 260.292969 C 249.8125 262.554688 247.46875 263.898438 244.84375 263.898438 Z M 80.011719 255.519531 C 79.410156 256.546875 79.800781 257.429688 80.011719 257.78125 C 80.226562 258.136719 80.792969 258.914062 81.964844 258.914062 L 244.808594 258.914062 C 245.980469 258.914062 246.582031 258.136719 246.761719 257.78125 C 246.972656 257.429688 247.363281 256.546875 246.761719 255.519531 L 167.023438 117.878906 C 166.277344 116.570312 164.929688 115.792969 163.402344 115.792969 C 161.878906 115.792969 160.53125 116.570312 159.785156 117.878906 Z M 80.011719 255.519531 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#id3)"><path fill="#5bf3c7" d="M 293.339844 292.199219 L 130.460938 292.199219 C 127.835938 292.199219 125.457031 290.855469 124.144531 288.558594 C 122.832031 286.296875 122.832031 283.574219 124.144531 281.3125 L 203.917969 143.707031 C 205.585938 140.839844 208.566406 139.109375 211.902344 139.109375 C 215.238281 139.109375 218.21875 140.804688 219.886719 143.707031 L 299.65625 281.347656 C 300.96875 283.609375 300.96875 286.332031 299.65625 288.59375 C 298.308594 290.855469 295.96875 292.199219 293.339844 292.199219 Z M 128.511719 283.820312 C 127.90625 284.847656 128.296875 285.730469 128.511719 286.085938 C 128.722656 286.4375 129.289062 287.214844 130.460938 287.214844 L 293.304688 287.214844 C 294.476562 287.214844 295.078125 286.4375 295.257812 286.085938 C 295.46875 285.730469 295.859375 284.847656 295.257812 283.820312 L 215.519531 146.179688 C 214.777344 144.871094 213.425781 144.09375 211.902344 144.09375 C 210.375 144.09375 209.027344 144.871094 208.28125 146.179688 Z M 128.511719 283.820312 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
+  <svg class="dark:hidden" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" viewBox="74.65 82.5 226.02 209.72" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 123 82.507812 L 301 82.507812 L 301 235.597656 L 123 235.597656 Z M 123 82.507812 " clip-rule="nonzero"/></clipPath><clipPath id="id2"><path d="M 74.261719 110.808594 L 252.546875 110.808594 L 252.546875 263.898438 L 74.261719 263.898438 Z M 74.261719 110.808594 " clip-rule="nonzero"/></clipPath><clipPath id="id3"><path d="M 123 139.109375 L 301 139.109375 L 301 292.199219 L 123 292.199219 Z M 123 139.109375 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#id1)"><path fill="#111f25" d="M 293.339844 235.597656 L 130.460938 235.597656 C 127.835938 235.597656 125.457031 234.253906 124.144531 231.957031 C 122.832031 229.691406 122.832031 226.972656 124.144531 224.707031 L 203.917969 87.101562 C 205.585938 84.238281 208.566406 82.507812 211.902344 82.507812 C 215.238281 82.507812 218.21875 84.203125 219.886719 87.101562 L 299.65625 224.742188 C 300.96875 227.007812 300.96875 229.726562 299.65625 231.992188 C 298.308594 234.253906 295.96875 235.597656 293.339844 235.597656 Z M 128.511719 227.21875 C 127.90625 228.242188 128.296875 229.128906 128.511719 229.480469 C 128.722656 229.835938 129.289062 230.613281 130.460938 230.613281 L 293.304688 230.613281 C 294.476562 230.613281 295.078125 229.835938 295.257812 229.480469 C 295.46875 229.128906 295.859375 228.242188 295.257812 227.21875 L 215.519531 89.578125 C 214.777344 88.269531 213.425781 87.492188 211.902344 87.492188 C 210.375 87.492188 209.027344 88.269531 208.28125 89.578125 Z M 128.511719 227.21875 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#id2)"><path fill="#585e63" d="M 244.84375 263.898438 L 81.964844 263.898438 C 79.339844 263.898438 76.960938 262.554688 75.648438 260.257812 C 74.335938 257.996094 74.335938 255.273438 75.648438 253.007812 L 155.417969 115.402344 C 157.085938 112.539062 160.070312 110.808594 163.402344 110.808594 C 166.738281 110.808594 169.71875 112.503906 171.386719 115.402344 L 251.160156 253.042969 C 252.472656 255.308594 252.472656 258.03125 251.160156 260.292969 C 249.8125 262.554688 247.46875 263.898438 244.84375 263.898438 Z M 80.011719 255.519531 C 79.410156 256.546875 79.800781 257.429688 80.011719 257.78125 C 80.226562 258.136719 80.792969 258.914062 81.964844 258.914062 L 244.808594 258.914062 C 245.980469 258.914062 246.582031 258.136719 246.761719 257.78125 C 246.972656 257.429688 247.363281 256.546875 246.761719 255.519531 L 167.023438 117.878906 C 166.277344 116.570312 164.929688 115.792969 163.402344 115.792969 C 161.878906 115.792969 160.53125 116.570312 159.785156 117.878906 Z M 80.011719 255.519531 " fill-opacity="1" fill-rule="nonzero"/></g><g clip-path="url(#id3)"><path fill="#5bf3c7" d="M 293.339844 292.199219 L 130.460938 292.199219 C 127.835938 292.199219 125.457031 290.855469 124.144531 288.558594 C 122.832031 286.296875 122.832031 283.574219 124.144531 281.3125 L 203.917969 143.707031 C 205.585938 140.839844 208.566406 139.109375 211.902344 139.109375 C 215.238281 139.109375 218.21875 140.804688 219.886719 143.707031 L 299.65625 281.347656 C 300.96875 283.609375 300.96875 286.332031 299.65625 288.59375 C 298.308594 290.855469 295.96875 292.199219 293.339844 292.199219 Z M 128.511719 283.820312 C 127.90625 284.847656 128.296875 285.730469 128.511719 286.085938 C 128.722656 286.4375 129.289062 287.214844 130.460938 287.214844 L 293.304688 287.214844 C 294.476562 287.214844 295.078125 286.4375 295.257812 286.085938 C 295.46875 285.730469 295.859375 284.847656 295.257812 283.820312 L 215.519531 146.179688 C 214.777344 144.871094 213.425781 144.09375 211.902344 144.09375 C 210.375 144.09375 209.027344 144.871094 208.28125 146.179688 Z M 128.511719 283.820312 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
+</template>

client/components/branding/Logo.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex items-center">
+    <div class="w-[35px]">
+      <BrandingIcon />
+    </div>
+    <div class="hidden sm:block self-center whitespace-nowrap leading-[10px] ml-2 dark:text-green-200">
+      <h1 class="my-0 text-xl font-light leading-5">
+        sidebase
+      </h1>
+    </div>
+  </div>
+</template>

client/nuxt.config.ts

@@ -0,0 +1,16 @@
+import { resolve } from 'pathe'
+
+export default defineNuxtConfig({
+  ssr: false,
+  modules: [
+    '@nuxt/devtools-ui-kit'
+  ],
+  nitro: {
+    output: {
+      publicDir: resolve(__dirname, '../dist/client')
+    }
+  },
+  app: {
+    baseURL: '/__nuxt-auth'
+  }
+})

client/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "nuxt-auth-client"
+}

client/pages/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
+
+const client = useDevtoolsClient()
+const { status, data } = client.value?.host.nuxt.vueApp.config.globalProperties?.$auth
+</script>
+
+<template>
+  <div class="relative n-bg-base flex flex-col h-screen">
+    <NSectionBlock
+      icon="carbon:unlocked"
+      text="Authentication"
+      description="@sidebase/nuxt-auth"
+      :padding="false"
+    >
+      <hr class="border-zinc-800">
+      <div px4 pt6>
+        <span op50>Read our documentation under </span><a href="https://sidebase.io/nuxt-auth" target="_blank" hover="text-primary underline">sidebase.io/nuxt-auth</a>
+      </div>
+    </NSectionBlock>
+    <hr class="border-zinc-800">
+
+    <div class="m-3">
+      <NCard class="p-3">
+        Status: {{ status }} <br>
+        Username : {{ data ? data.name : 'unknown' }}
+      </NCard>
+    </div>
+  </div>
+</template>

client/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./.nuxt/tsconfig.json",
+  "exclude": ["../docs"]
+}

package.json

@@ -23,19 +23,23 @@
     "dev:prepare": "nuxt-module-build --stub"
   },
   "dependencies": {
+    "@nuxt/devtools-kit": "^0.4.5",
     "@nuxt/kit": "^3.4.2",
     "@vueuse/core": "^9.13.0",
     "defu": "^6.1.2",
     "h3": "^1.6.4",
     "knitwork": "^1.0.0",
     "nitropack": "^2.3.2",
     "requrl": "^3.0.2",
+    "sirv": "^2.0.3",
     "ufo": "^1.1.1"
   },
   "peerDependencies": {
     "next-auth": "^4.21.1"
   },
   "devDependencies": {
+    "@nuxt/devtools": "^0.4.5",
+    "@nuxt/devtools-ui-kit": "^0.4.5",
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "^3.4.2",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",

playground-authjs/nuxt.config.ts

@@ -1,5 +1,31 @@
+import { resolve } from 'path'
+import { defineNuxtModule } from '@nuxt/kit'
+import { startSubprocess } from '@nuxt/devtools-kit'
+
 export default defineNuxtConfig({
-  modules: ['../src/module.ts'],
+  modules: [
+    '../src/module.ts',
+    '@nuxt/devtools',
+    defineNuxtModule({
+      setup (_, nuxt) {
+        if (!nuxt.options.dev) {
+          return
+        }
+
+        startSubprocess(
+          {
+            command: 'npx',
+            args: ['nuxi', 'dev', '--port', '3300'],
+            cwd: resolve(__dirname, '../client')
+          },
+          {
+            id: 'nuxt-auth:client',
+            name: 'Auth DevTools'
+          }
+        )
+      }
+    })
+  ],
   auth: {
     provider: {
       type: 'authjs'

playground-local/app.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue'
 import { useAuth } from '#imports'
 
 const { signIn, token, data, status, lastRefreshedAt, signOut, getSession } = useAuth()
-
 const username = ref('')
 const password = ref('')
 </script>

playground-local/nuxt.config.ts

@@ -1,5 +1,31 @@
+import { resolve } from 'path'
+import { defineNuxtModule } from '@nuxt/kit'
+import { startSubprocess } from '@nuxt/devtools-kit'
+
 export default defineNuxtConfig({
-  modules: ['../src/module.ts'],
+  modules: [
+    '../src/module.ts',
+    '@nuxt/devtools',
+    defineNuxtModule({
+      setup (_, nuxt) {
+        if (!nuxt.options.dev) {
+          return
+        }
+
+        startSubprocess(
+          {
+            command: 'npx',
+            args: ['nuxi', 'dev', '--port', '3300'],
+            cwd: resolve(__dirname, '../client')
+          },
+          {
+            id: 'nuxt-auth:client',
+            name: 'Auth DevTools'
+          }
+        )
+      }
+    })
+  ],
   build: {
     transpile: ['jsonwebtoken']
   },
@@ -25,7 +51,7 @@ export default defineNuxtConfig({
       enableRefreshPeriodically: 5000
     },
     globalAppMiddleware: {
-      isEnabled: true
+      isEnabled: false
     }
   }
 })