# 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`](/docs/sdk/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](/docs/quickstarts/react) 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:

```tsx
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](#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.

```tsx
<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.