feat(devtools): ✨ Added devauth check; Updated UI

itpropro · Apr 16, 2024 · 6cc3605 · 6cc3605
1 parent 4ee7fa7
commit 6cc3605
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 13 deletions.
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
@@ -13,4 +13,15 @@ export default defineNuxtConfig({
   app: {
     baseURL: '/__nuxt-oidc-auth',
   },
+  unocss: {
+    shortcuts: {
+      // General Tokens
+      'bg-base': 'n-bg-base',
+      'bg-active': 'n-bg-active',
+      'border-base': 'n-border-base',
+      'text-secondary': 'color-black/50 dark:color-white/50',
+      // Reusable
+      'x-divider': 'h-1px w-full bg-gray/15',
+    }
+  }
 })
diff --git a/client/pages/index.vue b/client/pages/index.vue
@@ -10,22 +10,24 @@ export interface OidcConfig {
 }
 
 const devtoolsClient: NuxtDevtoolsIframeClient | null = ref(null)
-
+const devAuthToken = ref<string | null>(localStorage.getItem('__nuxt_dev_token__'))
 const oidcRuntimeConfig = ref()
 const oidcConfig = ref<OidcConfig>()
 const selectedProvider = ref('')
 const oidcState = ref({})
 const clientWindow = computed(() => devtoolsClient.value.host?.app)
 const oidcSecrets = ref({})
+const isDevAuthed = ref(false)
 
 onDevtoolsClientConnected(async (client: NuxtDevtoolsIframeClient) => {
   // Getting devtools client
   devtoolsClient.value = client
   // Settings refs
-  oidcRuntimeConfig.value = (await devtoolsClient.value.devtools.rpc.getServerRuntimeConfig()).oidc
-  oidcConfig.value = (await devtoolsClient.value.devtools.rpc.getServerConfig()).oidc
+  isDevAuthed.value = await devtoolsClient.value.devtools.rpc.verifyAuthToken(devAuthToken.value)
+  oidcRuntimeConfig.value = isDevAuthed.value ? (await devtoolsClient.value.devtools.rpc.getServerRuntimeConfig()).oidc : {}
+  oidcConfig.value = isDevAuthed.value ? (await devtoolsClient.value.devtools.rpc.getServerConfig()).oidc : {}
   oidcState.value = devtoolsClient.value.host.nuxt.payload.state['$snuxt-oidc-auth-session'] || {}
-  oidcSecrets.value = await devtoolsClient.value.devtools.extendClientRpc('nuxt-oidc-auth-rpc').getNuxtOidcAuthSecrets()
+  oidcSecrets.value = isDevAuthed.value ? await devtoolsClient.value.devtools.extendClientRpc('nuxt-oidc-auth-rpc').getNuxtOidcAuthSecrets() : {}
 })
 
 async function login(provider?: string) {
@@ -38,8 +40,8 @@ async function logout(provider?: string) {
 </script>
 
 <template>
-  <div class="relative p-10 flex flex-col h-screen">
-    <div class="flex justify-start w-92% flex-gap-2 top-0 fixed n-navbar-glass">
+  <div class="relative w-full flex flex-col h-screen">
+    <div class="flex px-10 justify-start w-full flex-gap-2 top-0 fixed n-navbar-glass">
       <div class="mt-4">
         <h1 class="text-3xl font-bold">
           Nuxt OIDC Auth
@@ -73,12 +75,25 @@ async function logout(provider?: string) {
         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 pb-4 mt-10"
+      class="flex flex-col gap-2 p-10 pt-6"
+      :class="{ 'mt-16': isDevAuthed }"
     >
       <AuthState :oidc-state />
-      <ProviderConfigs :oidc-runtime-config :oidc-config />
+      <ProviderConfigs
+        :oidc-runtime-config
+        :oidc-config
+      />
       <Secrets :oidc-secrets />
       <DevMode :oidc-runtime-config />
     </div>

diff --git a/src/devtools.ts b/src/devtools.ts
@@ -35,13 +35,9 @@ export function setupDevToolsUI(nuxt: Nuxt, resolver: Resolver) {
 
   nuxt.hook('devtools:customTabs', (tabs) => {
     tabs.push({
-      // unique identifier
       name: 'nuxt-oidc-auth',
-      // title to display in the tab
       title: 'Nuxt OIDC Auth',
-      // any icon from Iconify, or a URL to an image
       icon: 'carbon:rule-locked',
-      // iframe view
       view: {
         type: 'iframe',
         src: DEVTOOLS_UI_ROUTE,

diff --git a/src/runtime/types/oidc.ts b/src/runtime/types/oidc.ts
@@ -149,7 +149,7 @@ export interface OidcProviderConfig {
    * Space-delimited list of string values that specifies whether the authorization server prompts the user for reauthentication and consent
    */
   prompt?: Array<'none'> | Array<PossibleCombinations<'login' | 'consent' | 'select_account'>>
-    /**
+  /**
    * Encode redirect uri query parameter in authorization request. Only for compatibility with services that don't implement proper parsing of query parameters.
    * @default false
    */