From 1ddc7761f5c4a411ee3934afdcd05e1aa2052dcc Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 18:32:43 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=91=20Add=20support=20for=20client=20c?=
 =?UTF-8?q?redentials=20authentication=20in=20API=20v2.1=20with=20priority?=
 =?UTF-8?q?=20over=20OAuth=20and=20API=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/ChallongeTest.vue               | 29 +++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/code/websites/pokedex.online/src/views/ChallongeTest.vue b/code/websites/pokedex.online/src/views/ChallongeTest.vue
index 45bf2df..b228534 100644
--- a/code/websites/pokedex.online/src/views/ChallongeTest.vue
+++ b/code/websites/pokedex.online/src/views/ChallongeTest.vue
@@ -95,6 +95,19 @@
               }}
             </span>
           </div>
+
+          <!-- Client Credentials (v2.1 only) -->
+          <div v-if="apiVersion === 'v2.1'" class="control-group">
+            <div class="info-badge" v-if="isClientCredsAuthenticated">
+              ✓ Client Credentials Active - APPLICATION scope enabled
+            </div>
+            <router-link to="/client-credentials" class="btn btn-secondary btn-sm">
+              Manage Client Credentials
+            </router-link>
+            <span class="scope-hint">
+              Client credentials required for APPLICATION scope access
+            </span>
+          </div>
         </div>
       </div>
 
@@ -332,6 +345,7 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { useChallongeApiKey } from '../composables/useChallongeApiKey.js';
 import { useChallongeOAuth } from '../composables/useChallongeOAuth.js';
+import { useChallongeClientCredentials } from '../composables/useChallongeClientCredentials.js';
 import {
   createChallongeV1Client,
   createChallongeV2Client,
@@ -348,6 +362,10 @@ const {
   logout: oauthLogout,
   loading: oauthLoading
 } = useChallongeOAuth();
+const {
+  isAuthenticated: isClientCredsAuthenticated,
+  accessToken: clientCredsToken
+} = useChallongeClientCredentials();
 
 // API Configuration
 const apiVersion = ref('v2.1'); // 'v1' or 'v2.1'
@@ -388,8 +406,15 @@ const client = computed(() => {
     if (!apiKey.value) return null;
     return createChallongeV1Client(apiKey.value);
   } else {
-    // v2.1 supports both OAuth and API key
-    if (isAuthenticated.value && accessToken.value) {
+    // v2.1 supports OAuth, client credentials, and API key
+    // Priority: Client Credentials > OAuth > API Key
+    if (isClientCredsAuthenticated.value && clientCredsToken.value) {
+      // Use client credentials token (for APPLICATION scope)
+      return createChallongeV2Client(
+        { token: clientCredsToken.value, type: AuthType.OAUTH },
+        { debug: debugMode.value }
+      );
+    } else if (isAuthenticated.value && accessToken.value) {
       // Use OAuth token if authenticated
       return createChallongeV2Client(
         { token: accessToken.value, type: AuthType.OAUTH },