Auth
Components

Auth

Sign-in components shared across Solarius apps: LoginPanel, AuthProviderButton, AuthSeparator, and AuthScreen.

Components in this category

LoginPanel

Authentication card with branding, heading, error message, and form content.

AuthProviderButton

Full-width SSO / OAuth / custom provider button with loading state.

AuthScreen

Page layout around LoginPanel.

AuthSeparator

Labeled divider between SSO buttons and a credentials form.

AuthBrandMark

The framed tile a product mark sits in above an auth heading.

LoginPanel

LoginPanel is the auth card: brand mark, heading, subtitle, a danger error strip, and a muted footer. It renders the shell and leaves the sign-in method to its children; the same card serves sign-in, sign-out, and step-up.

LoginPanelProps props
PropTypeDefaultDescription
brandReactNode—Logo mark, centered above the heading.
titleReactNode—Heading text.
subtitleReactNode—Dim line under the heading.
errorReactNode—Error message above the form content.
footerReactNode—Muted line under the card.
widthnumber380Card width in px.
LoginPanel

AuthProviderButton

A full-width identity-provider button: fixed leading icon, centered label, optional trailing meta. Set loading for the moment after a click while the app redirects to the provider: it swaps the icon for a spinner and disables the button.

AuthProviderButtonProps props
PropTypeDefaultDescription
iconReactNode—Provider icon content.
loadingboolean—Swaps the icon for a spinner and disables the button.
metaReactNode—Trailing meta tag, e.g. 'SAML' or 'SSO'.
variant"default" | "primary" | "outline""default"Visual weight.
AuthProviderButton
ImportTSX
import { AuthProviderButton } from "@solarius/onset";
import { IconShieldLock } from "@tabler/icons-react";

<AuthProviderButton
  icon={<IconShieldLock size={16} />}
  meta="SAML"
  loading={redirecting}
  onClick={startSso}
>
  Single sign-on
</AuthProviderButton>;

AuthSeparator

A labeled border between an SSO stack and a credentials form, such as the "or continue with email" break. Defaults to "or".

AuthSeparatorProps props
PropTypeDefaultDescription
childrenReactNode"or"Centered label between the rules.
or continue with email
AuthSeparator

AuthScreen

The page the card sits on: the stage, the product lockup above it, the theme toggle in the corner, and the legal line below. Sign-in, registration, and password reset share this frame. The full page documents the backgrounds and the slots.

AuthScreen