Widgets — ready-made components for complete enterprise features

Today, we are launching WorkOS Widgets: ready-to-use components that supply the frontend and backend functionality for common enterprise app workflows. Widgets are now available for free to all AuthKit customers.

In this article, we will see what Widgets are and how you can integrate them into your app with a few lines of code.

What are WorkOS Widgets?

Building an app requires implementing a lot of tedious functionality:

• A page to manage which users belong to an organization.
• A user profile page.
• A way for users to manage their 2nd authentication factors.
• An organization switcher.
• And many more.

To help you build more things faster, we built WorkOS Widgets.

Widgets provide the full product experience for a feature. They interact directly with the WorkOS API and render the results in your app through React components. You get both the backend and the frontend implementation with a few lines of code.

Built on Radix

WorkOS Widgets are React components built with Radix. They are accessible, look great, and plug into your app like any other React component.

Our first Widget: <UsersManagement />

Admins in your app need a way to perform certain actions for their organization:

• See the list of users that have access to the org.
• Remove users that should no longer have access.
• Change what role a user has.
• Invite new users (with the ability to re-send and revoke invitations).

Building this all out can take days or weeks.

Now, you can use the <UsersManagement /> Widget and get all of the above functionality with a few lines of code. Let’s see how you can do just that.

Step 1: Install the Widget

Install the Widget with npm install @workos-inc/widgets.

Step 2: Add the component in your app

Add the following code in your app to display your list of users.

import { UsersManagement, WorkOsWidgets } from "@workos-inc/widgets";

// authToken is a widget token that was fetched in your backend (see docs)
function UserTable({authToken}) {
  return (
    <WorkOSWidgets>
      <UsersManagement authToken={token} />
    </WorkOSWidgets>
  )
}

Step 3: Set up CORS

Because WorkOS Widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin. This can be done in the “Authentication” section of the dashboard.‍

Step 4 (optional): Customize the UI

You can customize the UI using CSS or Radix themes to match your app’s aesthetics.

For more info on how to use Widgets, see the docs.

More to come

We are excited to release this first Widget, and we will be adding more in the future. Get in touch and let us know which Widgets would be most useful for your app.