Feat/profile details plugin

docs/additional-verification/captcha.mdx

@@ -105,6 +105,10 @@
 });
 ```
 
+:::info no-title
+If you are using a captcha input that renders an input on the frontend, you will have to [disable the use of shadow DOM](/docs/references/frontend-sdks/prebuilt-ui/shadow-dom) when you initialize the SDK.
+:::
+
 ### 3. Customize the plugin
 
 By default, the plugin performs CAPTCHA validation on the following authentication flows:

docs/post-authentication/user-management/user-profile.mdx

@@ -0,0 +1,352 @@
+---
+title: Profile Management
+hide_title: true
+sidebar_position: 4
+description: Add comprehensive user profile management with customizable form fields and account information display using the profile details plugin
+page_type: tutorial
+---
+
+# User profile management
+
+## Overview
+
+This tutorial shows you how to add comprehensive user profile management to your **SuperTokens** authentication flows.
+The guide makes use of the `plugins` functionality which provides a complete profile management interface with customizable form fields, account information display, and automatic third-party data integration.
+
+The functionality integrates with the [progressive profiling plugin](/docs/post-authentication/user-management/progressive-profiling) by default.
+This allows you to:
+- Gradually collect user information through the progressive profiling flow
+- Display collected information in the profile details interface
+- Keep both systems synchronized automatically
+
+## Before you start
+
+The profile details plugin supports only the `React` and `NodeJS` SDKs.
+Support for other platforms is under active development.
+
+You need to start from a working **SuperTokens** setup with the profile base plugin already configured.
+If you haven't done that already, please refer to the [Quickstart Guides](/docs/quickstart/introduction).
+
+## Steps
+
+### 1. Initialize the backend plugin
+
+#### 1.1 Install the plugin
+
+```bash
+npm install @supertokens-plugins/profile-details-nodejs
+```
+
+#### 1.2 Update your backend SDK configuration
+
+The backend plugin exposes new endpoints which, in turn, get used by the frontend implementation.
+
+```typescript
+import SuperTokens from "supertokens-node";
+import ProfileDetailsPlugin from "@supertokens-plugins/profile-details-nodejs";
+
+SuperTokens.init({
+  appInfo: {
+    // your app info
+  },
+  recipeList: [
+    // your recipes (Session recipe is required)
+  ],
+  experimental: {
+    plugins: [
+      ProfileDetailsPlugin.init({
+        sections: [
+          {
+            id: "personal-details",
+            label: "Personal Information",
+            description: "Your personal details",
+            fields: [
+              {
+                id: "firstName",
+                label: "First Name",
+                type: "string",
+                required: true,
+                placeholder: "Enter your first name",
+              },
+              {
+                id: "lastName",
+                label: "Last Name",
+                type: "string",
+                required: true,
+                placeholder: "Enter your last name",
+              },
+              {
+                id: "company",
+                label: "Company",
+                type: "string",
+                required: false,
+                placeholder: "Enter your company name",
+              },
+            ],
+          },
+          {
+            id: "preferences",
+            label: "Preferences",
+            description: "Customize your experience",
+            fields: [
+              {
+                id: "avatar",
+                label: "Profile Picture",
+                type: "image-url",
+                required: false,
+                placeholder: "https://example.com/avatar.jpg",
+              },
+              {
+                id: "theme",
+                label: "Preferred Theme",
+                type: "select",
+                required: false,
+                options: [
+                  { value: "light", label: "Light" },
+                  { value: "dark", label: "Dark" },
+                  { value: "auto", label: "Auto" },
+                ],
+                defaultValue: "auto",
+              },
+            ],
+          },
+        ],
+        registerSectionsForProgressiveProfiling: true, // Optional: defaults to true
+      }),
+    ],
+  },
+});
+```
+
+##### Supported field types
+
+The plugin supports the following field types:
+
+| Field Type | Description | Value Type | Example Use Case |
+|------------|-------------|------------|------------------|
+| `string` | Single-line text input | `string` | Name, title, company |
+| `text` | Multi-line text area | `string` | Bio, description, comments |
+| `number` | Numeric input | `number` | Age, salary, experience |
+| `boolean` | Checkbox input | `boolean` | Newsletter subscription |
+| `toggle` | Toggle switch | `boolean` | Feature preferences |
+| `email` | Email input with validation | `string` | Contact email |
+| `phone` | Phone number input | `string` | Contact number |
+| `date` | Date picker | `string` (ISO 8601 format) | Birth date, start date |
+| `select` | Dropdown selection | `string` | Country, department, role |
+| `multiselect` | Multiple selection dropdown | `string[]` | Skills, interests, languages |
+| `password` | Password input | `string` | API keys, secure tokens |
+| `url` | URL input with validation | `string` | Website, social profiles |
+| `image-url` | Image URL input with preview | `string` | Profile picture, logo |
+
+##### Third-party data integration
+
+The plugin automatically integrates with third-party authentication providers to populate profile fields.
+When users sign in using external providers, the plugin maps provider data to profile fields (if the fields are configured):
+    - `firstName`: Maps from `name`, `given_name`, or `first_name`
+    - `lastName`: Maps from `family_name` or `last_name`
+    - `avatar`: Maps from `picture` or `avatar_url`
+
+:::info no-title
+You can customize how third-party data maps to your profile fields by overriding the function `getFieldValueFromThirdPartyUserInfo`.
+
+```typescript
+import ProfileDetailsPlugin from "@supertokens-plugins/profile-details-node";
+
+SuperTokens.init({
+  // ... other config
+  experimental: {
+    plugins: [
+      ProfileDetailsPlugin.init({
+        override: (oI) => ({
+          ...oI,
+          getFieldValueFromThirdPartyUserInfo: (providerId, field, rawUserInfoFromProvider, profile) => {
+	    return rawUserInfoFromProvider[field.id];
+          },
+        }),
+      }),
+    ],
+  },
+});
+```
+:::
+
+### 2. Initialize the frontend plugin
+
+#### 2.1 Install the plugin
+
+```bash
+npm install @supertokens-plugins/profile-details-react
+```
+
+#### 2.2 Update your frontend SDK configuration
+
+Initialize the frontend plugin in your existing configuration.
+With the following setup the `/user/profile` path renders the profile details page.
+
+```typescript
+import SuperTokens from "supertokens-auth-react";
+import ProfileDetailsPlugin from "@supertokens-plugins/profile-details-react";
+
+SuperTokens.init({
+  appInfo: {
+    // your app info
+  },
+  recipeList: [
+    // your recipes
+  ],
+  experimental: {
+    plugins: [
+      ProfileDetailsPlugin.init(),
+    ],
+  },
+});
+```
+
+:::info
+The user profile page gets rendered by default on the `/user/profile` path.
+If you want to change the path, you have to initialize the `profile-base-react` plugin with the `profilePagePath` option.
+
+```typescript
+import SuperTokens from "supertokens-auth-react";
+import ProfileBasePlugin from "@supertokens-plugins/profile-base-react";
+import ProfileDetailsPlugin from "@supertokens-plugins/profile-details-react";
+
+SuperTokens.init({
+  appInfo: {
+    // your app info
+  },
+  recipeList: [
+    // your recipes
+  ],
+  experimental: {
+    plugins: [
+      ProfileBasePlugin.init({
+        profilePagePath: "/user/profile",
+      }),
+      ProfileDetailsPlugin.init(),
+    ],
+  },
+});
+```
+:::
+
+### 3. Test the implementation
+
+Authenticate and then visit the `/user/profile` path.
+You should see the new interface that renders the profile data.
+
+<img
+	alt="Progressive profiling setup interface"
+	width="700px"
+	src="/img/user-profile.png"
+/>
+
+## Customization
+
+### Custom field components
+
+To add custom rendering behavior for fields you have to pass an override during plugin initialization.
+
+```typescript
+import ProfileDetailsPlugin from "@supertokens-plugins/profile-details-react";
+import { CustomStringInput, CustomStringView } from "./your-custom-components";
+
+SuperTokens.init({
+  // ... other config
+  experimental: {
+    plugins: [
+      ProfileDetailsPlugin.init({
+        override: (oI) => ({
+          ...oI,
+          fieldInputComponentMap: (originalMap) => ({
+            ...originalMap,
+            string: CustomStringInput,
+          }),
+          fieldViewComponentMap: (originalMap) => ({
+            ...originalMap,
+            string: CustomStringView,
+          }),
+        }),
+      }),
+    ],
+  },
+});
+```
+
+### Custom user interface
+
+To create your own UI you can use the `usePluginContext` hook.
+It exposes an interface which you can use to call the endpoints exposed by the backend plugin.
+
+```typescript
+import { usePluginContext } from "@supertokens-plugins/profile-details-react";
+
+function CustomProfileComponent() {
+  const { api, t, fieldInputComponentMap } = usePluginContext();
+  const [profile, setProfile] = useState(null);
+
+  const handleGetDetails = async () => {
+    const result = await api.getDetails();
+    if (result.status === "OK") {
+      setProfile(result.profile);
+    }
+  };
+
+  const handleUpdateProfile = async (data) => {
+    const result = await api.updateProfile({ data });
+    if (result.status === "OK") {
+      console.log("Profile updated successfully");
+    }
+  };
+
+  return (
+    <div>
+      <h2>{t("PL_CD_SECTION_ACCOUNT_LABEL")}</h2>
+      <button onClick={handleGetDetails}>Load Profile Details</button>
+      {/* Your custom form components */}
+    </div>
+  );
+}
+```
+
+## Next steps
+
+Besides profile details management, you can also explore other user management features:
+
+<ReferenceCard.Grid>
+  <ReferenceCard href="/docs/post-authentication/user-management/progressive-profiling">
+    <ReferenceCard.Title>
+      Progressive Profiling
+    </ReferenceCard.Title>
+    <ReferenceCard.Description>
+      Gradually collect user information through customizable forms.
+    </ReferenceCard.Description>
+  </ReferenceCard>
+
+  <ReferenceCard href="/docs/post-authentication/user-management/user-banning">
+    <ReferenceCard.Title>
+      User Banning
+    </ReferenceCard.Title>
+    <ReferenceCard.Description>
+      Implement user banning functionality to restrict access.
+    </ReferenceCard.Description>
+  </ReferenceCard>
+
+  <ReferenceCard href="/docs/additional-verification/user-roles/introduction">
+    <ReferenceCard.Title>
+      User Roles
+    </ReferenceCard.Title>
+    <ReferenceCard.Description>
+      Implement role-based access control for your users.
+    </ReferenceCard.Description>
+  </ReferenceCard>
+
+  <ReferenceCard href="/docs/references/plugins/introduction">
+    <ReferenceCard.Title>
+     Plugins Reference 
+    </ReferenceCard.Title>
+    <ReferenceCard.Description>
+     General information on how plugins work.
+    </ReferenceCard.Description>
+  </ReferenceCard>
+</ReferenceCard.Grid>

docs/references/plugins/captcha-react.mdx

@@ -489,7 +489,7 @@ Defined in: [supertokens-plugins/packages/captcha-react/src/types.ts:82](https:/
 ### EmailPasswordCaptchaPreAndPostAPIHookActions
 
 ```ts
