Skip to content

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

Description

@TorinAsakura

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

@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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions