@workos/mcp-docs-server 0.1.0 → 0.2.0

package/.docs/organized/docs/user-management/widgets.mdx

@@ -1,190 +0,0 @@
----
-title: WorkOS Widgets
-description: Learn how to integrate WorkOS Widgets in your app.
-showNextPage: true
-originalPath: .tmp-workos-clone/packages/docs/content/user-management/widgets.mdx
----
-
-## Introduction
-
-WorkOS Widgets are React components that provide complete functionality for common enterprise app workflows, for example a Users Management Widget that provides a UI for inviting, removing and editing users.
-
-This guide will cover how to add a widget to your app, configure CORS, and supply an authorization token for the widget.
-
-## Integrating
-
-First, install the `@workos-inc/widgets` package from the npm registry, along with its peer dependencies:
-
-```bash title="Install packages"
-npm install @workos-inc/widgets @radix-ui/themes @tanstack/react-query
-```
-
-### CORS configuration
-
-Because WorkOS widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin. Adding this in the [Authentication section of the dashboard](https://dashboard.workos.com/) will prevent CORS issues when using the widget.
-
-![CORS configuration](https://images.workoscdn.com/images/deb27664-e2e1-4c3b-afa1-e8ba2578c77c.png?auto=format&fit=clip&q=50)
-
-### Tokens
-
-Widgets must be supplied with an authorization token. The token can be acquired in one of two ways:
-
-- If you are using the `authkit-js` or `authkit-react` libraries, you can use the provided access token.
-- If you use one of our backend SDKs, use the "get token" method in the SDK to request a token with the appropriate scope for the widget you want to use. Widget tokens expire after one hour.
-
-<CodeBlock file="widgets-get-token" />
-
-> New WorkOS accounts are created with an "Admin" role that has all Widget permissions assigned. Existing accounts will need to assign the proper permissions to a role. This can be done on the "Roles" page of the WorkOS Dashboard. See the [Roles and Permissions guide](/user-management/roles-and-permissions) for more information.
-
-To successfully generate a token, the user must be assigned a role with the correct permissions for the widget.
-
-## Styling
-
-### Radix Themes
-
-WorkOS Widgets are powered by Radix Themes, which are styled out-of-the-box when you import its CSS in your app. You'll also need to import an additional CSS file from the WorkOS Widgets package to get everything looking just right.
-
-<CodeBlock language="js" file="widgets-radix-import" />
-
-You can customize Widgets by passing a `theme` prop to `WorkOSWidgets`. This prop accepts an object with the same options as [Radix themes](https://www.radix-ui.com/themes/docs/components/theme#api-reference).
-
-<CodeBlock
-  title="Theme customization"
-  file="theme-customization"
-  language="js"
-/>
-
-### CSS
-
-If you choose not to use the theming capabilities in Radix Themes, you can style Widgets using CSS. We recommend starting with the `layout.css` stylesheet from Radix Themes, as well as the `base.css` stylesheet from WorkOS Widgets. These styles provide a base level of functional styling without opinionated design choices.
-
-<CodeBlock language="js" file="widgets-css-imports" />
-
-Individual elements in Radix themes are accessible via CSS class selectors prefixed with `woswidgets-`. For example, you can add your own button styles by selecting the `woswidgets-button` class.
-
-<CodeBlock
-  title="CSS customization"
-  file="widgets-css-customization"
-  language="css"
-/>
-
-## User Management
-
-![Users Management screenshot](https://images.workoscdn.com/images/20f235c5-c888-48f5-90aa-87ec9189483a.png?auto=format&fit=clip&q=50)
-
-The `<UsersManagement />` widget allows an organization admin to manage the members in an org. Admins can invite new users, remove users, and change roles all within the widget.
-
-In order to use the User Management widget, a user must have a role that has the `widgets:users-table:manage` permission.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-usersmanagement-token"
-    title="Widget Token"
-  />
-  <CodeBlockTab
-    language="js"
-    file="widget-usersmanagement-authkit-react"
-    title="Access Token"
-  />
-</CodeBlock>
-
-## Organization Switcher
-
-The `<OrganizationSwitcher />` widget allows an organization admin to switch between organizations. There are no special permissions required to use this widget as users can switch between organizations they have access to. If an organization requires SSO or MFA, the user will be redirected to reauthorize with the new organization.
-
-![Organization Switcher screenshot](https://images.workoscdn.com/images/e22cad7a-f11a-4f47-8cc7-fb015a22114f.png?auto=format&fit=clip&q=80)
-
-### Switching Organizations
-
-There are multiple ways to integrate with the Organization Switcher widget depending on your library choice. If you are using either the `authkit-js` or `authkit-react` libraries, you can use the `useAuth` hook to get the current organization and pass it to the widget.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-organization-switcher-authkit-react"
-    title="React Library"
-  />
-</CodeBlock>
-
-If you are using one of the backend SDKs, you can build the organization switcher action in the backend and pass it in as a prop to the widget to be called when the user attempts to switch organizations. See the [Switching Organizations](/user-management/sessions/integrating-sessions/switching-organizations) guide for more information to set up the backend actions. This can then be passed in as a prop to the widget.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-organization-switcher-backend"
-    title="Backend Handling"
-  />
-</CodeBlock>
-
-### Creating Organizations
-
-The widget accepts children components that can be used to either redirect the user to create an organization or to show a modal with a form to create an organization. You can use this to integrate with your existing organization creation flow that uses the WorkOS APIs to create organizations.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-organization-switcher-create-authkit-react"
-    title="Create Organization"
-  />
-</CodeBlock>
-
-## User Profile
-
-The `<UserProfile />` widget allows users to view and manage their personal information.
-Users can see their profile details and edit their display name.
-This widget provides a simple, user-friendly interface for basic profile management.
-
-No special permissions are required to use this widget.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-userprofile-token"
-    title="Widget Token"
-  />
-  <CodeBlockTab
-    language="js"
-    file="widget-userprofile-authkit-react"
-    title="Access Token"
-  />
-</CodeBlock>
-
-## User Sessions
-
-The `<UserSessions />` widget provides users with visibility into their active sessions across different devices and browsers. Users can view session details and sign out of individual sessions as needed. No special permissions are required to use this widget.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-usersessions-token"
-    title="Widget Token"
-  />
-  <CodeBlockTab
-    language="js"
-    file="widget-usersessions-authkit-react"
-    title="Access Token"
-  />
-</CodeBlock>
-
-## User Security
-
-The `<UserSecurity />` widget enables users to control their security settings. With this widget, users can:
-
-- Set or change their password
-- Configure and reset Multi-Factor Authentication
-
-No special permissions are required to use this widget.
-
-<CodeBlock>
-  <CodeBlockTab
-    language="js"
-    file="widget-usersecurity-token"
-    title="Widget Token"
-  />
-  <CodeBlockTab
-    language="js"
-    file="widget-usersecurity-authkit-react"
-    title="Access Token"
-  />
-</CodeBlock>