User Widgets

Descope User Widgets provide self-service components that empower your end-users to manage their own profiles and authentication methods, and access their applications. These widgets enable a seamless user experience by allowing users to handle their own account settings and preferences directly within your application.

Overview

User Widgets are designed to give end-users control over their own data and access:

1. User Profile Widget: Enables users to manage their personal information, profile pictures, and authentication methods like passkeys, passwords, and TOTP.
2. Applications Portal Widget: Provides users with a personalized dashboard of applications they have access to, allowing them to quickly navigate between different services.
3. Outbound Applications Widget: Provides users with a list of outbound applications they are managing tokens with, and allowing them to connect to each of them directly from a widget.

User Profile Widget

The widget enables your end users to:

• Update user profile picture
• Update user personal information (name, phone, email, given name, middle name, family name)
• Update authentication methods (passkey, password, TOTP)
• See and sign out of all trusted devices
• Logout

You can modify the behavior of the user profile widget functions by modifying the default flows for each component in the widget. You cannot, however, add custom buttons to the widget.

Trusted Devices

Users can see all of the trusted devices associated with their user account, and sign out of any of them.

import { UserProfile } from '@descope/react-sdk';
...
  <UserProfile
    widgetId="user-profile-widget"
    theme={theme} // light / dark / os (auto detect)
    onReady={() => {
      console.log('Widget is ready');
    }}
    onLogout={() => {
      // add here you own logout callback
      window.location.href = '/login';
    }}
  />

Applications Portal Widget

The Applications Portal Widget provides a place for users to access all of the Federated Applications they are associated with. The widget automatically displays only the apps that the user has access to.

You cannot modify any underlying behavior of the applications portal widget components, as there are no default flows to modify.

import { ApplicationsPortal } from '@descope/react-sdk';
 
<ApplicationsPortal
	widgetId="applications-portal-widget"
	theme="light" // light / dark / os (auto detect)
    onReady={() => {
      console.log('Widget is ready');
    }}
/>

Outbound Applications Widget

The Outbound Applications Widget provides a list of Outbound Applications a user is associated with, and allows them to connect to each of them directly from a widget.

The user will see outbound apps that are associated with their tenant, or available to the whole project, as well as whether or not they have already connected to the app.

You cannot modify any underlying behavior of the outbound applications widget components, as there are no default flows to modify.

import { OutboundApplications } from '@descope/react-sdk';
 
<OutboundApplications
	widgetId="outbound-applications-widget"
	theme="light" // light / dark / os (auto detect)
    onReady={() => {
      console.log('Widget is ready');
    }}
/>