@atls/react-kratos-browser-flows 0.0.1

package/dist/flows/abstract.flow.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="node" />
+import { EventEmitter } from 'events';
+import { KratosClient } from './kratos.client';
+import type { SubmitSelfServiceFlowBody } from './flow.interfaces';
+import type { SelfServiceFlow } from './flow.interfaces';
+import type { Flow } from './flow.interfaces';
+export declare abstract class AbstractFlow<State extends SelfServiceFlow, Body extends SubmitSelfServiceFlowBody> extends EventEmitter implements Flow {
+    #private;
+    protected readonly client: KratosClient;
+    constructor(client: KratosClient);
+    setLoading(loading: any): void;
+    isLoading(): boolean;
+    setState(state: any): void;
+    hasState(): boolean;
+    getState(): State;
+    getMessages(): import("@ory/kratos-client").UiText[];
+    getNode(name: any): import("@ory/kratos-client").UiNode | undefined;
+    getNodes(name: any): import("@ory/kratos-client").UiNode[];
+    getNodesGroup(group: any): import("@ory/kratos-client").UiNode[];
+    getValue(name: any): string | any;
+    getValues(): Body;
+    setValue(name: string, value: string): void;
+    protected setValues(state: State): void;
+    protected complete(href?: string): void;
+    abstract load(): any;
+    abstract submit(method?: string): any;
+}

package/dist/flows/abstract.flow.js

@@ -0,0 +1,82 @@
+"use strict";
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to set private field on non-instance");
+    }
+    privateMap.set(receiver, value);
+    return value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var _values, _state, _loading;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbstractFlow = void 0;
+const events_1 = require("events");
+class AbstractFlow extends events_1.EventEmitter {
+    constructor(client) {
+        super();
+        this.client = client;
+        _values.set(this, {});
+        _state.set(this, void 0);
+        _loading.set(this, false);
+        this.setMaxListeners(50);
+    }
+    setLoading(loading) {
+        __classPrivateFieldSet(this, _loading, loading);
+    }
+    isLoading() {
+        return __classPrivateFieldGet(this, _loading);
+    }
+    setState(state) {
+        __classPrivateFieldSet(this, _state, state);
+    }
+    hasState() {
+        return Boolean(__classPrivateFieldGet(this, _state));
+    }
+    getState() {
+        return __classPrivateFieldGet(this, _state);
+    }
+    getMessages() {
+        var _a, _b;
+        return ((_b = (_a = __classPrivateFieldGet(this, _state)) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.messages) || [];
+    }
+    getNode(name) {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = __classPrivateFieldGet(this, _state)) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.find((node) => node.attributes.name === name);
+    }
+    getNodes(name) {
+        var _a, _b, _c;
+        return (((_c = (_b = (_a = __classPrivateFieldGet(this, _state)) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter((node) => node.attributes.name === name)) || []);
+    }
+    getNodesGroup(group) {
+        var _a, _b, _c;
+        return ((_c = (_b = (_a = __classPrivateFieldGet(this, _state)) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.filter((node) => node.group === group)) || [];
+    }
+    getValue(name) {
+        return __classPrivateFieldGet(this, _values)[name];
+    }
+    getValues() {
+        return __classPrivateFieldGet(this, _values);
+    }
+    setValue(name, value) {
+        __classPrivateFieldGet(this, _values)[name] = value;
+    }
+    setValues(state) {
+        var _a, _b;
+        (_b = (_a = state === null || state === void 0 ? void 0 : state.ui) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.forEach(({ attributes }) => {
+            if (!__classPrivateFieldGet(this, _values)[attributes.name]) {
+                __classPrivateFieldGet(this, _values)[attributes.name] =
+                    attributes.value || '';
+            }
+        });
+    }
+    complete(href = '/') {
+        window.location.href = href;
+    }
+}
+exports.AbstractFlow = AbstractFlow;
+_values = new WeakMap(), _state = new WeakMap(), _loading = new WeakMap();

package/dist/flows/errors.flow.d.ts

@@ -0,0 +1,5 @@
+import { AbstractFlow } from './abstract.flow';
+export declare class ErrorsFlow extends AbstractFlow<any, any> {
+    load(): Promise<void>;
+    submit(): Promise<void>;
+}

package/dist/flows/errors.flow.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorsFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class ErrorsFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            if (!flowId) {
+                this.complete();
+            }
+            else {
+                const { data } = await this.client.getSelfServiceError(flowId, { withCredentials: true });
+                this.setLoading(false);
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+        catch (error) {
+            this.setLoading(false);
+            this.complete();
+        }
+    }
+    async submit() { }
+}
+exports.ErrorsFlow = ErrorsFlow;

package/dist/flows/flow.interfaces.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="node" />
+import type { SelfServiceRegistrationFlow } from '@ory/kratos-client';
+import type { SelfServiceVerificationFlow } from '@ory/kratos-client';
+import type { SelfServiceRecoveryFlow } from '@ory/kratos-client';
+import type { SelfServiceSettingsFlow } from '@ory/kratos-client';
+import type { SelfServiceLoginFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRegistrationFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceVerificationFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceRecoveryFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceSettingsFlowBody } from '@ory/kratos-client';
+import type { SubmitSelfServiceLoginFlowBody } from '@ory/kratos-client';
+import type { UiText } from '@ory/kratos-client';
+import type { UiNode } from '@ory/kratos-client';
+import { EventEmitter } from 'events';
+export declare type FlowName = 'login' | 'registration' | 'recovery' | 'settings' | 'verification' | 'errors';
+export declare type SelfServiceFlow = SelfServiceRegistrationFlow | SelfServiceVerificationFlow | SelfServiceRecoveryFlow | SelfServiceSettingsFlow | SelfServiceLoginFlow;
+export declare type SubmitSelfServiceFlowBody = SubmitSelfServiceRegistrationFlowBody | SubmitSelfServiceVerificationFlowBody | SubmitSelfServiceRecoveryFlowBody | SubmitSelfServiceSettingsFlowBody | SubmitSelfServiceLoginFlowBody;
+export interface Flow extends EventEmitter {
+    setLoading(loading: boolean): any;
+    isLoading(): any;
+    setState(state: SelfServiceFlow): any;
+    hasState(): any;
+    getState(): SelfServiceFlow;
+    getMessages(): Array<UiText>;
+    getNode(name: string): UiNode | undefined;
+    getNodes(name: string): Array<UiNode>;
+    getNodesGroup(group: string): Array<UiNode>;
+    getValue(name: any): string | any;
+    setValue(name: string, value: string): any;
+    getValues(): SubmitSelfServiceFlowBody;
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/flow.interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/flows/index.d.ts

@@ -0,0 +1,7 @@
+export * from './flow.interfaces';
+export * from './registration.flow';
+export * from './verification.flow';
+export * from './recovery.flow';
+export * from './settings.flow';
+export * from './errors.flow';
+export * from './login.flow';

package/dist/flows/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./flow.interfaces"), exports);
+__exportStar(require("./registration.flow"), exports);
+__exportStar(require("./verification.flow"), exports);
+__exportStar(require("./recovery.flow"), exports);
+__exportStar(require("./settings.flow"), exports);
+__exportStar(require("./errors.flow"), exports);
+__exportStar(require("./login.flow"), exports);

package/dist/flows/kratos.client.d.ts

@@ -0,0 +1,4 @@
+import { V0alpha1Api } from '@ory/kratos-client';
+export declare class KratosClient extends V0alpha1Api {
+    constructor(basePath?: string);
+}

package/dist/flows/kratos.client.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosClient = void 0;
+const kratos_client_1 = require("@ory/kratos-client");
+const kratos_client_2 = require("@ory/kratos-client");
+class KratosClient extends kratos_client_2.V0alpha1Api {
+    constructor(basePath) {
+        if (!basePath && typeof window !== 'undefined') {
+            if (window.location.hostname === 'localhost') {
+                basePath = 'http://localhost:4433';
+            }
+            else if (window.location.hostname === '127.0.0.1') {
+                basePath = 'http://127.0.0.1:4433';
+            }
+            else if (window.location.hostname.startsWith('accounts.')) {
+                basePath = window.location.origin.replace('accounts.', 'identity.');
+            }
+        }
+        super(new kratos_client_1.Configuration({
+            basePath,
+        }));
+    }
+}
+exports.KratosClient = KratosClient;

package/dist/flows/login.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceLoginFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceLoginFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class LoginFlow extends AbstractFlow<SelfServiceLoginFlow, SubmitSelfServiceLoginFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/login.flow.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class LoginFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            const { data } = flowId
+                ? await this.client.getSelfServiceLoginFlow(flowId, undefined, { withCredentials: true })
+                : await this.client.initializeSelfServiceLoginFlowForBrowsers(false, {
+                    withCredentials: true,
+                });
+            this.setLoading(false);
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            this.setLoading(false);
+            const { status } = error
+                .response;
+            if (status === 400) {
+                this.complete();
+            }
+            else if (status === 410) {
+                this.complete('/auth/login');
+            }
+            else {
+                throw error;
+            }
+        }
+    }
+    async submit(method) {
+        const body = this.getValues();
+        if (method) {
+            body.method = method;
+        }
+        try {
+            await this.client.submitSelfServiceLoginFlow(this.getState().id, body, {
+                withCredentials: true,
+            });
+            this.complete();
+        }
+        catch (error) {
+            const { data, status } = error
+                .response;
+            if (status === 400) {
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+    }
+}
+exports.LoginFlow = LoginFlow;

package/dist/flows/recovery.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceRecoveryFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRecoveryFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class RecoveryFlow extends AbstractFlow<SelfServiceRecoveryFlow, SubmitSelfServiceRecoveryFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/recovery.flow.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecoveryFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class RecoveryFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            const { data } = flowId
+                ? await this.client.getSelfServiceRecoveryFlow(flowId, undefined, {
+                    withCredentials: true,
+                })
+                : await this.client.initializeSelfServiceRecoveryFlowForBrowsers({
+                    withCredentials: true,
+                });
+            this.setLoading(false);
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            this.setLoading(false);
+            const { status } = error
+                .response;
+            if (status === 410) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 403) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 400) {
+                this.complete();
+            }
+            else {
+                throw error;
+            }
+        }
+    }
+    async submit(method) {
+        const body = this.getValues();
+        if (method) {
+            body.method = method;
+        }
+        try {
+            const { data } = await this.client.submitSelfServiceRecoveryFlow(this.getState().id, undefined, body, {
+                withCredentials: true,
+            });
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            const { data, status } = error
+                .response;
+            if (status === 400) {
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+    }
+}
+exports.RecoveryFlow = RecoveryFlow;

package/dist/flows/registration.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceRegistrationFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceRegistrationFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class RegistrationFlow extends AbstractFlow<SelfServiceRegistrationFlow, SubmitSelfServiceRegistrationFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/registration.flow.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RegistrationFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class RegistrationFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            const { data } = flowId
+                ? await this.client.getSelfServiceRegistrationFlow(flowId, undefined, {
+                    withCredentials: true,
+                })
+                : await this.client.initializeSelfServiceRegistrationFlowForBrowsers({
+                    withCredentials: true,
+                });
+            this.setLoading(false);
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            this.setLoading(false);
+            const { status } = error
+                .response;
+            if (status === 410) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 403) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 400) {
+                this.complete();
+            }
+            else {
+                throw error;
+            }
+        }
+    }
+    async submit(method) {
+        const body = this.getValues();
+        if (method) {
+            body.method = method;
+        }
+        try {
+            await this.client.submitSelfServiceRegistrationFlow(this.getState().id, body, {
+                withCredentials: true,
+            });
+            this.complete();
+        }
+        catch (error) {
+            const { data, status } = error
+                .response;
+            if (status === 400) {
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+    }
+}
+exports.RegistrationFlow = RegistrationFlow;

package/dist/flows/settings.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceSettingsFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceSettingsFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class SettingsFlow extends AbstractFlow<SelfServiceSettingsFlow, SubmitSelfServiceSettingsFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/settings.flow.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class SettingsFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            const { data } = flowId
+                ? await this.client.getSelfServiceSettingsFlow(flowId, undefined, undefined, {
+                    withCredentials: true,
+                })
+                : await this.client.initializeSelfServiceSettingsFlowForBrowsers(undefined, {
+                    withCredentials: true,
+                });
+            this.setLoading(false);
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            this.setLoading(false);
+            const { status } = error
+                .response;
+            if (status === 410) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 403) {
+                this.complete(window.location.pathname);
+            }
+            else {
+                throw error;
+            }
+            throw error;
+        }
+    }
+    async submit(method) {
+        const body = this.getValues();
+        if (method) {
+            body.method = method;
+        }
+        try {
+            const { data } = await this.client.submitSelfServiceSettingsFlow(this.getState().id, undefined, body, {
+                withCredentials: true,
+            });
+            this.setState(data.flow);
+            this.setValues(data.flow);
+            this.emit('load', data.flow);
+        }
+        catch (error) {
+            const { data, status } = error
+                .response;
+            if (status === 400) {
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+    }
+}
+exports.SettingsFlow = SettingsFlow;

package/dist/flows/verification.flow.d.ts

@@ -0,0 +1,7 @@
+import type { SelfServiceVerificationFlow } from '@ory/kratos-client';
+import type { SubmitSelfServiceVerificationFlowBody } from '@ory/kratos-client';
+import { AbstractFlow } from './abstract.flow';
+export declare class VerificationFlow extends AbstractFlow<SelfServiceVerificationFlow, SubmitSelfServiceVerificationFlowBody> {
+    load(): Promise<void>;
+    submit(method?: string): Promise<void>;
+}

package/dist/flows/verification.flow.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerificationFlow = void 0;
+const abstract_flow_1 = require("./abstract.flow");
+class VerificationFlow extends abstract_flow_1.AbstractFlow {
+    async load() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (this.hasState() || this.isLoading()) {
+            return;
+        }
+        this.setLoading(true);
+        try {
+            const flowId = new URL(window.location.href).searchParams.get('flow');
+            const { data } = flowId
+                ? await this.client.getSelfServiceVerificationFlow(flowId, undefined, {
+                    withCredentials: true,
+                })
+                : await this.client.initializeSelfServiceVerificationFlowForBrowsers({
+                    withCredentials: true,
+                });
+            this.setLoading(false);
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            this.setLoading(false);
+            const { status } = error
+                .response;
+            if (status === 410) {
+                this.complete(window.location.pathname);
+            }
+            else if (status === 403) {
+                this.complete(window.location.pathname);
+            }
+            else {
+                throw error;
+            }
+            throw error;
+        }
+    }
+    async submit(method) {
+        const body = this.getValues();
+        if (method) {
+            body.method = method;
+        }
+        try {
+            const { data } = await this.client.submitSelfServiceVerificationFlow(this.getState().id, undefined, body, {
+                withCredentials: true,
+            });
+            this.setState(data);
+            this.setValues(data);
+            this.emit('load', data);
+        }
+        catch (error) {
+            const { data, status } = error
+                .response;
+            if (status === 400) {
+                this.setState(data);
+                this.setValues(data);
+                this.emit('load', data);
+            }
+        }
+    }
+}
+exports.VerificationFlow = VerificationFlow;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './providers';
+export * from './flows';
+export * from './ui';

package/dist/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./providers"), exports);
+__exportStar(require("./flows"), exports);
+__exportStar(require("./ui"), exports);

package/dist/providers/flows.context.d.ts

@@ -0,0 +1,3 @@
+import { Flow } from '../flows/flow.interfaces';
+export declare const Context: import("react").Context<Flow | null>;
+export declare const Provider: import("react").Provider<Flow | null>, Consumer: import("react").Consumer<Flow | null>;

package/dist/providers/flows.context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consumer = exports.Provider = exports.Context = void 0;
+const react_1 = require("react");
+exports.Context = react_1.createContext(null);
+exports.Provider = exports.Context.Provider, exports.Consumer = exports.Context.Consumer;

package/dist/providers/index.d.ts

@@ -0,0 +1,8 @@
+export * from './kratos-registration-flow.provider';
+export * from './kratos-verification-flow.provider';
+export * from './kratos-recovery-flow.provider';
+export * from './kratos-settings-flow.provider';
+export * from './kratos-errors-flow.provider';
+export * from './kratos-login-flow.provider';
+export * from './kratos-flow.provider';
+export * from './use-flow.hook';

package/dist/providers/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./kratos-registration-flow.provider"), exports);
+__exportStar(require("./kratos-verification-flow.provider"), exports);
+__exportStar(require("./kratos-recovery-flow.provider"), exports);
+__exportStar(require("./kratos-settings-flow.provider"), exports);
+__exportStar(require("./kratos-errors-flow.provider"), exports);
+__exportStar(require("./kratos-login-flow.provider"), exports);
+__exportStar(require("./kratos-flow.provider"), exports);
+__exportStar(require("./use-flow.hook"), exports);

package/dist/providers/kratos-errors-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosErrorsFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-errors-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosErrorsFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosErrorsFlowProvider = (props) => react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'errors' }));
+exports.KratosErrorsFlowProvider = KratosErrorsFlowProvider;

package/dist/providers/kratos-flow.provider.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { FlowName } from '../flows/flow.interfaces';
+export interface KratosFlowProviderProps {
+    basePath?: string;
+    name: FlowName;
+}
+export declare const KratosFlowProvider: FC<KratosFlowProviderProps>;

package/dist/providers/kratos-flow.provider.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const registration_flow_1 = require("../flows/registration.flow");
+const verification_flow_1 = require("../flows/verification.flow");
+const recovery_flow_1 = require("../flows/recovery.flow");
+const settings_flow_1 = require("../flows/settings.flow");
+const errors_flow_1 = require("../flows/errors.flow");
+const login_flow_1 = require("../flows/login.flow");
+const kratos_client_1 = require("../flows/kratos.client");
+const flows_context_1 = require("./flows.context");
+const KratosFlowProvider = ({ name, basePath, children }) => {
+    const client = react_2.useMemo(() => new kratos_client_1.KratosClient(basePath), [basePath]);
+    const flow = react_2.useMemo(() => {
+        if (name === 'login') {
+            return new login_flow_1.LoginFlow(client);
+        }
+        if (name === 'registration') {
+            return new registration_flow_1.RegistrationFlow(client);
+        }
+        if (name === 'verification') {
+            return new verification_flow_1.VerificationFlow(client);
+        }
+        if (name === 'recovery') {
+            return new recovery_flow_1.RecoveryFlow(client);
+        }
+        if (name === 'settings') {
+            return new settings_flow_1.SettingsFlow(client);
+        }
+        if (name === 'errors') {
+            return new errors_flow_1.ErrorsFlow(client);
+        }
+        throw new Error(`Unkown flow: ${name}`);
+    }, [name, client]);
+    return react_1.default.createElement(flows_context_1.Provider, { value: flow }, children);
+};
+exports.KratosFlowProvider = KratosFlowProvider;

