@odinscode/react-auth

Session-Auth und die Login-Seite für Apps auf Carbide UI. Aus journal-csc bei der dritten Verwendung (knowledge-server) ins Lager gezogen.

Verwenden

pnpm add @odinscode/react-auth

react, react-dom und @odinscode/carbide-core sind Peer-Abhängigkeiten (bringt die App ohnehin mit). Die Login-Optik nutzt die Carbide-Token-Variablen der App.

// main.tsx
import "@odinscode/carbide-token/css/tokens.css";
import "@odinscode/react-auth/styles.css";
import { AuthProvider } from "@odinscode/react-auth";

createRoot(root).render(
  <AuthProvider>
    <App />
  </AuthProvider>,
);

// App.tsx — gate
import { useAuth } from "@odinscode/react-auth";

const { state } = useAuth();
if (state.kind === "loading") return null;
return state.kind === "signed-in" ? <Home /> : <Login />;

// Login.tsx — everything app-specific is a prop
import { LoginScreen } from "@odinscode/react-auth";
import background from "./assets/background.jpg";
import logo from "./assets/logo.png";

<LoginScreen
  background={background}
  logo={<img src={logo} alt="" width={112} height={112} />}
  wordmark="knowledge"
  pinTheme="dark"
/>;

Was es macht

• AuthProvider / useAuth: httpOnly-Cookie-Session gegen ${basePath}/login|logout|me (Default /api/auth, per Prop änderbar).
• LoginScreen: die geteilte Login-Seite, wahlweise layout="split" (Foto links, Formular rechts, Standard) oder layout="centered" (Foto bildschirmfüllend, Logo und Formular in einer Glas-Kachel in der Mitte), mit optionalem pinTheme — pinnt hell/dunkel, solange die Seite sichtbar ist (kein Flip), und gibt danach wieder frei. showTitle={false} blendet die Überschrift sichtbar aus, Screenreader lesen sie weiter.

Das Backend liefert { username } auf /me und /login.