Login
A complete login page component inspired by OpenCTI, featuring a two-column layout with a decorative aside panel, credentials form, SSO provider buttons, consent message, and alert banners.
Full Login Page
Login Page with Consent Message
When a consentMessage is provided, the form and SSO buttons are hidden until the user accepts.
Sub-Components
The login system is composed of several sub-components that can be used independently or together via LoginPage.
LoginLayout
A two-column layout: centered content on the left, decorative aside panel on the right. The aside panel is hidden on mobile.
Your login content goes here
LoginLayout Props
| Name | Type | Default | Description |
|---|---|---|---|
| aside | LoginAsideConfig | - | Configuration for the decorative aside panel (see below). |
| logo | ReactNode | - | Logo element displayed above the content area. |
| asideContent | ReactNode | - | Custom content to render inside the aside panel. |
| children | ReactNode | - | Main content (forms, alerts, etc.) rendered in the left panel. |
LoginAsideConfig
| Name | Type | Default | Description |
|---|---|---|---|
| variant | enum ("color" | "gradient" | "image" | "default") | "default" | Type of aside background. |
| color | string | - | Background color (when variant is "color"). |
| gradientStart | string | - | Gradient start color (when variant is "gradient"). |
| gradientEnd | string | - | Gradient end color (when variant is "gradient"). |
| image | string | - | Background image URL (when variant is "image"). |
Default background: When no
asideconfig is provided (or variant is"default"), the aside uses the OpenCTI gradient — dark mode:#050A14 → #0C1728, light mode:#EAEAED → #FEFEFF. This adapts automatically with the theme.
LoginForm
A credentials form with email and password fields, powered by react-hook-form + Zod validation. Submission is handled entirely via the onSubmit callback — no network dependency.
LoginForm Props
| Name | Type | Default | Description |
|---|---|---|---|
| onSubmit | (values: {email: string, password: string}) => void | Promise<void> | - | Called when the form is submitted with valid values. |
| onForgotPassword | () => void | - | Called when "I forgot my password" is clicked. |
| error | string | - | Server-side error message to display below the fields. |
| labels | LoginLabels | - | Custom labels for i18n (see below). |
| disabled | boolean | false | Disables all form inputs and the submit button. |
LoginAlert
Styled alert banners for displaying messages (errors, warnings, info, success).
LoginAlert Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | enum ("error" | "warning" | "info" | "success") | "error" | The alert style variant. |
| children | ReactNode | - | Alert message content. |
LoginConsent
A consent message with a checkbox that must be accepted before login options are shown.
Consent accepted: No
LoginConsent Props
| Name | Type | Default | Description |
|---|---|---|---|
| message | string | - | The consent message to display. |
| checked | boolean | - | Whether the checkbox is checked. |
| onCheckedChange | (checked: boolean) => void | - | Called when the checkbox state changes. |
| confirmText | string | "I have read and comply with the above statement" | Custom text for the checkbox label. |
LoginSSOGroup & LoginSSOButton
Buttons for external SSO authentication providers.
SSOProvider Type
| Name | Type | Description |
|---|---|---|
| name | string | Display name of the provider. |
| provider | string | Unique identifier for the provider. |
| href | string | URL to redirect to for SSO authentication. |
| icon | ReactNode | Optional icon to display in the button. |
| buttonLabel | string | Optional custom label (overrides name). |
LoginSSOGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
| providers | SSOProvider[] | - | Array of SSO providers to display. |
| onProviderClick | (provider: SSOProvider) => void | - | Called when a provider button is clicked. |
LoginLabels (i18n)
All text labels can be customized via the labels prop for internationalization.
| Name | Type | Default |
|---|---|---|
| emailLabel | string | "Login" |
| passwordLabel | string | "Password" |
| signInLabel | string | "Sign in" |
| forgotPasswordLabel | string | "I forgot my password" |
| consentConfirmText | string | "I have read and comply with the above statement" |
| noProviderMessage | string | "No authentication provider available" |
LoginPage (Orchestrator)
The top-level component that composes all sub-components together.
LoginPage Props
| Name | Type | Default | Description |
|---|---|---|---|
| onSubmit | (values: {email: string, password: string}) => void | Promise<void> | - | Form submission callback. |
| providers | SSOProvider[] | [] | SSO providers to display. |
| hasCredentialsForm | boolean | true | Whether to show the email/password form. |
| consentMessage | string | - | If provided, gates login behind a consent checkbox. |
| loginMessage | string | - | Optional message displayed above the form. |
| logo | ReactNode | - | Logo element. |
| aside | LoginAsideConfig | - | Aside panel configuration. |
| asideContent | ReactNode | - | Custom aside panel content. |
| onForgotPassword | () => void | - | Forgot password callback. |
| onSSOClick | (provider: SSOProvider) => void | - | SSO button click callback. |
| error | string | - | Server error message for the form. |
| alerts | Array<{variant, message, key?}> | - | Array of alert banners to display. |
| labels | LoginLabels | - | Custom labels for i18n. |
| disabled | boolean | false | Disables all interactive elements. |
Import
Import from @filigran/ui :
Import {LoginPage, LoginLayout, LoginForm, LoginAlert, LoginConsent, LoginSSOButton, LoginSSOGroup} from '@filigran/ui/clients'