[Package] Kratos React для self-hosted Kratos #159

Название пакета

@atls/react-kratos

Для чего нужен пакет?

Обновить общий React-слой native self-service flows для self-hosted Ory Kratos.

Пакет должен:

• использовать @ory/kratos-client-fetch@^26.2.0 как peer dependency и проверять exact 26.2.0 против oryd/kratos:v26.2.0
• заменить Axios и @ory/client на component SDK, не копируя generated API или models
• принимать FrontendApi через SdkProvider
• использовать публичный handleFlowError из @ory/client-fetch@1.22.66 для validation, restart, expired flow, reauthentication и redirect semantics без собственных status switches
• передавать redirect platform-адаптеру, а неизвестные ResponseError, FetchError и RequiredError оставлять в vendor contract
• сохранить explicit React API flow components, hooks и providers
• удалить export * from '@ory/client' как документированный breaking change без compatibility shim; vendor types и client импортируются прямо из @ory/kratos-client-fetch
• публиковаться ESM-first с exports и TypeScript declarations
• не реэкспортировать vendor SDK и Admin APIs

Результат задачи — отдельный PR в atls/reactjs со штатными проверками, тестами, сборкой и проверкой упакованного пакета. Покрыть 400, 404, 410 с use_flow_id, reauthentication, redirect, unknown response и component FetchError/RequiredError, публичные exports и production Metro graph официального helper.

Пример использования

import {
  FlowInputNode,
  FlowMessages,
  FlowNodeMessages,
  FlowSubmit,
  LoginNativeFlow,
  SdkProvider,
} from '@atls/react-kratos'
import {
  Configuration,
  FrontendApi,
} from '@ory/kratos-client-fetch'

const frontend = new FrontendApi(
  new Configuration({ basePath: kratosPublicUrl })
)

export const Login = () => (
  <SdkProvider value={frontend}>
    <LoginNativeFlow onSession={persistSession}>
      <FlowMessages>{renderMessages}</FlowMessages>
      <FlowInputNode name='identifier'>{renderIdentifier}</FlowInputNode>
      <FlowInputNode name='password'>{renderPassword}</FlowInputNode>
      <FlowNodeMessages name='password'>{renderMessages}</FlowNodeMessages>
      <FlowSubmit>{renderSubmit}</FlowSubmit>
    </LoginNativeFlow>
  </SdkProvider>
)

Материалы

https://github.com/ory/sdk/blob/1fd5b703ceb455a5b013a6005fb457fc5da5c05d/clients/client/typescript-fetch/src/contrib/utils.ts