package/dist/providers/kratos-login-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosLoginFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-login-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosLoginFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosLoginFlowProvider = (props) => react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'login' }));
+exports.KratosLoginFlowProvider = KratosLoginFlowProvider;

package/dist/providers/kratos-recovery-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosRecoveryFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-recovery-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosRecoveryFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosRecoveryFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'recovery' })));
+exports.KratosRecoveryFlowProvider = KratosRecoveryFlowProvider;

package/dist/providers/kratos-registration-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosRegistrationFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-registration-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosRegistrationFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosRegistrationFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'registration' })));
+exports.KratosRegistrationFlowProvider = KratosRegistrationFlowProvider;

package/dist/providers/kratos-settings-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosSettingsFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-settings-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosSettingsFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosSettingsFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'settings' })));
+exports.KratosSettingsFlowProvider = KratosSettingsFlowProvider;

package/dist/providers/kratos-verification-flow.provider.d.ts

@@ -0,0 +1 @@
+export declare const KratosVerificationFlowProvider: (props: any) => JSX.Element;

package/dist/providers/kratos-verification-flow.provider.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KratosVerificationFlowProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const kratos_flow_provider_1 = require("./kratos-flow.provider");
+const KratosVerificationFlowProvider = (props) => (react_1.default.createElement(kratos_flow_provider_1.KratosFlowProvider, Object.assign({}, props, { name: 'verification' })));
+exports.KratosVerificationFlowProvider = KratosVerificationFlowProvider;

package/dist/providers/use-flow.hook.d.ts

@@ -0,0 +1,2 @@
+import { Flow } from '../flows/flow.interfaces';
+export declare const useFlow: () => Flow;

package/dist/providers/use-flow.hook.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFlow = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+const react_3 = require("react");
+const flows_context_1 = require("./flows.context");
+const useFlow = () => {
+    const flow = react_1.useContext(flows_context_1.Context);
+    if (!flow) {
+        throw new Error('Missing <KratosFlowProvider>');
+    }
+    const [, setState] = react_3.useState(null);
+    react_2.useEffect(() => {
+        flow.load();
+        const callback = (flowState) => {
+            setState(flowState);
+        };
+        flow.on('load', callback);
+        return () => {
+            flow.off('load', callback);
+        };
+    }, [flow]);
+    return flow;
+};
+exports.useFlow = useFlow;

