Skip to content
Kumiko

user-profile

Self-service account page building blocks: a change-email write handler (re-auth via current password, uniqueness check, resets emailVerified and expects the app to trigger the verification flow) plus the ProfileScreen web component that composes change-password (auth-email-password), change-email and account deletion (user-data-rights request/cancel with grace period) into one screen. Apps register the screen as type: "custom" with __component: "UserProfileScreen". Requires user, auth-email-password, and user-data-rights.

Quick example

Section titled “Quick example”

From recipes-user-profile — the smallest working mount:

// user-profile Recipe — zeigt das App-Wiring für die Self-Service-
// Kontoseite: das bundled feature liefert Handler (change-email) +
// ProfileScreen-Komponente + i18n; die App deklariert den Screen als
// `custom` mit der __component-Convention und hängt ihn in die Nav.
//
// Client-seitig registriert die App die Komponente im Renderer-Mount:
//   import { ProfileScreen, userProfileClient } from
//     "@cosmicdrift/kumiko-bundled-features/user-profile/web";
//   createKumikoApp({
//     components: { UserProfileScreen: ProfileScreen },
//     clientFeatures: [emailPasswordClient(), userProfileClient()],
//   })


import { createAuthEmailPasswordFeature } from "@cosmicdrift/kumiko-bundled-features/auth-email-password";
import { authFoundationFeature } from "@cosmicdrift/kumiko-bundled-features/auth-foundation";
import { createComplianceProfilesFeature } from "@cosmicdrift/kumiko-bundled-features/compliance-profiles";
import { createConfigFeature } from "@cosmicdrift/kumiko-bundled-features/config";
import { createDataRetentionFeature } from "@cosmicdrift/kumiko-bundled-features/data-retention";
import { createFilesFeature } from "@cosmicdrift/kumiko-bundled-features/files";
import { createPersonalAccessTokensFeature } from "@cosmicdrift/kumiko-bundled-features/personal-access-tokens";
import { createSessionsFeature } from "@cosmicdrift/kumiko-bundled-features/sessions";
import { createTenantFeature } from "@cosmicdrift/kumiko-bundled-features/tenant";
import { createUserFeature } from "@cosmicdrift/kumiko-bundled-features/user";
import { createUserDataRightsFeature } from "@cosmicdrift/kumiko-bundled-features/user-data-rights";
import { createUserDataRightsDefaultsFeature } from "@cosmicdrift/kumiko-bundled-features/user-data-rights-defaults";
import { createUserProfileFeature } from "@cosmicdrift/kumiko-bundled-features/user-profile";
import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";


export function createAccountFeature(): FeatureDefinition {
  return defineFeature("account", (r) => {
    r.describe(
      "App-side wiring for the user-profile bundled feature: declares the " +
        "profile screen (custom renderer, __component UserProfileScreen) and " +
        "its nav entry.",
    );
    r.requires("user-profile");


    r.screen({
      id: "profile",
      type: "custom",
      renderer: { react: { __component: "UserProfileScreen" } },
    });
    r.nav({
      id: "profile",
      label: "account:nav.profile",
      icon: "user",
      screen: "account:screen:profile",
      order: 90,
    });


    return {};
  });
}


/** Volle Feature-Komposition inkl. der user-profile-Require-Kette
 *  (user-data-rights → data-retention + compliance-profiles + sessions). */
export function composeAccountApp(): FeatureDefinition[] {
  return [
    createConfigFeature(),
    createUserFeature(),
    createTenantFeature(),
    createAuthEmailPasswordFeature(),
    createDataRetentionFeature(),
    createComplianceProfilesFeature(),
    authFoundationFeature,
    createPersonalAccessTokensFeature({ scopes: {} }),
    createSessionsFeature(),
    createFilesFeature(),
    createUserDataRightsFeature(),
    // registers the default export/erase hooks for core PII entities (user,
    // fileRef, folder) so the GDPR boot gate (V3) is satisfied for the stack.
    createUserDataRightsDefaultsFeature(),
    createUserProfileFeature(),
    createAccountFeature(),
  ];
}

📄 On GitHub: samples/recipes/user-profile/src/feature.ts

Live preview

Section titled “Live preview”
user-profile feature preview

How it fits

Section titled “How it fits”

What this feature needs to run (Requires, top) and the write commands it provides (Provides, bottom).

flowchart TB
  n_user_profile["user-profile"]
  subgraph how_reqs["Requires"]
    n_user["user"]
    n_auth_email_password["auth-email-password"]
    n_user_data_rights["user-data-rights"]
  end
  subgraph how_provides["Provides"]
    n_cmd_user_profile_write_change_email(["change-email"])
  end
  n_user --> n_user_profile
  n_auth_email_password --> n_user_profile
  n_user_data_rights --> n_user_profile
  n_user_profile --> n_cmd_user_profile_write_change_email

Provides — write commands this feature registers (dispatch them through the command bus):

Getting started

Section titled “Getting started”

Start with recipes-user-profile for a step-by-step walkthrough with runnable code and integration tests.

Dependencies

Section titled “Dependencies”