@jaxlabs/myid-react

Login-Button für Apps im JaxLabs-Netzwerk. Design, Texte und Localization kommen zentral aus MyID (apps.design_config), nicht aus der App.

npm i @jaxlabs/myid-react

Alternativ: Download-Button auf der Integrations-Seite im MyID-Admin (fertig kompiliertes .tar.gz, falls kein Zugriff auf die npm-Registry besteht).

Veröffentlicht wird automatisch per GitHub Actions (.github/workflows/publish-sdk.yml), sobald sich die Version in sdk/package.json ändert und auf main landet - einfach hochzählen und pushen, dann kommt das Update bei allen Apps per npm update an.

Frontend

import { MyIdLoginButton } from '@jaxlabs/myid-react';

<MyIdLoginButton
  appId="credify"
  onSuccess={({ token, user }) => {
    // Token ans eigene Backend schicken
    fetch('/api/session', { method: 'POST', body: JSON.stringify({ token }) });
  }}
/>;

Ablauf: Der Button lädt beim Mount GET /api/v1/apps/<appId>/design und rendert sich damit. Ein Klick öffnet myid.feuchte.org/auth?appId=<appId>; das Popup prüft das Session-Cookie, holt ein Access-Token und schickt es per postMessage an das Parent-Window (Ziel-Origin ist die in MyID hinterlegte origin_url der App).

Backend

Client-Secret steht im MyID-Admin unter der App (Detailansicht) und gehört in die Umgebungsvariablen der App - niemals ins Frontend.

import { verifyMyIdToken, fetchMyIdUserInfo } from '@jaxlabs/myid-react/src/verify.js';

const claims = await verifyMyIdToken(token, 'credify', process.env.MYID_CLIENT_SECRET!);
if (!claims) throw new Error('unauthorized');
// claims.risk_score: 0-100, regelbasiert - z. B. um Trials für auffällige Accounts einzuschränken

const info = await fetchMyIdUserInfo(token, 'credify', process.env.MYID_CLIENT_SECRET!);
// info.profile enthält nur die vom Nutzer freigegebenen Felder

Das Token ist ein HS256-JWT (iss: myid, aud: <slug>, 1 Stunde gültig). Ein gesperrter Nutzer fällt bei verify und userinfo sofort auf 403 - auch mit noch gültigem Token.

claims.risk_score fasst Indizien für Mehrfach-Accounts zusammen (z. B. E-Mail-Alias mit + oder mehrere Accounts vom selben Gerät). Es kommt nur die Zahl - nie Daten zu anderen Konten, dafür bleibt die Detailansicht im MyID-Admin.

Scopes

Verfügbar: email, username, full_name, phone, address, bio, avatar. Im MyID-Admin legst du je App fest, welche davon Pflicht sind (ohne Einwilligung kein Login) und welche optional (der Nutzer gibt sie im Popup einzeln frei). Nicht freigegebene Felder liefert userinfo gar nicht erst aus. avatar kommt als Data-URL (Base64 JPEG, ~256px) oder null.

userinfo liefert zusätzlich newsletter_opt_in (boolean) - ob der Nutzer den Newsletter dieser App möchte. Hat die App Newsletter als Pflicht markiert (im MyID-Admin je App einstellbar), ist das Feld immer true.

Die Integrations-Seite im MyID-Admin (Apps → App auswählen → Integration) erzeugt für jede App live einen kompletten Prompt mit genau dieser Konfiguration - zum Kopieren in einen KI-Agenten oder als Doku fürs eigene Team.

design_config (Beispiel)

{
  "primary": "#111827",
  "textColor": "#ffffff",
  "logoUrl": "https://credify.feuchte.org/logo.svg",
  "label": "Mit MyID anmelden",
  "locale": "de",
  "radius": "8px"
}