-type EmailPasswordCaptchaPreAndPostAPIHookActions = Extract<EmailPasswordPreAndPostAPIHookAction, 
+type EmailPasswordCaptchaPreAndPostAPIHookActions = Extract<BaseFormSection, 
   | "EMAIL_PASSWORD_SIGN_UP"
   | "EMAIL_PASSWORD_SIGN_IN"
   | "SUBMIT_NEW_PASSWORD"
@@ -503,7 +503,7 @@ Defined in: [supertokens-plugins/packages/captcha-react/src/types.ts:50](https:/
 ### PasswordlessCaptchaPreAndPostAPIHookActions
 
 ```ts
-type PasswordlessCaptchaPreAndPostAPIHookActions = Extract<PasswordlessPreAndPostAPIHookAction, "PASSWORDLESS_CONSUME_CODE" | "PASSWORDLESS_CREATE_CODE">;
+type PasswordlessCaptchaPreAndPostAPIHookActions = Extract<BaseFormSection, "PASSWORDLESS_CONSUME_CODE" | "PASSWORDLESS_CREATE_CODE">;
 ```
 
 Defined in: [supertokens-plugins/packages/captcha-react/src/types.ts:66](https://github.com/supertokens/supertokens-plugins/blob/main/packages/captcha-react/src/types.ts#L66)