React SDK

@keenauth/react, gömülebilir oturum açma, hesap oluşturma ve hesap bileşenlerini ve bunların altındaki hook'ları sunar. Ağ çağrılarının, PKCE, DPoP ve WebAuthn adımlarının tümünü gerçekleştiren tarayıcı çekirdeği @keenauth/js üzerinde çalışır; bileşenler kendileri hiçbir zaman fetch veya WebCrypto çağırmaz. Paket henüz npm'de yayımlanmamıştır.

Barındırılan giriş sayfasına yönlendirmeli bir oturum açma için bu pakete ihtiyacınız yoktur: @keenauth/js'i doğrudan kullanan React hızlı başlangıcına bakınız.

Sağlayıcıyı kurun

Çekirdeği bir kez oluşturup KeenAuthProvider'a iletin. Sunucu hatalarının bileşenler tarafından tanınması için React paketinin hata sınıfını çekirdeğe iletin:

import { KeenAuth } from "@keenauth/js";
import { KeenAuthProblemError, KeenAuthProvider, SignIn } from "@keenauth/react";

const core = new KeenAuth({
  issuer: "https://acme.eu.keenauth.app",
  clientId: "app_01j9zzzzzzzzzzzzzzzzzzzz",
  redirectUri: "https://login.acme.example/callback",
  createProblemError: (problem) => new KeenAuthProblemError(problem),
});

export function App() {
  return (
    <KeenAuthProvider core={core} locale="en">
      <SignIn transaction={{ client_id: "app_01j9zzzzzzzzzzzzzzzzzzzz", redirect_uri: "https://login.acme.example/callback" }} />
    </KeenAuthProvider>
  );
}

KeenAuthProvider şu özellikleri alır:

Özellik	Anlamı
`core`	`@keenauth/js` istemcisi (`KeenAuthCore` sözleşmesini uygulayan herhangi bir nesne)
`locale`	Arayüz dili (BCP 47); varsayılan `en`
`appearance`	İsteğe bağlı tema geçersiz kılmaları, bkz. Görünüm

Bileşenler, ortamınızın çerezleri ve bir CSRF üstbilgisi ile ön uç API'sini (/fapi/v1) çağırır. Sunucu bu çağrıları yalnızca ortamın kendi giriş kaynağından ve yalnızca birinci taraf uygulamalar için kabul eder.

Bileşenler

Bileşen	Ne yapar
`SignIn`	Önce tanımlayıcı akışlı oturum açma: parola, passkey, e-posta kodu veya sihirli bağlantı ve ikinci faktörler
`SignUp`	Ortamın kayıt ayarlarıyla hesap oluşturma
`UserProfile`	Oturum açmış kullanıcının profili, e-postaları (kod doğrulamasıyla), passkey'leri ve oturumları

SignIn ve SignUp, bir oturum açma işlemini başlatan gövde olan transaction özelliğini alır:

yönlendirmeli akışta, yetkilendirme isteğinden alınan { authorization_request: "azr_…" };
yönlendirme olmadan, kayıtlı bir yönlendirme URI'si ile { client_id, redirect_uri }.

onComplete, çekirdek işlemi sayfada tamamladığında çağrılır; yönlendirmeli akışta bunun yerine sayfa başka bir yere gider. Bileşenlerin çizmediği bir adım (örneğin bir meydan okuma veya kuruluş seçimi) barındırılan giriş sayfasında devam etmek için bir bağlantıya dönüşür.

UserProfile, profile, emails, passkeys ve sessions değerlerinden oluşan bir alt küme olan sections özelliğini alır (varsayılan olarak dördü de). Başka yerde yapılmış bir değişiklikle çakışan bir profil yazma işlemi bir hata gösterir ve mevcut değerleri yeniden yükler.

Hook'lar

Hook	Döndürdüğü değer
`useKeenAuth()`	Sağlayıcı değeri: `core`, `locale`, `appearance`
`useEnvironment()`	Ortamın oturum açma ayarları ve etkin dil için bir metin arama `t`
`useTransaction()`	Çekirdeğin `transactions` API'si üzerinde bir işlem durum makinesi
`useMe()`	Oturum açmış kullanıcının profili ve hesap API'si

Görünüm

appearance.variables, tema belirteçlerini geçersiz kılar (örneğin color.primary); bunlar CSSOM üzerinden bileşen kökünde --idp-* özel özellikleri olarak yazılır, dolayısıyla 'unsafe-inline' stilleri olmayan katı bir İçerik Güvenliği Politikası ile de çalışır. appearance.elements, bileşenlerin öğelerine kendi sınıf adlarınızı ekler. Paket bir stil sayfası içermez: idp-* sınıflarını kendi CSS'inizde biçimlendirin.

<KeenAuthProvider core={core} appearance={{ variables: { "color.primary": "#1f6feb" }, elements: { buttonPrimary: "acme-button" } }}>

Diller ve erişilebilirlik

Bileşenler İngilizce, Türkçe, Fransızca, Almanca, Korece, Japonca, İtalyanca ve İspanyolca metinler içerir. Ortamınızın metin geçersiz kılmaları önceliklidir; başka bir dil İngilizceye geri düşer ve o dilin metin yönü kullanılır.
Her girişin bir etiketi vardır, hata özeti odak alır, autocomplete değerleri ayarlanır ve yapıştırma hiçbir zaman engellenmez.

Passkey'ler

Passkey düğmesi, passkey'in ilgili taraf kimliği (relying party ID) sayfanın ana makinesini kapsadığında (ya da sayfanın kaynağı ortamın ilgili bir kaynağıysa) görünür; aksi halde bileşen barındırılan giriş sayfasına bir bağlantı verir. Passkey'ler güvenli bir bağlam (https veya localhost) gerektirir.

Mevcut sınırlar

Sosyal oturum açma düğmeleri henüz çizilmez; sosyal oturum açma sunan bir ortam, barındırılan giriş sayfasına bir bağlantı alır.
Telefon numaraları henüz kullanılamaz: UserProfile'ın bir telefon bölümü yoktur.
Kuruluş bileşenleri (bir kuruluş değiştirici ve profil) henüz kullanılamaz.