feat(devtools): ✨ Added provider choice; UI improvements

client/components/AuthState.vue

@@ -9,8 +9,9 @@ defineProps<{
     icon="carbon-prompt-session"
     text="Auth state"
     description="Current nuxt-oidc-auth session"
-    :padding="false"
+    padding="px-6"
     :open="false"
+    class="z-0"
   >
     <NCodeBlock
       v-if="Object.keys(oidcState).length > 0"

client/components/DevMode.vue

@@ -11,8 +11,9 @@ defineProps<{
     icon="carbon-code"
     text="DevMode"
     description="Dev Mode Insights"
-    :padding="false"
+    padding="px-6"
     :open="false"
+    class="z-0"
   >
     <div class="space-y-4">
       <NTip

client/components/ProviderConfigs.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import type { OidcConfig } from '../pages/index.vue'
-import { computed, ref } from '#imports'
 
 const props = defineProps<{
   oidcConfig: OidcConfig
@@ -22,8 +22,9 @@ const configJson = computed(() => {
     icon="carbon-document-multiple-01"
     text="Provider configs"
     description="Currently configured authentication providers"
-    :padding="false"
+    padding="px-6"
     :open="false"
+    class="z-0"
   >
     <div class="w-full flex justify-start gap-3">
       <NSelect

client/components/Secrets.vue

@@ -9,8 +9,9 @@ defineProps<{
     icon="carbon-password"
     text="Secrets"
     description="Current encryption secrets"
-    :padding="false"
+    padding="px-6"
     :open="false"
+    class="z-0"
   >
     <div class="space-y-4">
       <p>

client/nuxt.config.ts

@@ -24,4 +24,8 @@ export default defineNuxtConfig({
       'x-divider': 'h-1px w-full bg-gray/15',
     },
   },
+  experimental: {
+    componentIslands: true,
+  },
+  compatibilityDate: '2024-09-19',
 })

client/package.json

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

client/pages/index.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit'
-import { computed, ref } from '#imports'
+import { computed, ref } from 'vue'
 
 export interface OidcConfig {
   providers: Record<string, undefined>
   devMode: Record<'enabled', boolean>
   session: Record<'expirationCheck', boolean>
 }
 
+const showLoginDropdown = ref(false)
+const showLogoutDropdown = ref(false)
 const devtoolsClient: NuxtDevtoolsIframeClient | null = ref(null)
 const devAuthToken = ref<string | null>(localStorage.getItem('__nuxt_dev_token__'))
 const oidcRuntimeConfig = ref()
@@ -18,6 +20,7 @@ const oidcState = ref({})
 const clientWindow = computed(() => devtoolsClient.value.host?.app)
 const oidcSecrets = ref({})
 const isDevAuthed = ref(false)
+const registeredProviders = computed(() => oidcConfig.value?.providers ? oidcConfig.value?.providers : {})
 
 onDevtoolsClientConnected(async (client: NuxtDevtoolsIframeClient) => {
   // Getting devtools client
@@ -41,7 +44,7 @@ async function logout(provider?: string) {
 
 <template>
   <div class="relative h-screen w-full flex flex-col">
-    <div class="n-navbar-glass fixed top-0 w-full flex justify-start flex-gap-2 px-10">
+    <div class="fixed top-0 z-10 max-h-44 w-full flex flex-row justify-start bg-black/10 px-10 backdrop-blur-6 @container/header dark:bg-gray/[15%] dark:backdrop-blur-6">
       <div class="mt-4">
         <h1 class="text-3xl font-bold">
           Nuxt OIDC Auth
@@ -50,58 +53,110 @@ async function logout(provider?: string) {
           Nuxt DevTools Integration
         </p>
       </div>
-      <NButton
-        n="green"
-        class="ml-auto mt-4 self-start"
-        @click="login(selectedProvider)"
+      <div class="ml-auto flex flex-col-reverse justify-center gap-2 py-2 @[48rem]/header:flex-row">
+        <NDropdown v-model="showLoginDropdown" n="green n-bg-base">
+          <template #trigger>
+            <NButton
+              type="button"
+              n="green"
+              class="n-bg-base w-28 self-start @[48rem]/header:mt-4"
+              @click="showLoginDropdown = !showLoginDropdown"
+            >
+              <span class="i-carbon-login" />
+              Login
+            </NButton>
+          </template>
+          <div class="w-28 flex flex-col gap-2">
+            <button
+              n="green"
+              class="n-bg-base w-full self-start p-2 text-left hover:bg-black/20 dark:hover:bg-white/20"
+              :border="false"
+              @click="login()"
+            >
+              Default
+            </button>
+            <button
+              v-for="provider in Object.keys(registeredProviders)" :key="provider"
+              n="green"
+              class="n-bg-base w-full self-start p-2 text-left hover:bg-black/20 dark:hover:bg-white/20"
+              :border="false"
+              @click="login(provider)"
+            >
+              {{ provider[0].toUpperCase() + provider.slice(1) }}
+            </button>
+          </div>
+        </NDropdown>
+        <NDropdown v-model="showLogoutDropdown" n="green n-bg-base" class="ml-auto @[48rem]/header:ml-0">
+          <template #trigger>
+            <NButton
+              type="button"
+              n="green"
+              class="n-bg-base w-28 self-start @[48rem]/header:mt-4"
+              @click="showLogoutDropdown = !showLogoutDropdown"
+            >
+              <span class="i-carbon-logout" />
+              Logout
+            </NButton>
+          </template>
+          <div class="w-28 flex flex-col gap-2">
+            <button
+              n="green"
+              class="n-bg-base w-full self-start p-2 text-left hover:bg-black/20 dark:hover:bg-white/20"
+              :border="false"
+              @click="logout()"
+            >
+              Default
+            </button>
+            <button
+              v-for="provider in Object.keys(registeredProviders)" :key="provider"
+              n="green"
+              class="n-bg-base w-full self-start p-2 text-left hover:bg-black/20 dark:hover:bg-white/20"
+              :border="false"
+              @click="logout(provider)"
+            >
+              {{ provider[0].toUpperCase() + provider.slice(1) }}
+            </button>
+          </div>
+        </NDropdown>
+        <NButton
+          class="n-bg-base ml-auto w-28 self-start @[48rem]/header:ml-0 @[48rem]/header:mt-4"
+          n="green"
+          @click="devtoolsClient!.host.devtools.reload()"
+        >
+          <span class="i-carbon-reset" />
+          Reload
+        </NButton>
+      </div>
+    </div>
+    <div class="@container/content">
+      <NTip
+        v-if="!isDevAuthed"
+        class="relative mt-33 @[53rem]/content:mt-23"
+        n="orange5"
+        icon="i-carbon-locked"
+        justify-center
       >
-        <span class="i-carbon-login" />
-        Login
-      </NButton>
-      <NButton
-        class="mt-4 self-start"
-        n="green"
-        @click="logout(selectedProvider)"
+        Current DevTools session is not authorized, some features may be disabled.
+      </NTip>
+      <div
+        v-if="oidcConfig"
+        class="flex flex-col"
+        :class="{ 'mt-33 @[53rem]/content:mt-23': isDevAuthed }"
       >
-        <span class="i-carbon-logout" />
-        Logout
-      </NButton>
-      <NButton
-        class="mt-4 self-start"
-        n="green"
-        @click="devtoolsClient!.host.devtools.reload()"
+        <AuthState :oidc-state />
+        <ProviderConfigs
+          :oidc-runtime-config
+          :oidc-config
+        />
+        <Secrets :oidc-secrets />
+        <DevMode :oidc-runtime-config />
+      </div>
+      <div
+        v-else
+        class="mt-16"
       >
-        <span class="i-carbon-reset" />
-        Refresh
-      </NButton>
-    </div>
-    <NTip
-      v-if="!isDevAuthed"
-      class="relative mt-24"
-      n="orange5"
-      icon="i-carbon-locked"
-      justify-center
-    >
-      Current DevTools session is not authorized, some features may be disabled.
-    </NTip>
-    <div
-      v-if="oidcConfig"
-      class="flex flex-col gap-2 p-10 pt-6"
-      :class="{ 'mt-16': isDevAuthed }"
-    >
-      <AuthState :oidc-state />
-      <ProviderConfigs
-        :oidc-runtime-config
-        :oidc-config
-      />
-      <Secrets :oidc-secrets />
-      <DevMode :oidc-runtime-config />
-    </div>
-    <div
-      v-else
-      class="mt-16"
-    >
-      <NLoading />
+        <NLoading />
+      </div>
     </div>
   </div>
 </template>

client/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.13.0",
   "private": false,
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "description": "OIDC authentication module for Nuxt SSR",
   "license": "MIT",
   "homepage": "https://github.com/itpropro/nuxt-oidc-auth#readme",
@@ -33,34 +33,34 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/devtools-kit": "^1.4.1",
+    "@nuxt/devtools-kit": "^1.4.2",
+    "@nuxt/devtools-ui-kit": "^1.4.2",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "h3": "^1.12.0",
-    "jose": "^5.8.0",
+    "jose": "^5.9.2",
     "ofetch": "^1.3.4",
     "scule": "^1.3.0",
     "sirv": "^2.0.4",
     "ufo": "^1.5.4",
     "uncrypto": "^0.1.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.27.3",
-    "@nuxt/devtools": "^1.4.1",
-    "@nuxt/devtools-ui-kit": "^1.4.1",
-    "@nuxt/eslint-config": "^0.5.3",
-    "@nuxt/kit": "^3.13.0",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.0",
-    "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^20.16.2",
-    "@unocss/eslint-plugin": "^0.62.3",
+    "@antfu/eslint-config": "^3.6.2",
+    "@nuxt/devtools": "^1.4.2",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/kit": "^3.13.2",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.2",
+    "@types/node": "^20.16.5",
+    "@unocss/eslint-plugin": "^0.62.4",
     "changelogen": "^0.5.5",
-    "concurrently": "^8.2.2",
-    "eslint": "^9.9.1",
-    "nuxt": "^3.13.0",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.29"
+    "concurrently": "^9.0.1",
+    "eslint": "^9.10.0",
+    "nuxt": "^3.13.2",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1",
+    "vue-tsc": "^2.1.6"
   }
-}
+}

playground/nuxt.config.ts

@@ -9,10 +9,6 @@ export default defineNuxtConfig({
 
   telemetry: false,
 
-  features: {
-    inlineStyles: false,
-  },
-
   oidc: {
     defaultProvider: 'github',
     providers: {

playground/package.json

@@ -9,14 +9,14 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "nuxt": "^3.13.0",
-    "vue": "^3.4.38"
+    "nuxt": "^3.13.2",
+    "vue": "^3.5.6"
   },
   "devDependencies": {
-    "@iconify-json/majesticons": "^1.1.12",
-    "@iconify-json/simple-icons": "^1.1.115",
-    "@nuxtjs/color-mode": "^3.4.4",
-    "@unocss/nuxt": "^0.62.3",
+    "@iconify-json/majesticons": "^1.2.0",
+    "@iconify-json/simple-icons": "^1.2.3",
+    "@nuxtjs/color-mode": "^3.5.1",
+    "@unocss/nuxt": "^0.62.4",
     "nuxt-oidc-auth": "latest"
   }
 }