🔑 Add support for client credentials authentication in API v2.1 with priority over OAuth and API key

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
+    // v2.1 supports OAuth, client credentials, and API key
-    if (isAuthenticated.value && accessToken.value) {
+    // 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 },