@crema/arcadia-auth-ui

Auth screens for arcadia-backed apps — login, signup, password reset, 2FA, OAuth, invitation acceptance — wired to @crema/arcadia-core-client and themed via Skyrise tokens (var(--card), var(--foreground), var(--primary), --radius).

Components are headless about routing — each takes callbacks (onSuccess, onForgotPassword, etc) so the consuming app routes the user wherever it wants.

Public API

import { LoginForm } from "@crema/arcadia-auth-ui";

Planned additions: SignupForm, PasswordResetRequestForm, PasswordResetConfirmForm, TwoFactorChallengeForm, TwoFactorSetupForm, OAuthButtons, InvitationAcceptForm.

Usage

In a route component (e.g. app/routes/login.tsx):

import { LoginForm } from "@crema/arcadia-auth-ui";
import { useNavigate } from "react-router";

export default function Login() {
  const navigate = useNavigate();
  return (
    <div style={{ display: "grid", placeItems: "center", minHeight: "100dvh", padding: "2rem" }}>
      <LoginForm
        onSuccess={async ({ tokens, twoFactorRequired, twoFactorChallenge }) => {
          if (twoFactorRequired) {
            navigate("/login/2fa", { state: { challenge: twoFactorChallenge } });
            return;
          }
          sessionStorage.setItem("arcadia_token", tokens.access_token);
          navigate("/");
        }}
        onForgotPassword={() => navigate("/login/forgot")}
        onSignup={() => navigate("/signup")}
      />
    </div>
  );
}

Requires <ArcadiaProvider> somewhere up the tree (typically in app/root.tsx).

Theming

All components consume Skyrise tokens via inline styles with CSS variables (the lib convention — components in libs don't use Tailwind classes). They render correctly under any theme that satisfies the Skyrise token contract.

Surface tints (body[data-surface="snow|stone|sage|slate"]) and dark mode (html.dark) work transparently — the form picks up whatever the active surface defines.

Conventions

• Inline imports only — no own package.json.
• Path-aliased into apps via tsconfig.json paths: @crema/arcadia-auth-ui → ../lib-arcadia-auth-ui/src/index.tsx.
• Tailwind @source line in the consuming app's app.css so any utility classes used (none today, but room for them) get scanned.
• Every interactive element has data-action="auth-<id>" so scripts and the LLM action bus can drive auth flows in tests / demos.