Implementation:Helicone Helicone SSO Page
| Knowledge Sources | |
|---|---|
| Domains | Authentication, Enterprise SSO |
| Last Updated | 2026-02-14 06:32 GMT |
Overview
Enterprise Single Sign-On authentication page that extracts the email domain and initiates SAML/SSO authentication through the organization's identity provider.
Description
The SSO page provides a dedicated login flow for enterprise customers using corporate identity providers (such as Okta, Azure AD, or Google Workspace). The page features a split-panel layout:
Left Panel: The AuthBrandingPanel component displaying Helicone branding and visual elements.
Right Panel: A form with a work email input. When submitted, the component:
- Extracts the domain from the entered email address (e.g., "company.com" from "jane@company.com")
- Validates that a domain was extracted
- Calls
heliconeAuthClient.signInWithSSO({ domain, options: { redirectTo: /dashboard } }) - Redirects the user to their organization's identity provider for authentication
- On error, displays a notification with instructions to contact their administrator or Helicone
The page also shows a mobile-optimized Helicone logo and includes a "Back to sign in" link for users who want to use standard authentication methods.
Usage
This page is accessed at the /sso route. It is linked from the sign-in page via the SSO button and is intended for enterprise customers with configured SSO integrations.
Code Reference
Source Location
- Repository: Helicone
- File: web/pages/sso.tsx
Signature
const SSO: React.FC;
export default SSO;Import
// This is a Next.js page component, accessed via routing at /sso
I/O Contract
Component State
| State | Type | Description |
|---|---|---|
string |
The work email address entered by the user | |
| isLoading | boolean |
Loading state during SSO initiation |
SSO Flow
| Step | Action | Description |
|---|---|---|
| 1 | Email input | User enters their work email |
| 2 | Domain extraction | Splits email on "@" to get organization domain |
| 3 | Validation | Checks that a valid domain was extracted |
| 4 | SSO initiation | Calls signInWithSSO({ domain })
|
| 5 | Redirect | Browser redirects to identity provider |
| 6 | Callback | On success, redirects to /dashboard
|
Error Handling
| Error Condition | User Feedback |
|---|---|
| No domain in email | "Please enter a valid email address." |
| SSO provider error | "Error logging in with SSO. Please try again or contact your administrator or Helicone." |
UI Layout
| Panel | Content |
|---|---|
| Left (desktop only) | AuthBrandingPanel with Helicone branding |
| Right | SSO form with email input, submit button, and "Back to sign in" link |
| Mobile header | Helicone logo (shown only on mobile via md:hidden)
|
Usage Examples
// The SSO page is accessed via Next.js routing at /sso
// Typical flow:
// 1. User clicks "Sign in with SSO" button on /signin page
// 2. User enters "jane@acme.com" on /sso page
// 3. Domain "acme.com" is extracted
// 4. signInWithSSO({ domain: "acme.com" }) is called
// 5. User is redirected to Acme's identity provider
// 6. After IdP auth, user is redirected back to /dashboard