New widgets available for user profiles and organization switching

Building essential components for your enterprise app can be a pain. Things like building a user profile page are crucial for any dashboard, but they’re often tedious and time-consuming to build from scratch.

That’s why, a few months ago, we launched WorkOS Widgets: ready-to-use components that supply the frontend and backend functionality for common enterprise app workflows.

Today, we are releasing four new widgets:

• User profile
• User security
• User sessions
• Organization switcher

These drop-in ready-to-use (and free to all AuthKit customers) components will allow you to skip the boring, repetitive work and focus on what truly matters.

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.

New widget: UserProfile

The <UserProfile /> widget provides a convenient way to display key user information, such as their profile picture, name, email, and connected accounts.

To use this widget, install the package with npm install @workos-inc/widgets and add the following code in your app to display your list of users.

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

// authToken is a widget token that was fetched in your backend (see docs)
function App({authToken}) {
  return (
    <WorkOsWidgets>
      <UserProfile authToken={token} />
    </WorkOsWidgets>
  )
}
	

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.‍

New widget: UserSecurity

The <UserSecurity /> widget allows a user to:

• Update their password
• Manage their multi-factor authentication (MFA) options

To use this widget, install the package with `npm install @workos-inc/widgets` and add the following code in your app.

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

// authToken is a widget token that was fetched in your backend (see docs)
function App({authToken}) {
  return (
    <WorkOsWidgets>
      <UserSecurity authToken={token} />
    </WorkOsWidgets>
  )
}
	

Because WorkOS widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin, as we saw earlier.

New widget: UserSessions

The <UserSessions /> widget allows a user to:

• View their active sessions
• Sign out of individual sessions
• Sign out from all other sessions

To use this widget, install the package with npm install @workos-inc/widgets and add the following code in your app.

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

// authToken is a widget token that was fetched in your backend (see docs)
function App({authToken}) {
  return (
    <WorkOsWidgets>
      <UserSessions authToken={token} />
    </WorkOsWidgets>
  )
}
	

Because WorkOS widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin, as we saw earlier.

New widget: OrganizationSwitcher

An organization switcher allows users to easily switch between different organizations or accounts within an app. It’s commonly used when a user has access to multiple organizations, such as different teams, clients, or projects, and needs to quickly toggle between them. The switcher typically ensures the right permissions and access for each organization, streamlining the user experience.

Our new <OrganizationSwitcher /> makes switching between different organizations simpler than ever.

To use this widget, install the package with npm install @workos-inc/widgets and add the following code in your app.

	
import { useAuth } from '@workos-inc/authkit-react';
import { OrganizationSwitcher, WorkOsWidgets } from '@workos-inc/widgets';
import { CreateOrganization } from '~/app/components/CreateOrganization';

export function OrganizationSwitcherWrapper() {
  const { getAccessToken, switchToOrganization } = useAuth();

  return (
    <WorkOsWidgets>
      <OrganizationSwitcher
        authToken={getAccessToken}
        switchToOrganization={switchToOrganization}
      />
    </WorkOsWidgets>
  );
}
	

Because WorkOS widgets issue client-side requests to WorkOS, it is necessary to configure your site as an allowed web origin, as we saw earlier.

That’s it, your widget is ready to use!

In this example, there are two organizations that a user can choose: WorkOS or Foo Corp.

When you switch to another organization, the widget communicates with the WorkOS API to authenticate you into the new organization and retrieve a fresh authentication token. This ensures that you have valid access rights for the new organization.

For example, if you're logged into the Webflow organization through their SSO and decide to switch to Vercel, you’ll be prompted to authenticate with Vercel before the switch can be completed successfully. This additional authentication step ensures security and that you’re granted the proper permissions for the new organization, keeping the transition seamless and secure.

Customize the UI

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

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

More to come

We are excited to release this next batch of Widgets to add to the existing User Management widget. We will continue to add more widgets in the future. Get in touch and let us know which Widgets would be most useful for your app!