Authio docs

Widgets

Embeddable widgets

Drop the Authio SSO Connection and Directory Sync surfaces into your own product. Your IT-admin customers configure enterprise auth from inside your app — no dashboard bounce.

Part of Authio Lobby

What you get

@authio/widgets ships two React components:

  • <AuthioSSOConnectionWidget /> — list, create, edit, delete, and test SAML / OIDC connections for one organization. Renders SP metadata XML so the IT admin can paste it into Okta, Entra, JumpCloud, etc.
  • <AuthioDirectorySyncWidget /> — provision Okta SCIM, Entra ID, Google Workspace and generic SCIM directories. Lists synced users, triggers a manual sync, rotates the directory bearer token.
Bundle budget: ≤ 10 KB gzipped per widget, ≤ 20 KB combined. The build fails if either ceiling is breached.

When to use widgets

Use widgets when your buyer wants their IT admins to sit inside your product, not redirect to an Authio-hosted admin portal. Typical scenario:

  1. Your customer’s IT admin signs into your app and lands on your “Settings → Single sign-on” page.
  2. You embed <AuthioSSOConnectionWidget /> and <AuthioDirectorySyncWidget />.
  3. The IT admin configures SAML, copies SP metadata, provisions a directory, etc. — without ever leaving your product.

Architecture in one picture

+---------------------+      mint widget JWT      +-------------------------+
|  customer dashboard +-------------------------->+  authio_management-api  |
|     /settings       |                           |   POST /v1/widget-tokens |
+----------+----------+                           +-----------+-------------+
           | accessToken                                       | sign via
           |                                                   v /internal/widget-tokens/sign
           v                                            +------+--------+
+----------+----------+      kind="widget" JWT          | authio_auth-  |
| @authio/widgets in  |<--------------------------------+    core       |
|  your product (SPA) |                                 +-------+-------+
+----------+----------+                                         |
           |  fetch /widget/sso-connections                     |
           |  Origin: app.acme.com                              |
           +---->>>>>--->>>>>--->>>>>--->>>>>--->>>>>--->>>>>---+
                            origin checked vs widget_origins[]
                            scope checked vs widget_scope[]
                            row checked vs widget_tokens.revoked_at

Read next