Support custom fields in user-profile-widget

packages/sdks/react-sdk/tsconfig.json

@@ -18,5 +18,5 @@
     "typeRoots": ["./node_modules/@types", "./node_modules/@types/react"]
   },
   "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "build", "dist", "test", "examples"]
+  "exclude": ["node_modules", "build", "dist", "test"]
 }

packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initComponentsMixins/initUserCustomAttributesMixin.ts

@@ -0,0 +1,41 @@
+import { UserAttributeDriver } from '@descope/sdk-component-drivers';
+import { compose, createSingletonMixin } from '@descope/sdk-helpers';
+import { loggerMixin } from '@descope/sdk-mixins';
+import { getUserCustomAttrs } from '../../../state/selectors';
+import { stateManagementMixin } from '../../stateManagementMixin';
+import { initWidgetRootMixin } from './initWidgetRootMixin';
+
+export const initUserCustomAttributesMixin = createSingletonMixin(
+  <T extends CustomElementConstructor>(superclass: T) =>
+    class UserCustomAttributesMixinClass extends compose(
+      stateManagementMixin,
+      loggerMixin,
+      initWidgetRootMixin,
+    )(superclass) {
+      customValueUserAttr: UserAttributeDriver;
+
+      #initCustomValueUserAttrs() {
+        const allCustomAttributesComponents = this.shadowRoot?.querySelectorAll(
+          'descope-user-attribute[data-id^="customAttributes."]',
+        );
+
+        Array.from(allCustomAttributesComponents).forEach((nodeEle) => {
+          const attrName = nodeEle.getAttribute('data-id');
+          const customAttrName = attrName.replace('customAttributes.', '');
+
+          const compInstance = new UserAttributeDriver(nodeEle, {
+            logger: this.logger,
+          });
+
+          const userCustomAttributesData = getUserCustomAttrs(this.state);
+          compInstance.value = userCustomAttributesData[customAttrName];
+        });
+      }
+
+      async onWidgetRootReady() {
+        await super.onWidgetRootReady?.();
+
+        this.#initCustomValueUserAttrs();
+      }
+    },
+);

packages/widgets/user-profile-widget/src/lib/widget/mixins/initMixin/initMixin.ts

@@ -1,13 +1,14 @@
 import { compose, createSingletonMixin } from '@descope/sdk-helpers';
 import { debuggerMixin, themeMixin } from '@descope/sdk-mixins';
+import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin';
 import { initAvatarMixin } from './initComponentsMixins/initAvatarMixin';
 import { initEmailUserAttrMixin } from './initComponentsMixins/initEmailUserAttrMixin';
+import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin';
 import { initNameUserAttrMixin } from './initComponentsMixins/initNameUserAttrMixin';
-import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin';
 import { initPasskeyUserAuthMethodMixin } from './initComponentsMixins/initPasskeyUserAuthMethodMixin';
 import { initPasswordUserAuthMethodMixin } from './initComponentsMixins/initPasswordUserAuthMethodMixin';
-import { initLogoutMixin } from './initComponentsMixins/initLogoutMixin';
-import { flowRedirectUrlMixin } from '../flowRedirectUrlMixin';
+import { initPhoneUserAttrMixin } from './initComponentsMixins/initPhoneUserAttrMixin';
+import { initUserCustomAttributesMixin } from './initComponentsMixins/initUserCustomAttributesMixin';
 
 export const initMixin = createSingletonMixin(
   <T extends CustomElementConstructor>(superclass: T) =>
@@ -16,6 +17,7 @@ export const initMixin = createSingletonMixin(
       debuggerMixin,
       themeMixin,
       flowRedirectUrlMixin, // This mixin must be before all other mixins that loads flows
+      initUserCustomAttributesMixin,
       initEmailUserAttrMixin,
       initAvatarMixin,
       initNameUserAttrMixin,

packages/widgets/user-profile-widget/src/lib/widget/state/selectors.ts

@@ -17,3 +17,8 @@ export const getIsPhoneVerified = createSelector(
 );
 export const getHasPasskey = createSelector(getMe, (me) => me.webauthn);
 export const getHasPassword = createSelector(getMe, (me) => me.password);
+
+export const getUserCustomAttrs = createSelector(
+  getMe,
+  (me) => me.customAttributes,
+);