package/dist/ui/flow-error.component.d.ts

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+import { FC } from 'react';
+interface SelfServiceErrorProps {
+    code?: number;
+    status?: string;
+    reason?: string;
+    message?: string;
+}
+export interface FlowErrorProps {
+    children: (error: SelfServiceErrorProps) => ReactElement<any>;
+}
+export declare const FlowError: FC<FlowErrorProps>;
+export {};

package/dist/ui/flow-error.component.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowError = void 0;
+const providers_1 = require("../providers");
+const FlowError = ({ children }) => {
+    const flow = providers_1.useFlow();
+    const state = flow.getState();
+    if (typeof children === 'function' && (state === null || state === void 0 ? void 0 : state.error)) {
+        return children(state.error);
+    }
+    return null;
+};
+exports.FlowError = FlowError;

package/dist/ui/flow-form.component.d.ts

@@ -0,0 +1,4 @@
+export declare const FlowForm: ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => JSX.Element | null;

package/dist/ui/flow-form.component.js

@@ -0,0 +1,30 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowForm = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const providers_1 = require("../providers");
+const FlowForm = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const flow = providers_1.useFlow();
+    const ui = react_2.useMemo(() => { var _a; return (_a = flow.getState()) === null || _a === void 0 ? void 0 : _a.ui; }, [flow.getState()]);
+    if (!ui) {
+        return null;
+    }
+    return (react_1.default.createElement("form", Object.assign({}, props, { action: ui.action, method: ui.method }), children));
+};
+exports.FlowForm = FlowForm;

package/dist/ui/flow-messages.component.d.ts

@@ -0,0 +1,7 @@
+import { UiText } from '@ory/kratos-client';
+import { ReactElement } from 'react';
+import { FC } from 'react';
+export interface FlowMessagesProps {
+    children: (messages: Array<UiText>) => ReactElement<any>;
+}
+export declare const FlowMessages: FC<FlowMessagesProps>;

package/dist/ui/flow-messages.component.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowMessages = void 0;
+const providers_1 = require("../providers");
+const FlowMessages = ({ children }) => {
+    const flow = providers_1.useFlow();
+    const messages = flow.getMessages();
+    if (typeof children === 'function' && messages) {
+        return children(messages);
+    }
+    return null;
+};
+exports.FlowMessages = FlowMessages;

package/dist/ui/flow-node-messages.component.d.ts

@@ -0,0 +1,8 @@
+import { UiText } from '@ory/kratos-client';
+import { ReactElement } from 'react';
+import { FC } from 'react';
+export interface FlowNodeMessagesProps {
+    name: string;
+    children: (messages: Array<UiText>) => ReactElement<any>;
+}
+export declare const FlowNodeMessages: FC<FlowNodeMessagesProps>;

package/dist/ui/flow-node-messages.component.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowNodeMessages = void 0;
+const providers_1 = require("../providers");
+const FlowNodeMessages = ({ name, children }) => {
+    const flow = providers_1.useFlow();
+    const node = flow.getNode(name);
+    if (typeof children === 'function' && (node === null || node === void 0 ? void 0 : node.messages)) {
+        return children(node.messages);
+    }
+    return null;
+};
+exports.FlowNodeMessages = FlowNodeMessages;

package/dist/ui/flow-node.component.d.ts

@@ -0,0 +1,23 @@
+import { UiNode } from '@ory/kratos-client';
+import { ReactElement } from 'react';
+import { FC } from 'react';
+import { FormEvent } from 'react';
+interface FlowUiNodeAttributes {
+    disabled: boolean;
+    name: string;
+    pattern?: string;
+    required?: boolean;
+    type: string;
+    value?: any | null;
+    src: string;
+}
+interface FlowUiNode extends Omit<UiNode, 'attributes'> {
+    attributes: FlowUiNodeAttributes;
+}
+declare type OnChangeCallback = (event: FormEvent<HTMLInputElement> | string | any) => void;
+export interface FlowNodeProps {
+    name: string;
+    children: (node: FlowUiNode, value: string | any, callback: OnChangeCallback) => ReactElement<any>;
+}
+export declare const FlowNode: FC<FlowNodeProps>;
+export {};

