Zum Inhalt springen
XID

@xid-kit/solid

SolidJS-Kontext-Provider, signalbasierte Auth-Primitive undHeadless-Komponenten auf Basis von @xid-kit/core.

Zustand

XID veröffentlicht keine Pakete in einer Registry. Dieses SDK wird als Quellcode im XID-Repository verteilt; verwenden Sie es aus einem Checkout des Repositorys.

Paketstatus: Aktuelles Paket. SolidJS-Kontext-Provider,signalbasierte Primitive und Headless-Komponenten sind implementiert. Einechter IdP-Round-Trip auf Produktionsinfrastruktur steht noch manuell aus.

Anbieter-Einrichtung

Umschließen Sie Ihre App mit XidProvider. Es erstellt einenXidClient, ruft beim Mounten client.load() auf, um dieaktuelle Sitzung abzurufen, und bereinigt über onCleanup.

import { XidProvider } from '@xid-kit/solid'

export function App() {
  return (
    <XidProvider
      mode="oidc"
      issuer="https://xid.dev"
      clientId="client_abc123"
      redirectUri="https://app.example.com/auth/callback"
    >
      <Routes />
    </XidProvider>
  )
}

Auth-Primitive

Jedes Primitive gibt reaktive Accessor<T>-Getter-Funktionen zurück.Rufen Sie sie in JSX oder createEffect auf, um Änderungen zuverfolgen.

import { createAuth, createUser, createOrganization, createSession } from '@xid-kit/solid'
import { Show } from 'solid-js'

function Profile() {
  const auth = createAuth()
  // auth.isLoaded()  -- Accessor<boolean>
  // auth.isSignedIn() -- Accessor<boolean>
  // auth.userId()    -- Accessor<string | null>
  // auth.getToken()  -- () => Promise<Result<string, XidError>>
  // auth.signOut()   -- (options?) => Promise<Result<null, XidError>>

  return (
    <Show when={auth.isLoaded()} fallback={<p>Loading...</p>}>
      <Show when={auth.isSignedIn()} fallback={<p>Not signed in</p>}>
        <p>Signed in as {auth.userId()}</p>
        <button onClick={() => void auth.signOut()}>Sign out</button>
      </Show>
    </Show>
  )
}

createOrganization und createSession

const org = createOrganization()
// org() is CreateOrganizationReturn
if (org().isSignedIn) {
  console.log(org().organization?.name, org().membership?.role)
  const activated = await org().setActive('org_new_id')
  if (!activated.ok) throw new Error(activated.error.message)
}

const session = createSession()
if (session().isSignedIn) {
  const token = await session().getToken()
  if (!token.ok) throw new Error(token.error.message)
  // use token.value for backend requests
}

Headless-Komponenten

import { SignInButton, SignOutButton, Protect } from '@xid-kit/solid'

// Navigates to /sign-in by default
<SignInButton signInUrl="/auth/sign-in" redirectUrl="/dashboard">
  Log in
</SignInButton>

// Signs out all sessions; pass sessionId to target one
<SignOutButton redirectUrl="/home">Log out</SignOutButton>

// Role and permission gate
<Protect role="admin" fallback={<p>Admins only</p>}>
  <Settings />
</Protect>

<Protect permission="org:member:write" fallback={null}>
  <InviteForm />
</Protect>

Exportierte API

Exportieren Art Zweck
XidProvider Komponente Erstellt XidClient, ruft load() beim Mounten auf, bereinigt über onCleanup
createAuth Primitiv isLoaded, isSignedIn, userId, sessionId, session, getToken, signOut alsAccessors
createUser Primitiv Accessor, der eine Discriminated Union über isLoaded / isSignedIn / userkapselt
createOrganization Primitiv Accessor, der Organisation, Mitgliedschaft und setActive für die aktiveOrganisation zurückgibt
createSession Primitiv Accessor, der Sitzung und getToken für die aktive Sitzung zurückgibt
SignInButton Komponente Headless-Button, der beim Klicken zur Anmelde-URL navigiert
SignOutButton Komponente Headless-Button, der beim Klicken signOut aufruft
Protect Komponente Rollen- und Berechtigungsgate mit Fallback-Prop

Token-Speicher

  • Der XID Worker speichert eine opake Refresh-Anmeldeinformation in einem HttpOnly-Cookie. Sie ist kein JWT; das SDK liest sie weder aus JavaScript noch speichert es sie in localStorage.
  • getToken() gibt ein kurzlebiges JWT (60 s) zurück, das TokenManager in @xid-kit/core ausschließlich im Arbeitsspeicher zwischenspeichert.

Suchbegriff eingeben

Mit den Pfeiltasten navigierenEingabetaste zum AuswählenEscape zum Schließen