@dereekb/dbx-firebase 13.12.3 → 13.12.5

package/fesm2022/dereekb-dbx-firebase-oidc.mjs

@@ -3,7 +3,7 @@ import { input, computed, output, ChangeDetectionStrategy, Component, inject, In
 import * as i1 from '@dereekb/dbx-web';
 import { DbxBasicLoadingComponent, DbxErrorComponent, DbxButtonComponent, DbxAvatarComponent, DbxButtonSpacerDirective, DbxActionSnackbarErrorDirective, AbstractDbxSelectionListWrapperDirective, DbxListWrapperComponentImportsModule, DEFAULT_LIST_WRAPPER_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxSelectionListViewDirective, DbxSelectionValueListViewComponentImportsModule, provideDbxListView, DEFAULT_DBX_SELECTION_VALUE_LIST_COMPONENT_CONFIGURATION_TEMPLATE, AbstractDbxValueListViewItemComponent, provideDbxListViewWrapper, DbxSpacerDirective, DbxActionConfirmDirective, DbxContentPitDirective, DbxDetailBlockComponent, DbxClickToCopyTextComponent } from '@dereekb/dbx-web';
 import { readableError, SPACE_STRING_SPLIT_JOIN, separateValues, generatePkceCodeVerifier, generatePkceCodeChallenge } from '@dereekb/util';
-import { DbxInjectionComponent, DbxActionDirective, DbxActionHandlerDirective, DbxActionValueDirective, DbxActionButtonDirective, DBX_INJECTION_COMPONENT_DATA, DbxRouterService, dbxRouteParamReaderInstance, completeOnDestroy, DbxActionEnforceModifiedDirective, DbxAppAuthRouterService } from '@dereekb/dbx-core';
+import { DbxInjectionComponent, DbxActionDirective, DbxActionHandlerDirective, DbxActionValueDirective, DbxActionButtonDirective, DBX_INJECTION_COMPONENT_DATA, DbxRouterService, clean, dbxRouteParamReaderInstance, completeOnDestroy, DbxActionEnforceModifiedDirective, DbxAppAuthRouterService } from '@dereekb/dbx-core';
 import { of, map, first, switchMap, tap, BehaviorSubject } from 'rxjs';
 import * as i1$1 from '@dereekb/dbx-form';
 import { dbxForgeListSelectionField, AbstractConfigAsyncForgeFormDirective, DbxForgeFormComponentImportsModule, dbxForgeFormComponentProviders, DBX_FORGE_FORM_COMPONENT_TEMPLATE, DbxActionFormDirective, dbxForgeValueSelectionField, dbxForgeTextField, dbxForgeSearchableStringChipField, isWebsiteUrlValidator, dbxForgeContainer, dbxForgePickableChipField, pickableValueFieldValuesConfigForStaticLabeledValues, DbxFormSourceDirective, DbxFormValueChangeDirective } from '@dereekb/dbx-form';
@@ -11,7 +11,7 @@ import { successResult } from '@dereekb/rxjs';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { DbxFirebaseAuthService, AbstractDbxFirebaseDocumentStore, firebaseDocumentStoreCreateFunction, firebaseDocumentStoreUpdateFunction, firebaseDocumentStoreDeleteFunction, AbstractDbxFirebaseCollectionStore, DbxFirebaseCollectionStoreDirective, provideDbxFirebaseCollectionStoreDirective, DbxFirebaseCollectionListDirective, DbxFirebaseCollectionChangeDirective, DbxFirebaseDocumentStoreDirective, provideDbxFirebaseDocumentStoreDirective } from '@dereekb/dbx-firebase';
 import { HttpClient } from '@angular/common/http';
-import { ALL_OIDC_TOKEN_ENDPOINT_AUTH_METHOD_OPTIONS, PRIVATE_KEY_JWT_TOKEN_ENDPOINT_AUTH_METHOD, OidcModelFunctions, OidcModelFirestoreCollections, OIDC_ENTRY_CLIENT_TYPE, oidcGrantEntriesByUidQuery } from '@dereekb/firebase';
+import { ALL_OIDC_TOKEN_ENDPOINT_AUTH_METHOD_OPTIONS, PRIVATE_KEY_JWT_TOKEN_ENDPOINT_AUTH_METHOD, OidcModelFunctions, OidcModelFirestoreCollections, OIDC_ENTRY_CLIENT_TYPE, oidcGrantEntriesByUidQuery, PUBLIC_PKCE_TOKEN_ENDPOINT_AUTH_METHOD } from '@dereekb/firebase';
 import { DatePipe, CommonModule } from '@angular/common';
 
 /**
@@ -717,7 +717,7 @@ class DbxFirebaseOAuthLoginComponent {
     dbxRouterService = inject(DbxRouterService);
     dbxFirebaseAuthService = inject(DbxFirebaseAuthService);
     interactionService = inject(DbxFirebaseOidcInteractionService);
-    uidParamReader = dbxRouteParamReaderInstance(this.dbxRouterService, DEFAULT_OIDC_INTERACTION_UID_PARAM_KEY);
+    uidParamReader = clean(dbxRouteParamReaderInstance(this.dbxRouterService, DEFAULT_OIDC_INTERACTION_UID_PARAM_KEY));
     interactionUid = toSignal(this.uidParamReader.value$);
     isLoggedIn = toSignal(this.dbxFirebaseAuthService.isLoggedIn$);
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : /* istanbul ignore next */ []));
@@ -753,9 +753,6 @@ class DbxFirebaseOAuthLoginComponent {
             }
         });
     }