package/dist/ui/flow-node.component.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowNode = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+const react_3 = require("react");
+const providers_1 = require("../providers");
+const FlowNode = ({ name, children }) => {
+    const flow = providers_1.useFlow();
+    const node = react_1.useMemo(() => flow.getNode(name), [name, flow, flow.getState()]);
+    const [value = '', setValue] = react_2.useState(flow.getValue(name));
+    const onChange = react_3.useCallback((event) => {
+        if (event && event.target) {
+            setValue(event.target.value);
+            flow.setValue(name, event.target.value);
+        }
+        else {
+            setValue(event);
+            flow.setValue(name, event);
+        }
+    }, [name, flow, setValue]);
+    if (node && typeof children === 'function') {
+        return children(node, value, onChange);
+    }
+    return null;
+};
+exports.FlowNode = FlowNode;

package/dist/ui/flow-nodes-group.component.d.ts

@@ -0,0 +1,21 @@
+import { UiNode } from '@ory/kratos-client';
+import { ReactElement } from 'react';
+import { FC } from 'react';
+interface FlowUiNodeAttributes {
+    disabled: boolean;
+    name: string;
+    pattern?: string;
+    required?: boolean;
+    type: string;
+    value?: any | null;
+    src: string;
+}
+interface FlowUiNode extends Omit<UiNode, 'attributes'> {
+    attributes: FlowUiNodeAttributes;
+}
+export interface FlowNodesGroupProps {
+    name: string;
+    children: (node: Array<FlowUiNode>) => ReactElement<any>;
+}
+export declare const FlowNodesGroup: FC<FlowNodesGroupProps>;
+export {};

package/dist/ui/flow-nodes-group.component.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowNodesGroup = void 0;
+const providers_1 = require("../providers");
+const FlowNodesGroup = ({ name, children }) => {
+    const flow = providers_1.useFlow();
+    const nodes = flow.getNodesGroup(name);
+    if (typeof children === 'function') {
+        return children(nodes);
+    }
+    return null;
+};
+exports.FlowNodesGroup = FlowNodesGroup;

package/dist/ui/flow-submit.component.d.ts

@@ -0,0 +1,4 @@
+export declare const FlowSubmit: ({ method, children }: {
+    method: any;
+    children: any;
+}) => any;

package/dist/ui/flow-submit.component.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowSubmit = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+const providers_1 = require("../providers");
+const FlowSubmit = ({ method, children }) => {
+    const flow = providers_1.useFlow();
+    if (typeof children === 'function') {
+        return children((mtd) => flow.submit(mtd));
+    }
+    if (react_1.isValidElement(children)) {
+        return react_2.cloneElement(children, {
+            onClick: () => {
+                flow.submit(method);
+            },
+        });
+    }
+    return null;
+};
+exports.FlowSubmit = FlowSubmit;

package/dist/ui/index.d.ts

@@ -0,0 +1,7 @@
+export * from './flow-form.component';
+export * from './flow-node.component';
+export * from './flow-error.component';
+export * from './flow-submit.component';
+export * from './flow-messages.component';
+export * from './flow-nodes-group.component';
+export * from './flow-node-messages.component';

package/dist/ui/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./flow-form.component"), exports);
+__exportStar(require("./flow-node.component"), exports);
+__exportStar(require("./flow-error.component"), exports);
+__exportStar(require("./flow-submit.component"), exports);
+__exportStar(require("./flow-messages.component"), exports);
+__exportStar(require("./flow-nodes-group.component"), exports);
+__exportStar(require("./flow-node-messages.component"), exports);

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@atls/react-kratos-browser-flows",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn app library build",
+    "postpack": "rm -rf dist",
+    "prepack": "yarn run build"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "@types/events": "^3.0.0",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "@types/testing-library__jest-dom": "^5.14.1",
+    "axios": "^0.21.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "typings": "dist/index.d.ts"
+  },
+  "dependencies": {
+    "@ory/kratos-client": "^0.7.6-alpha.1",
+    "events": "^3.3.0"
+  },
+  "typings": "dist/index.d.ts"
+}