> **Building with AI coding agents?** Install the authstack plugin with one command. This equips your agent with accurate Scalekit implementation patterns. > > **Recommended**: > ```bash > npx @scalekit-inc/cli setup > ``` > > Global: > ```bash > npm install -g @scalekit-inc/cli > scalekit setup > ``` > > Supports Claude Code, Cursor, GitHub Copilot, Codex + skills for 40+ agents. > Features: full-stack-auth, agent-auth, mcp-auth, modular-sso, modular-scim. > [Full setup guide](https://docs.scalekit.com/dev-kit/build-with-ai/) --- # Hosted UI widgets Redirect users to a branded self-serve portal for organization settings, member management, SSO, SCIM, domains, and user profiles. Your customers, especially workspace administrators, want to manage organizations and users for their members. Scalekit provides **Hosted UI widgets**, a ready-made, branded portal at `/ui/`, so they can do this themselves without you building custom admin UIs. To integrate hosted widgets, redirect your organization members to the Hosted Widgets URL: ```sh title="Hosted widgets URL" showLineNumbers=false frame /ui/ # https://your-app-env.scalekit.com/ui/ ``` Scalekit verifies the organization member's access permissions and automatically controls what they can access in the widgets. The widgets inherit your application's [branding](/fsa/guides/login-page-branding/) and support your [custom domain](/guides/custom-domain/). ```d2 pad=56 layout=elk direction: down your_app: "Your B2B app" { style.font-size: 22 } hosted: "Hosted widgets URL\n/ui/" { style.font-size: 22 width: 720 } auth_widgets: "Authentication widgets\n- Signup\n- Login" { style.font-size: 20 width: 320 } user_widgets: "User widgets\n- User profile\n- User security" { style.font-size: 20 width: 320 } org_widgets: "Organization widgets\n- Organization settings\n- Member management\n- SSO configuration\n- SCIM configuration\n- Domain verification\n- Session policy" { style.font-size: 20 width: 420 } your_app -> hosted: "Redirect" hosted -> auth_widgets hosted -> user_widgets hosted -> org_widgets ``` ## When to use Hosted UI widgets Use Hosted UI widgets when you want customers to self-manage their organizations and accounts without you building custom UIs. - **Advantages**: Enterprise customers can self-serve member management, SSO setup, SCIM provisioning, domain verification, session policy, and their own profiles. Permissions and feature entitlements are handled automatically. The portal stays up to date with new Scalekit capabilities. - **Trade-offs**: If you build equivalent UIs yourself, you must implement the full set of management screens, enforce the corresponding permissions, and keep the interfaces current as features evolve. - **Custom frontends**: You can use Hosted UI widgets even if you handle login and signup in your own frontend. After users complete authentication through your flow, redirect them to the widgets portal for self-service. ## Signup/login widgets Signup and login widgets give users an entry point to authentication before they access the rest of Hosted Widgets. Use these pages as managed, branded auth screens without building custom UI. 1. ### Redirect your customers to Scalekit's auth endpoint Pass `prompt` in the authorization URL to decide which hosted auth screen appears for your customers. ### Login ```sh title="Authorization URL (login)" showLineNumbers=false frame /oauth/authorize? response_type=code& client_id=& redirect_uri=& scope=openid+profile+email+offline_access& state=& prompt=login ``` Pass `prompt=login` to show the login page. Your customers will land on `/a/auth/login`. > Image: Login page of coffee desk app ### Signup ```sh title="Authorization URL (signup)" showLineNumbers=false frame /oauth/authorize? response_type=code& client_id=& redirect_uri=& scope=openid+profile+email+offline_access& state=& prompt=create ``` Pass `prompt=create` to show the signup page. Your customers will land on `/a/auth/signup`. > Image: Coffee desk signup page For complete URL parameters and SDK examples, see [Initiate user signup or login](/authenticate/fsa/implement-login/). ## Organization widgets Organization widgets let your customers manage their organization's settings, members, and configurations. These widgets are access-controlled using Scalekit permissions and feature entitlements. A widget appears only if the user has the required permissions and the organization has the corresponding feature enabled. 1. ### Manage organization settings Your customers can view and manage their organization profile, including allowed email domains. Navigate to **Organization settings** to update organization details. > Image: Organization settings widget showing the organization name field and a list of allowed email domains 2. ### Manage organization members Your customers can view organization members, invite new members, manage roles, and remove members from the organization. The **Member management** widget provides a complete view of their team. > Image: Member management widget listing organization users with their roles and active status, plus an Invite User button 3. ### Configure SSO for the organization Your customers can set up and manage Single Sign-On for their organization. The widget includes a setup guide tailored to their identity provider, making it easy to connect their SSO connection. > Feature entitlement required > > SSO widget visibility depends on the organization's feature entitlements. It appears only if SSO is enabled for the organization. You can enable SSO in the Scalekit dashboard or using the [SDK](/authenticate/auth-methods/enterprise-sso/#enable-sso-for-the-organization). > Image: Single Sign-On widget prompting the user to choose an identity provider such as Okta, OneLogin, Google Workspace, or Entra ID 4. ### Configure SCIM for the organization Your customers can set up and manage SCIM provisioning for their organization. The widget includes a setup guide tailored to their identity provider to automate user and group provisioning. > Feature entitlement required > > SCIM widget visibility depends on the organization's feature entitlements. It appears only if SCIM is enabled for the organization. You can enable SCIM in the Scalekit dashboard or using the [SDK](/guides/user-management/scim-provisioning/#enable-scim-provisioning-for-the-organization). > Image: SCIM provisioning widget prompting the user to select a directory provider such as Okta, OneLogin, Google Workspace, or Entra ID 5. ### Verify organization domains Your customers can add and verify the domains they own, enabling Home Realm Discovery and SCIM provisioning for their organization. [Learn more](/authenticate/manage-users-orgs/organization-domains/) After entering a domain, the widget displays the DNS TXT record to publish. Scalekit verifies ownership in the background and marks the domain as verified once the record propagates. > Feature entitlement required > > Domain verification widget visibility depends on the organization’s feature entitlements. It appears only if **Domain Verification** is enabled for the organization. You can enable Domain Verification in the Scalekit dashboard or or via the [organization settings API](/apis/#tag/organizations/PATCH/api/v1/organizations/{id}/settings). > Image: Domain verification via hosted widgets 6. ### Manage session policy Your customers can view and configure their organization's session policy, setting custom absolute and idle session timeouts that override your application defaults. Scalekit always enforces the stricter of the two. > Feature entitlement required > > Session policy widget visibility depends on the organization's feature entitlements. It appears only if the **Session Policy** feature is enabled for the organization. You can enable it in the Scalekit dashboard or using the [organization settings API](/apis/#tag/organizations/PATCH/api/v1/organizations/{id}/settings). > Image: Session policy widget with Application and Custom options selected, showing absolute and idle session timeout settings ## User widgets User widgets let your customers manage their personal profile and security settings. These widgets are accessible to all authenticated users and are not controlled by organization-level feature entitlements or Scalekit permissions. 1. ### Manage profile Your customers can view and manage their personal profile information, including their name, email, and other account details. > Image: My Account widget showing editable first name and last name fields and a verified email address 2. ### Manage security Your customers can register and manage passkeys, view active sessions, and revoke sessions. The **User security** widget helps them maintain account security. > Image: User security widget showing a registered passkey and a list of active sessions with options to revoke them ## Access management Hosted Widgets enforce access using **Scalekit permissions**. You can map these permissions to any application roles assigned to the end user. When a user accesses Hosted Widgets, Scalekit checks their permissions and shows the available widgets. | Permission | Purpose | |---|---| | `sk_org_settings_read` | View organization profile and settings | | `sk_org_settings_manage` | View and modify organization profile and settings | | `sk_org_users_read` | View users in an organization | | `sk_org_users_invite` | Invite new users to an organization | | `sk_org_users_delete` | Remove users from an organization | | `sk_org_users_role_change` | Change roles of users in an organization | | `sk_org_sso_read` | View SSO configuration for an organization | | `sk_org_sso_manage` | View and modify SSO configuration for an organization | | `sk_org_scim_read` | View SCIM configuration for an organization | | `sk_org_scim_manage` | View and modify SCIM configuration for an organization | | `sk_org_session_policy_read` | View session policy for an organization | | `sk_org_session_policy_manage` | View and manage session policy for an organization | > Scalekit creates **Admin** and **Member** roles for every environment by default. Scalekit permissions are mapped to these two roles by default. The Admin role has all Scalekit permissions and can access all Hosted Widgets. The Member role has limited access to organization widgets and can only view organization settings and organization members. Both roles have access to user widgets. > > You can customize the permission mapping for these roles or create a [custom role](/authenticate/authz/create-roles-permissions/) and assign Scalekit permissions to control access to Hosted Widgets. --- ## Branding & customization Hosted Widgets can be customized to match your application's [branding](/fsa/guides/login-page-branding/). Hosted Widgets use your application logo, favicon, primary color, and more to look like an extension of your app. You can also change the Hosted Widgets URL to match your application URL by setting up a [custom domain](/guides/custom-domain/). ## Common Hosted Widgets scenarios ## What happens if a user does not have a session? If no session exists, Scalekit redirects the user to your application's login endpoint so your app can start the authentication flow again. If you manage sessions yourself, redirect unauthenticated users to your login flow before they reach the widgets. ## What happens when a user logs out from Hosted Widgets? When a user logs out from Hosted Widgets, they are redirected to your configured post-logout destination. This can leave your app session and the Scalekit session out of sync. If you manage sessions in your own backend instead of using Scalekit's default session management, handle logout propagation yourself. Use one of the following approaches: - Implementing [back-channel logout](/guides/dashboard/redirects/#back-channel-logout-url) so Scalekit can notify your app about session termination. - Listening for the [user logout webhook](/apis/#webhook/userlogout) to get notified about session termination. --- ## More Scalekit documentation | Resource | What it contains | When to use it | |----------|-----------------|----------------| | [/llms.txt](/llms.txt) | Structured index with routing hints per product area | Start here — find which documentation set covers your topic before loading full content | | [/llms-full.txt](/llms-full.txt) | Complete documentation for all Scalekit products in one file | Use when you need exhaustive context across multiple products or when the topic spans several areas | | [sitemap-0.xml](https://docs.scalekit.com/sitemap-0.xml) | Full URL list of every documentation page | Use to discover specific page URLs you can fetch for targeted, page-level answers |