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:
- User Profile Widget: Enables users to manage their personal information, profile pictures, and authentication methods like passkeys, passwords, and TOTP.
- Applications Portal Widget: Provides users with a personalized dashboard of applications they have access to, allowing them to quickly navigate between different services.
- 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.
- Tenant Switcher Widget: Allows users who belong to more than one tenant to choose which tenant is active for their session, so tenant-scoped roles, data, and configuration apply in the correct context.
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.
The onReady callback is optional and can be used to handle the widget's ready state.
Trusted Devices
Note
Currently as an admin, you cannot see a user's trusted devices. Your end users can only see their own trusted devices through this widget.
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';
}}
/><user-profile
widgetId="user-profile-widget"
theme={theme} // light / dark / os (auto detect)
(ready)="onReady()"
(logout)="<your_logout_function>"
/><template>
<UserProfile
widget-id="user-profile-widget"
theme={theme} // light / dark / os (auto detect)
@ready="onReady"
@logout="onLogout"
/>
</template>
<script setup>
import { UserProfile } from '@descope/vue-sdk';
const onReady = () => {
console.log('Widget is ready');
}
const onLogout = () => (window.location.href = '/login');
</script>import { UserProfile } from '@descope/nextjs-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';
}}
/><!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://static.descope.com/npm/@descope/user-profile-widget@x.x.x/dist/index.js" />
<descope-user-profile-widget
project-id="{projectId}"
widget-id="user-profile-widget"
theme="{theme}" // light / dark / os (auto detect)
onReady={() => {
console.log('Widget is ready');
}}
/>
<script>
function onReady() {
console.log('Widget is ready');
}
const descopeWidgetEle = document.getElementsByTagName('descope-user-profile-widget')[0];
descopeWidgetEle.ready = onReady;
function onLogout(error) {
window.location.reload();
}
const descopeWidgetEle = document.getElementsByTagName('descope-user-profile-widget')[0];
descopeWidgetEle.logout = onLogout;
</script>
</body>
</html>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');
}}
/><template>
<ApplicationsPortal
widget-id="applications-portal-widget"
theme="light" // light / dark / os (auto detect)
@ready="onReady"
/>
</template>
<script setup>
import { ApplicationsPortal } from '@descope/vue-sdk';
const onReady = () => {
console.log('Widget is ready');
}
</script><applications-portal
widgetId="applications-portal-widget"
theme="light" // light / dark / os (auto detect)
(ready)="onReady()"
/>import { ApplicationsPortal } from '@descope/nextjs-sdk';
<ApplicationsPortal
widgetId="applications-portal-widget"
theme="light" // light / dark / os (auto detect)
onReady={() => {
console.log('Widget is ready');
}}
/>// replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/applications-portal-widget
<script src="https://static.descope.com/npm/@descope/applications-portal-widget@x.x.x/dist/index.js" />
<descope-applications-portal-widget
project-id="P2c0GgXKv4F3i4UnSViLiyqVzAVT"
widget-id="applications-portal-widget"
theme="light" // light / dark / os (auto detect)
onReady={() => {
console.log('Widget is ready');
}}
/>
<script>
function onReady() {
console.log('Widget is ready');
}
const descopeWidgetEle = document.getElementsByTagName('descope-applications-portal-widget')[0];
descopeWidgetEle.ready = onReady;
</script>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');
}}
/><template>
<OutboundApplications
widget-id="outbound-applications-widget"
theme="light" // light / dark / os (auto detect)
@ready="onReady"
/>
</template>
<script setup>
import { OutboundApplications } from '@descope/vue-sdk';
const onReady = () => {
console.log('Widget is ready');
}
</script><outbound-applications
widgetId="outbound-applications-widget"
theme="light" // light / dark / os (auto detect)
(ready)="onReady()"
/>import { OutboundApplications } from '@descope/nextjs-sdk';
<OutboundApplications
widgetId="outbound-applications-widget"
theme="light" // light / dark / os (auto detect)
onReady={() => {
console.log('Widget is ready');
}}
/>// replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/outbound-applications-widget
<script src="https://static.descope.com/npm/@descope/outbound-applications-widget@x.x.x/dist/index.js" />
<descope-outbound-applications-widget
project-id="__ProjectID__"
widget-id="outbound-applications-widget"
theme="light" // light / dark / os (auto detect)
onReady={() => {
console.log('Widget is ready');
}}
/>
<script>
function onReady() {
console.log('Widget is ready');
}
const descopeWidgetEle = document.getElementsByTagName('descope-outbound-applications-widget')[0];
descopeWidgetEle.ready = onReady;
</script>Tenant Switcher Widget
The Tenant Switcher Widget lets signed-in users switch their active tenant when they are associated with multiple tenants. After a selection, the session reflects the chosen tenant (for example, the dct claim on the JWT), similar in effect to choosing a tenant with the Switch Tenant flow component.
Create the widget from the Tenant Switcher template on the Widgets page in the Descope Console, then pass that widget's ID to widgetId (the examples below use the template default tenant-switcher-widget).
You cannot modify any underlying behavior of the tenant switcher widget components, as there are no default flows to modify.
import { UserProfile } from '@descope/react-sdk';
<UserProfile
widgetId="tenant-switcher-widget"
theme="light" // light / dark / os (auto detect)
styleId="" // optional style id
onLogout={() => {
// add here you own logout callback
window.location.href = '/login';
}}
/><template>
<UserProfile
widget-id="tenant-switcher-widget"
theme="light" // light / dark / os (auto detect)
style-id="" // optional style id
@logout="onLogout"
/>
</template>
<script setup>
import { UserProfile } from '@descope/vue-sdk';
const onLogout = () => (window.location.href = '/login');
</script><user-profile
widgetId="tenant-switcher-widget"
theme="light" // light / dark / os (auto detect)
styleId="" // optional style id
(logout)="<your_logout_function>"
/>import { UserProfile } from '@descope/nextjs-sdk';
<UserProfile
widgetId="tenant-switcher-widget"
theme="light" // light / dark / os (auto detect)
styleId="" // optional style id
onLogout={() => {
// add here you own logout callback
window.location.href = '/login';
}}
/>// replace x.x.x with the latest release of the widget: https://www.npmjs.com/package/@descope/user-profile-widget
<script src="https://static.descope.com/npm/@descope/user-profile-widget@x.x.x/dist/index.js" />
<descope-user-profile-widget
project-id="__ProjectID__"
widget-id="tenant-switcher-widget"
theme="light" // light / dark / os (auto detect)
style-id="" // optional style id
/>
<script>
function onLogout(error) {
window.location.reload();
}
const descopeWidgetEle = document.getElementsByTagName('descope-user-profile-widget')[0];
descopeWidgetEle.logout = onLogout;
</script>