bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-14 07:13:32 +00:00
Code Issues Releases Wiki Activity

[PM-16793] port credential generator service to providers (#14071)

Browse Source 
* introduce extension service
* deprecate legacy forwarder types
* eliminate repeat algorithm emissions
* extend logging to preference management
* align forwarder ids with vendor ids
* fix duplicate policy emissions; debugging required logger enhancements

-----

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
This commit is contained in:
✨ Audrey ✨
2025-05-27 09:51:14 -04:00
committed by GitHub
parent f4f659c52a
commit 97a591e738
140 changed files with 3720 additions and 4085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
libs/tools/generator/components/src/credential-generator.component.ts
View File

@@ -1,5 +1,3 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { LiveAnnouncer } from "@angular/cdk/a11y";
import {
Component,
@@ -24,15 +22,15 @@ import {
map,
ReplaySubject,
Subject,
switchMap,
takeUntil,
tap,
withLatestFrom,
} from "rxjs";
import { Account, AccountService } from "@bitwarden/common/auth/abstractions/account.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { IntegrationId } from "@bitwarden/common/tools/integration";
import { VendorId } from "@bitwarden/common/tools/extension";
import {
SemanticLogger,
disabledSemanticLoggerProvider,
@@ -41,23 +39,25 @@ import {
import { UserId } from "@bitwarden/common/types/guid";
import { ToastService, Option } from "@bitwarden/components";
import {
AlgorithmInfo,
CredentialAlgorithm,
CredentialCategory,
CredentialType,
CredentialGeneratorService,
GenerateRequest,
GeneratedCredential,
Generators,
getForwarderConfiguration,
isEmailAlgorithm,
isForwarderIntegration,
isPasswordAlgorithm,
isForwarderExtensionId,
isSameAlgorithm,
isEmailAlgorithm,
isUsernameAlgorithm,
toCredentialGeneratorConfiguration,
isPasswordAlgorithm,
CredentialAlgorithm,
AlgorithmMetadata,
Algorithm,
AlgorithmsByType,
Type,
} from "@bitwarden/generator-core";
import { GeneratorHistoryService } from "@bitwarden/generator-history";
import { translate } from "./util";
// constants used to identify navigation selections that are not
// generator algorithms
const IDENTIFIER = "identifier";
@@ -84,11 +84,14 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
private ariaLive: LiveAnnouncer,
) {}
/** exports algorithm symbols to the template */
protected readonly Algorithm = Algorithm;
/** Binds the component to a specific user's settings. When this input is not provided,
* the form binds to the active user
*/
@Input()
account: Account | null;
account: Account | null = null;
/** Send structured debug logs from the credential generator component
* to the debugger console.
@@ -127,7 +130,7 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
@Output()
readonly onGenerated = new EventEmitter<GeneratedCredential>();
protected root$ = new BehaviorSubject<{ nav: string }>({
protected root$ = new BehaviorSubject<{ nav: string | null }>({
nav: null,
});
@@ -141,11 +144,11 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
}
protected username = this.formBuilder.group({
nav: [null as string],
nav: [null as string | null],
});
protected forwarder = this.formBuilder.group({
nav: [null as string],
nav: [null as string | null],
});
async ngOnInit() {
@@ -154,33 +157,52 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
});
if (!this.account) {
this.account = await firstValueFrom(this.accountService.activeAccount$);
this.log.info(
{ userId: this.account.id },
"account not specified; using active account settings",
);
this.account$.next(this.account);
const account = await firstValueFrom(this.accountService.activeAccount$);
if (!account) {
this.log.panic("active account cannot be `null`.");
}
this.log.info({ userId: account.id }, "account not specified; using active account settings");
this.account$.next(account);
}
this.generatorService
.algorithms$(["email", "username"], { account$: this.account$ })
combineLatest([
this.generatorService.algorithms$("email", { account$: this.account$ }),
this.generatorService.algorithms$("username", { account$: this.account$ }),
])
.pipe(
map((algorithms) => algorithms.flat()),
map((algorithms) => {
const usernames = algorithms.filter((a) => !isForwarderIntegration(a.id));
// construct options for username and email algorithms; replace forwarder
// entry with a virtual entry for drill-down
const usernames = algorithms.filter((a) => !isForwarderExtensionId(a.id));
usernames.sort((a, b) => a.weight - b.weight);
const usernameOptions = this.toOptions(usernames);
usernameOptions.push({ value: FORWARDER, label: this.i18nService.t("forwardedEmail") });
usernameOptions.splice(-1, 0, {
value: FORWARDER,
label: this.i18nService.t("forwardedEmail"),
});
const forwarders = algorithms.filter((a) => isForwarderIntegration(a.id));
// construct options for forwarder algorithms; they get their own selection box
const forwarders = algorithms.filter((a) => isForwarderExtensionId(a.id));
forwarders.sort((a, b) => a.weight - b.weight);
const forwarderOptions = this.toOptions(forwarders);
forwarderOptions.unshift({ value: NONE_SELECTED, label: this.i18nService.t("select") });
return [usernameOptions, forwarderOptions] as const;
}),
tap((algorithms) =>
this.log.debug({ algorithms: algorithms as object }, "algorithms loaded"),
),
takeUntil(this.destroyed),
)
.subscribe(([usernames, forwarders]) => {
this.usernameOptions$.next(usernames);
this.forwarderOptions$.next(forwarders);
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
this.usernameOptions$.next(usernames);
this.forwarderOptions$.next(forwarders);
});
});
this.generatorService
@@ -195,9 +217,15 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
)
.subscribe(this.rootOptions$);
this.algorithm$
this.maybeAlgorithm$
.pipe(
map((a) => a?.description),
map((a) => {
if (a?.i18nKeys?.description) {
return translate(a.i18nKeys.description, this.i18nService);
} else {
return "";
}
}),
takeUntil(this.destroyed),
)
.subscribe((hint) => {
@@ -208,9 +236,9 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
});
});
this.algorithm$
this.maybeAlgorithm$
.pipe(
map((a) => a?.category),
map((a) => a?.type),
distinctUntilChanged(),
takeUntil(this.destroyed),
)
@@ -223,10 +251,12 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
});
// wire up the generator
this.algorithm$
this.generatorService
.generate$({
on$: this.generate$,
account$: this.account$,
})
.pipe(
filter((algorithm) => !!algorithm),
switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
catchError((error: unknown, generator) => {
if (typeof error === "string") {
this.toastService.showToast({
@@ -241,11 +271,14 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
// continue with origin stream
return generator;
}),
withLatestFrom(this.account$, this.algorithm$),
withLatestFrom(this.account$, this.maybeAlgorithm$),
takeUntil(this.destroyed),
)
.subscribe(([generated, account, algorithm]) => {
this.log.debug({ source: generated.source }, "credential generated");
this.log.debug(
{ source: generated.source ?? null, algorithm: algorithm?.id ?? null },
"credential generated",
);
this.generatorHistoryService
.track(account.id, generated.credential, generated.category, generated.generationDate)
@@ -256,8 +289,8 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
if (generated.source === this.USER_REQUEST) {
this.announce(algorithm.onGeneratedMessage);
if (algorithm && generated.source === this.USER_REQUEST) {
this.announce(translate(algorithm.i18nKeys.credentialGenerated, this.i18nService));
}
this.generatedCredential$.next(generated);
@@ -274,36 +307,46 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
this.root$
.pipe(
map(
(root): CascadeValue =>
root.nav === IDENTIFIER
? { nav: root.nav }
: { nav: root.nav, algorithm: JSON.parse(root.nav) },
),
map((root): CascadeValue => {
if (root.nav === IDENTIFIER) {
return { nav: root.nav };
} else if (root.nav) {
return { nav: root.nav, algorithm: JSON.parse(root.nav) };
} else {
return { nav: IDENTIFIER };
}
}),
takeUntil(this.destroyed),
)
.subscribe(activeRoot$);
this.username.valueChanges
.pipe(
map(
(username): CascadeValue =>
username.nav === FORWARDER
? { nav: username.nav }
: { nav: username.nav, algorithm: JSON.parse(username.nav) },
),
map((username): CascadeValue => {
if (username.nav === FORWARDER) {
return { nav: username.nav };
} else if (username.nav) {
return { nav: username.nav, algorithm: JSON.parse(username.nav) };
} else {
const [algorithm] = AlgorithmsByType[Type.username];
return { nav: JSON.stringify(algorithm), algorithm };
}
}),
takeUntil(this.destroyed),
)
.subscribe(activeIdentifier$);
this.forwarder.valueChanges
.pipe(
map(
(forwarder): CascadeValue =>
forwarder.nav === NONE_SELECTED
? { nav: forwarder.nav }
: { nav: forwarder.nav, algorithm: JSON.parse(forwarder.nav) },
),
map((forwarder): CascadeValue => {
if (forwarder.nav === NONE_SELECTED) {
return { nav: forwarder.nav };
} else if (forwarder.nav) {
return { nav: forwarder.nav, algorithm: JSON.parse(forwarder.nav) };
} else {
return { nav: NONE_SELECTED };
}
}),
takeUntil(this.destroyed),
)
.subscribe(activeForwarder$);
@@ -314,7 +357,7 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
map(([root, username, forwarder]) => {
const showForwarder = !root.algorithm && !username.algorithm;
const forwarderId =
showForwarder && isForwarderIntegration(forwarder.algorithm)
showForwarder && forwarder.algorithm && isForwarderExtensionId(forwarder.algorithm)
? forwarder.algorithm.forwarder
: null;
return [showForwarder, forwarderId] as const;
@@ -344,47 +387,51 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
return null;
}
}),
distinctUntilChanged((prev, next) => isSameAlgorithm(prev?.id, next?.id)),
distinctUntilChanged((prev, next) => {
if (prev === null || next === null) {
return false;
} else {
return isSameAlgorithm(prev.id, next.id);
}
}),
takeUntil(this.destroyed),
)
.subscribe((algorithm) => {
this.log.debug(algorithm, "algorithm selected");
this.log.debug({ algorithm: algorithm?.id ?? null }, "algorithm selected");
// update subjects within the angular zone so that the
// template bindings refresh immediately
this.zone.run(() => {
this.algorithm$.next(algorithm);
this.maybeAlgorithm$.next(algorithm);
});
});
// assume the last-selected generator algorithm is the user's preferred one
const preferences = await this.generatorService.preferences({ account$: this.account$ });
this.algorithm$
.pipe(
filter((algorithm) => !!algorithm),
withLatestFrom(preferences),
takeUntil(this.destroyed),
)
.pipe(withLatestFrom(preferences), takeUntil(this.destroyed))
.subscribe(([algorithm, preference]) => {
function setPreference(category: CredentialCategory, log: SemanticLogger) {
const p = preference[category];
function setPreference(type: CredentialType) {
const p = preference[type];
p.algorithm = algorithm.id;
p.updated = new Date();
log.info({ algorithm, category }, "algorithm preferences updated");
}
// `is*Algorithm` decides `algorithm`'s type, which flows into `setPreference`
if (isEmailAlgorithm(algorithm.id)) {
setPreference("email", this.log);
setPreference("email");
} else if (isUsernameAlgorithm(algorithm.id)) {
setPreference("username", this.log);
setPreference("username");
} else if (isPasswordAlgorithm(algorithm.id)) {
setPreference("password", this.log);
setPreference("password");
} else {
return;
}
this.log.info(
{ algorithm: algorithm.id, type: algorithm.type },
"algorithm preferences updated",
);
preferences.next(preference);
});
@@ -392,10 +439,12 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
preferences
.pipe(
map(({ email, username, password }) => {
const forwarderPref = isForwarderIntegration(email.algorithm) ? email : null;
const usernamePref = email.updated > username.updated ? email : username;
const forwarderPref = isForwarderExtensionId(usernamePref.algorithm)
? usernamePref
: null;
// inject drilldown flags
// inject drill-down flags
const forwarderNav = !forwarderPref
? NONE_SELECTED
: JSON.stringify(forwarderPref.algorithm);
@@ -411,14 +460,14 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
selection: { nav: rootNav },
active: {
nav: rootNav,
algorithm: rootNav === IDENTIFIER ? null : password.algorithm,
algorithm: rootNav === IDENTIFIER ? undefined : password.algorithm,
} as CascadeValue,
},
username: {
selection: { nav: userNav },
active: {
nav: userNav,
algorithm: forwarderPref ? null : usernamePref.algorithm,
algorithm: forwarderPref ? undefined : usernamePref.algorithm,
},
},
forwarder: {
@@ -435,6 +484,15 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
takeUntil(this.destroyed),
)
.subscribe(({ root, username, forwarder }) => {
this.log.debug(
{
root: root.selection,
username: username.selection,
forwarder: forwarder.selection,
},
"navigation updated",
);
// update navigation; break subscription loop
this.onRootChanged(root.selection);
this.username.setValue(username.selection, { emitEvent: false });
@@ -448,16 +506,16 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
// automatically regenerate when the algorithm switches if the algorithm
// allows it; otherwise set a placeholder
this.algorithm$.pipe(takeUntil(this.destroyed)).subscribe((a) => {
this.maybeAlgorithm$.pipe(takeUntil(this.destroyed)).subscribe((a) => {
this.zone.run(() => {
if (!a || a.onlyOnRequest) {
this.log.debug("autogeneration disabled; clearing generated credential");
this.generatedCredential$.next(null);
} else {
if (a?.capabilities?.autogenerate) {
this.log.debug("autogeneration enabled");
this.generate("autogenerate").catch((e: unknown) => {
this.log.error(e as object, "a failure occurred during autogeneration");
});
} else {
this.log.debug("autogeneration disabled; clearing generated credential");
this.generatedCredential$.next(undefined);
}
});
});
@@ -469,41 +527,6 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
this.ariaLive.announce(message).catch((e) => this.logService.error(e));
}
private typeToGenerator$(algorithm: CredentialAlgorithm) {
const dependencies = {
on$: this.generate$,
account$: this.account$,
};
this.log.debug({ algorithm }, "constructing generation stream");
switch (algorithm) {
case "catchall":
return this.generatorService.generate$(Generators.catchall, dependencies);
case "subaddress":
return this.generatorService.generate$(Generators.subaddress, dependencies);
case "username":
return this.generatorService.generate$(Generators.username, dependencies);
case "password":
return this.generatorService.generate$(Generators.password, dependencies);
case "passphrase":
return this.generatorService.generate$(Generators.passphrase, dependencies);
}
if (isForwarderIntegration(algorithm)) {
const forwarder = getForwarderConfiguration(algorithm.forwarder);
const configuration = toCredentialGeneratorConfiguration(forwarder);
const generator = this.generatorService.generate$(configuration, dependencies);
return generator;
}
this.log.panic({ algorithm }, `Invalid generator type: "${algorithm}"`);
}
/** Lists the top-level credential types supported by the component.
* @remarks This is string-typed because angular doesn't support
* structural equality for objects, which prevents `CredentialAlgorithm`
@@ -519,15 +542,20 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
protected forwarderOptions$ = new BehaviorSubject<Option<string>[]>([]);
/** Tracks the currently selected forwarder. */
protected forwarderId$ = new BehaviorSubject<IntegrationId>(null);
protected forwarderId$ = new BehaviorSubject<VendorId | null>(null);
/** Tracks forwarder control visibility */
protected showForwarder$ = new BehaviorSubject<boolean>(false);
/** tracks the currently selected credential type */
protected algorithm$ = new ReplaySubject<AlgorithmInfo>(1);
protected maybeAlgorithm$ = new ReplaySubject<AlgorithmMetadata | null>(1);
protected showAlgorithm$ = this.algorithm$.pipe(
/** tracks the last valid algorithm selection */
protected algorithm$ = this.maybeAlgorithm$.pipe(
filter((algorithm): algorithm is AlgorithmMetadata => !!algorithm),
);
protected showAlgorithm$ = this.maybeAlgorithm$.pipe(
combineLatestWith(this.showForwarder$),
map(([algorithm, showForwarder]) => (showForwarder ? null : algorithm)),
);
@@ -536,33 +564,32 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
* Emits the copy button aria-label respective of the selected credential type
*/
protected credentialTypeCopyLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ copy }) => copy),
map(({ i18nKeys: { copyCredential } }) => translate(copyCredential, this.i18nService)),
);
/**
* Emits the generate button aria-label respective of the selected credential type
*/
protected credentialTypeGenerateLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ generate }) => generate),
map(({ i18nKeys: { generateCredential } }) => translate(generateCredential, this.i18nService)),
);
/**
* Emits the copy credential toast respective of the selected credential type
*/
protected credentialTypeLabel$ = this.algorithm$.pipe(
filter((algorithm) => !!algorithm),
map(({ credentialType }) => credentialType),
map(({ i18nKeys: { credentialType } }) => translate(credentialType, this.i18nService)),
);
/** Emits hint key for the currently selected credential type */
protected credentialTypeHint$ = new ReplaySubject<string>(1);
protected credentialTypeHint$ = new ReplaySubject<string | undefined>(1);
/** tracks the currently selected credential category */
protected category$ = new ReplaySubject<string>(1);
protected category$ = new ReplaySubject<string | undefined>(1);
private readonly generatedCredential$ = new BehaviorSubject<GeneratedCredential>(null);
private readonly generatedCredential$ = new BehaviorSubject<GeneratedCredential | undefined>(
undefined,
);
/** Emits the last generated value. */
protected readonly value$ = this.generatedCredential$.pipe(
@@ -580,15 +607,20 @@ export class CredentialGeneratorComponent implements OnInit, OnChanges, OnDestro
* origin in the debugger.
*/
protected async generate(source: string) {
const request = { source, website: this.website };
const algorithm = await firstValueFrom(this.algorithm$);
const request: GenerateRequest = { source, algorithm: algorithm.id };
if (this.website) {
request.website = this.website;
}
this.log.debug(request, "generation requested");
this.generate$.next(request);
}
private toOptions(algorithms: AlgorithmInfo[]) {
private toOptions(algorithms: AlgorithmMetadata[]) {
const options: Option<string>[] = algorithms.map((algorithm) => ({
value: JSON.stringify(algorithm.id),
label: algorithm.name,
label: translate(algorithm.i18nKeys.name, this.i18nService),
}));
return options;