Embedding SSO Setup Suite

The SSO Setup Suite can be embedded directly within your application using an iframe, providing a seamless experience for your users to configure SSO settings without leaving your app.

Implementation

To embed the SSO Setup Suite, use an iframe with the SSO Suite URL. No authentication token is required in the URL itself - just use the base link without any token parameters.

<iframe 
  src="https://api.descope.com/sso/setup"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Authentication Requirements

While no token is required in the iframe URL, ensure that a valid Descope JWT is available within your application.

The embedded SSO Suite will use the authentication context from its parent application. The JWT will need to have appropriate permissions for SSO configuration.

Query Parameters

Tenant ID

If the logged-in user is associated with multiple tenants, you can specify which tenant's SSO configuration to display by including the tenantId as a query parameter:

<iframe 
  src="https://api.descope.com/sso/setup?tenantId=your-tenant-id"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

If the JWT includes a dct claim, the selected tenant will automatically be picked up and this query parameter is unnecessary.

SSO Configuration ID

When using multiple SSO configurations, you can specify which configuration to display by passing the ssoId as a query parameter. If the ssoId value is not provided, it will display the SSO Setup Suite for the Default provider:

<iframe 
  src="https://api.descope.com/sso/setup?ssoId=your-sso-config-id"
  width="100%"
  height="600"
  frameborder="0">
</iframe>

Theme Customization

The SSO Setup Suite supports theme customization to match your application's appearance. Use the theme query parameter to set the desired theme:

Available Themes

• light - Light theme
• dark - Dark theme
• os - Automatically match the user's operating system theme preference

<!-- Light theme -->
<iframe 
  src="https://api.descope.com/sso/setup?theme=light"
  width="100%"
  height="600"
  frameborder="0">
</iframe>
 
<!-- Dark theme -->
<iframe 
  src="https://api.descope.com/sso/setup?theme=dark"
  width="100%"
  height="600"
  frameborder="0">
</iframe>
 
<!-- OS theme (follows user's system preference) -->
<iframe 
  src="https://api.descope.com/sso/setup?theme=os"
  width="100%"
  height="600"
  frameborder="0">
</iframe>