-    ngOnDestroy() {
-        this.uidParamReader.destroy();
-    }
     retry() {
         this.errorMessage.set(null);
         this._submitIdToken();
@@ -1844,10 +1841,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
  *
  * The client secret is only shown immediately after creation or after rotating.
  * When no secret is available, a "Rotate Secret" button is shown.
+ *
+ * Public PKCE clients (`token_endpoint_auth_method === 'none'`) have no secret: the secret
+ * block, the one-time "copy it now" messaging, and the rotate button are all hidden in favor
+ * of a note explaining the client authenticates with PKCE alone.
  */
 class DbxFirebaseOidcEntryClientViewComponent {
     oidcEntryDocumentStore = inject(OidcEntryDocumentStore);
     clientIdSignal = toSignal(this.oidcEntryDocumentStore.data$.pipe(map((data) => data.payload?.client_id)));
+    tokenEndpointAuthMethodSignal = toSignal(this.oidcEntryDocumentStore.data$.pipe(map((data) => data.payload?.token_endpoint_auth_method)));
+    isPublicClientSignal = computed(() => this.tokenEndpointAuthMethodSignal() === PUBLIC_PKCE_TOKEN_ENDPOINT_AUTH_METHOD, ...(ngDevMode ? [{ debugName: "isPublicClientSignal" }] : /* istanbul ignore next */ []));
     latestClientSecretSignal = toSignal(this.oidcEntryDocumentStore.latestClientSecret$);
     rotateSecretConfirmConfig = {
         title: 'Rotate Client Secret',
@@ -1863,17 +1866,23 @@ class DbxFirebaseOidcEntryClientViewComponent {
       <dbx-detail-block class="dbx-pb4" icon="key" header="Client ID">
         <dbx-click-to-copy-text [copyText]="clientIdSignal()">{{ clientIdSignal() }}</dbx-click-to-copy-text>
       </dbx-detail-block>
-      <dbx-detail-block icon="lock" header="Client Secret">
-        @if (latestClientSecretSignal()) {
-          <dbx-click-to-copy-text class="dbx-block dbx-pb2" [copyText]="latestClientSecretSignal()">{{ latestClientSecretSignal() }}</dbx-click-to-copy-text>
-          <dbx-click-to-copy-text [copyText]="latestClientSecretSignal()" [showIcon]="false"><div class="dbx-hint dbx-u">This secret is only shown once. Copy it now.</div></dbx-click-to-copy-text>
-        } @else {
-          <div>
-            <div class="dbx-hint dbx-pb3">The client secret was shown once when created. You can invalidate the old one and get a new one.</div>
-            <dbx-button dbxAction [dbxActionHandler]="handleRotateClientSecret" [dbxActionConfirm]="rotateSecretConfirmConfig" dbxActionButton text="Rotate Secret" icon="refresh" color="warn" [raised]="true"></dbx-button>
-          </div>
-        }
-      </dbx-detail-block>
+      @if (isPublicClientSignal()) {
+        <dbx-detail-block icon="lock_open" header="Client Secret">
+          <div class="dbx-hint">This is a public client (PKCE) with no client secret. It authenticates the authorization code flow using PKCE alone.</div>
+        </dbx-detail-block>
+      } @else {
+        <dbx-detail-block icon="lock" header="Client Secret">
+          @if (latestClientSecretSignal()) {
+            <dbx-click-to-copy-text class="dbx-block dbx-pb2" [copyText]="latestClientSecretSignal()">{{ latestClientSecretSignal() }}</dbx-click-to-copy-text>
+            <dbx-click-to-copy-text [copyText]="latestClientSecretSignal()" [showIcon]="false"><div class="dbx-hint dbx-u">This secret is only shown once. Copy it now.</div></dbx-click-to-copy-text>
+          } @else {
+            <div>
+              <div class="dbx-hint dbx-pb3">The client secret was shown once when created. You can invalidate the old one and get a new one.</div>
+              <dbx-button dbxAction [dbxActionHandler]="handleRotateClientSecret" [dbxActionConfirm]="rotateSecretConfirmConfig" dbxActionButton text="Rotate Secret" icon="refresh" color="warn" [raised]="true"></dbx-button>
+            </div>
+          }
+        </dbx-detail-block>
+      }
     </dbx-content-pit>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: DbxContentPitDirective, selector: "dbx-content-pit, [dbxContentPit]", inputs: ["scrollable", "rounded"] }, { kind: "component", type: DbxDetailBlockComponent, selector: "dbx-detail-block", inputs: ["icon", "header", "alignHeader", "bigHeader"] }, { kind: "component", type: DbxClickToCopyTextComponent, selector: "dbx-click-to-copy-text", inputs: ["copyText", "showIcon", "highlighted", "clipboardSnackbarMessagesConfig", "clipboardSnackbarMessagesEnabled", "clickToCopyIcon", "clickIconToCopyOnly"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "directive", type: DbxActionConfirmDirective, selector: "[dbxActionConfirm]", inputs: ["dbxActionConfirm", "dbxActionConfirmSkip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1886,17 +1895,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
       <dbx-detail-block class="dbx-pb4" icon="key" header="Client ID">
         <dbx-click-to-copy-text [copyText]="clientIdSignal()">{{ clientIdSignal() }}</dbx-click-to-copy-text>
       </dbx-detail-block>
-      <dbx-detail-block icon="lock" header="Client Secret">
-        @if (latestClientSecretSignal()) {
-          <dbx-click-to-copy-text class="dbx-block dbx-pb2" [copyText]="latestClientSecretSignal()">{{ latestClientSecretSignal() }}</dbx-click-to-copy-text>
-          <dbx-click-to-copy-text [copyText]="latestClientSecretSignal()" [showIcon]="false"><div class="dbx-hint dbx-u">This secret is only shown once. Copy it now.</div></dbx-click-to-copy-text>
-        } @else {
-          <div>
-            <div class="dbx-hint dbx-pb3">The client secret was shown once when created. You can invalidate the old one and get a new one.</div>
-            <dbx-button dbxAction [dbxActionHandler]="handleRotateClientSecret" [dbxActionConfirm]="rotateSecretConfirmConfig" dbxActionButton text="Rotate Secret" icon="refresh" color="warn" [raised]="true"></dbx-button>
-          </div>
-        }
-      </dbx-detail-block>
+      @if (isPublicClientSignal()) {
+        <dbx-detail-block icon="lock_open" header="Client Secret">
+          <div class="dbx-hint">This is a public client (PKCE) with no client secret. It authenticates the authorization code flow using PKCE alone.</div>
+        </dbx-detail-block>
+      } @else {
+        <dbx-detail-block icon="lock" header="Client Secret">
+          @if (latestClientSecretSignal()) {
+            <dbx-click-to-copy-text class="dbx-block dbx-pb2" [copyText]="latestClientSecretSignal()">{{ latestClientSecretSignal() }}</dbx-click-to-copy-text>
+            <dbx-click-to-copy-text [copyText]="latestClientSecretSignal()" [showIcon]="false"><div class="dbx-hint dbx-u">This secret is only shown once. Copy it now.</div></dbx-click-to-copy-text>
+          } @else {
+            <div>
+              <div class="dbx-hint dbx-pb3">The client secret was shown once when created. You can invalidate the old one and get a new one.</div>
+              <dbx-button dbxAction [dbxActionHandler]="handleRotateClientSecret" [dbxActionConfirm]="rotateSecretConfirmConfig" dbxActionButton text="Rotate Secret" icon="refresh" color="warn" [raised]="true"></dbx-button>
+            </div>
+          }
+        </dbx-detail-block>
+      }
     </dbx-content-pit>
   `,
                     standalone: true,