@antscorp/antsomi-ui 1.3.7-beta.70 → 1.3.7-beta.72

package/es/components/organism/LoginV2/utils/oryFlows.d.ts

@@ -0,0 +1,100 @@
+import type { FetchLike, LocationLike } from './ory';
+export declare const DEFAULT_KRATOS_RECOVERY_URL = "/self-service/recovery/browser";
+/** Native recovery must never resolve a login flow or an OAuth callback query. */
+export declare const isOryRecoveryRequest: (location: LocationLike & {
+    pathname?: string;
+}) => boolean;
+export type MfaMethod = 'totp' | 'lookup_secret' | 'code' | 'webauthn';
+export type OryMfaPreparation = {
+    flowId: string;
+    methods: MfaMethod[];
+    email: string;
+    emailSent: boolean;
+};
+/** Start one AAL2 flow and discover only the methods bound to this identity. */
+export declare const prepareOryMfa: ({ location, kratosLoginUrl, fetchImpl, }: {
+    location: LocationLike;
+    kratosLoginUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<OryMfaPreparation>;
+/** Ask Kratos to send to the address bound to the flow; callers cannot supply another email. */
+export declare const sendOryEmailMfa: ({ location, flowId, kratosLoginUrl, fetchImpl, }: {
+    location: LocationLike;
+    flowId: string;
+    kratosLoginUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    status: 'sent';
+}>;
+/**
+ * Complete a second factor for the signed-in Kratos session: an authenticator
+ * code or a one-time backup code. Kratos verifies it; success is confirmed by
+ * re-reading the session so a half-finished upgrade is never reported as done.
+ */
+export declare const submitOryMfa: ({ location, method, code, flowId, kratosLoginUrl, sessionUrl, fetchImpl, }: {
+    location: LocationLike;
+    method: Exclude<MfaMethod, 'webauthn'>;
+    code: string;
+    flowId?: string;
+    kratosLoginUrl?: string;
+    sessionUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    status: 'verified';
+}>;
+/** Complete a Kratos AAL2 WebAuthn challenge using the browser's credential API. */
+export declare const submitOryWebauthn: ({ location, flowId, kratosLoginUrl, sessionUrl, fetchImpl, getCredential, }: {
+    location: LocationLike;
+    flowId: string;
+    kratosLoginUrl?: string;
+    sessionUrl?: string;
+    fetchImpl?: FetchLike;
+    getCredential?: (options: CredentialRequestOptions) => Promise<Credential | null>;
+}) => Promise<{
+    status: 'verified';
+}>;
+/**
+ * Step 1 of password recovery: ask Kratos to email a code. The response is the
+ * same for unknown addresses, so nothing here reveals whether an account exists.
+ */
+export declare const startOryRecovery: ({ location, email, recoveryUrl, fetchImpl, }: {
+    location: LocationLike;
+    email: string;
+    recoveryUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    flowId: string;
+}>;
+/** Resume only a browser recovery flow read from Kratos with this browser's cookies. */
+export declare const resumeOryRecovery: ({ location, flowId, recoveryUrl, fetchImpl, }: {
+    location: LocationLike;
+    flowId: string;
+    recoveryUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    flowId: string;
+    step: 'email' | 'code';
+}>;
+/**
+ * Step 2: verify the emailed code. Kratos signs the user in with a privileged
+ * session and hands back the settings flow used to choose a new password.
+ */
+export declare const verifyOryRecoveryCode: ({ location, flowId, code, recoveryUrl, fetchImpl, }: {
+    location: LocationLike;
+    flowId: string;
+    code: string;
+    recoveryUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    settingsFlowId: string;
+}>;
+/** Step 3: set the new password on the settings flow opened by recovery. */
+export declare const setOryRecoveredPassword: ({ location, settingsFlowId, password, recoveryUrl, fetchImpl, }: {
+    location: LocationLike;
+    settingsFlowId: string;
+    password: string;
+    recoveryUrl?: string;
+    fetchImpl?: FetchLike;
+}) => Promise<{
+    status: 'updated';
+}>;

package/es/components/organism/LoginV2/utils/oryFlows.js

@@ -0,0 +1,319 @@
+import { checkOrySession, DEFAULT_KRATOS_LOGIN_URL, DEFAULT_SESSION_URL, getOrigin, makeUserError, readJSON, toURL, } from './ory';
+export const DEFAULT_KRATOS_RECOVERY_URL = '/self-service/recovery/browser';
+/** Native recovery must never resolve a login flow or an OAuth callback query. */
+export const isOryRecoveryRequest = (location) => location.pathname === '/recovery' || location.pathname === '/recovery/';
+const FORM = { Accept: 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' };
+const getRequest = (fetchImpl) => {
+    const request = fetchImpl || (typeof fetch === 'function' ? fetch : undefined);
+    if (!request) {
+        throw makeUserError('ORY_FLOW_UNAVAILABLE', 'Kratos flow requests are unavailable', 'Secure verification is unavailable. Please try again.');
+    }
+    return request;
+};
+/** Kratos' own explanation for a rejected field, e.g. a password policy failure. */
+const flowMessage = (flow) => {
+    const ui = flow?.ui;
+    const fromNodes = ui?.nodes?.flatMap(node => node.messages || []).find(message => message.text);
+    return fromNodes?.text || ui?.messages?.find(message => message.text)?.text || '';
+};
+const csrfOf = (flow) => flow.ui?.nodes?.find(node => node.attributes?.name === 'csrf_token')?.attributes?.value || '';
+/** `/self-service/x/browser` initiates a flow; `/self-service/x` submits it. */
+const submitPath = (browserUrl) => browserUrl.replace(/\/browser\/?$/, '');
+const startFlow = async (request, location, browserUrl, params = {}) => {
+    const url = toURL(browserUrl, getOrigin(location));
+    Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
+    const response = await request(url.toString(), {
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+    });
+    const flow = (await readJSON(response));
+    if (!response.ok || !flow?.id || !csrfOf(flow)) {
+        throw makeUserError('ORY_FLOW_FAILED', 'Kratos flow could not be initialized', 'Unable to start secure verification. Please try again.', response.status);
+    }
+    return flow;
+};
+const submitFlow = async (request, location, url, flowId, fields) => {
+    const target = toURL(url, getOrigin(location));
+    target.searchParams.set('flow', flowId);
+    const response = await request(target.toString(), {
+        method: 'POST',
+        credentials: 'include',
+        headers: FORM,
+        body: new URLSearchParams(fields).toString(),
+    });
+    return { response, payload: await readJSON(response) };
+};
+const MFA_FIELD = {
+    totp: 'totp_code',
+    lookup_secret: 'lookup_secret',
+    code: 'code',
+};
+const readLoginFlow = async (request, location, kratosLoginUrl, flowId) => {
+    const url = toURL(`${submitPath(kratosLoginUrl)}/flows`, getOrigin(location));
+    url.searchParams.set('id', flowId);
+    const response = await request(url.toString(), {
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+    });
+    const flow = (await readJSON(response));
+    if (!response.ok || !flow?.id || !csrfOf(flow)) {
+        throw makeUserError('ORY_MFA_FLOW_EXPIRED', 'Kratos MFA flow is no longer available', 'This verification request has expired. Please sign in again.', response.status);
+    }
+    return flow;
+};
+/** Start one AAL2 flow and discover only the methods bound to this identity. */
+export const prepareOryMfa = async ({ location, kratosLoginUrl = DEFAULT_KRATOS_LOGIN_URL, fetchImpl, }) => {
+    const flow = await startFlow(getRequest(fetchImpl), location, kratosLoginUrl, { aal: 'aal2' });
+    const nodes = flow.ui?.nodes || [];
+    const names = new Set(nodes.map(node => node.attributes?.name));
+    const methods = [];
+    if (names.has('totp_code'))
+        methods.push('totp');
+    if (names.has('lookup_secret'))
+        methods.push('lookup_secret');
+    if (names.has('webauthn_login_trigger') && names.has('webauthn_login'))
+        methods.push('webauthn');
+    // This Kratos build names the code method's bound-address field "identifier"
+    // (not "address", used by some other Kratos releases/docs).
+    if (names.has('identifier') && nodes.some(node => node.group === 'code')) {
+        methods.push('code');
+    }
+    if (!methods.length) {
+        throw makeUserError('ORY_MFA_METHOD_UNAVAILABLE', 'Kratos flow has no second-factor method', 'No verification method is available for your account.');
+    }
+    const identifier = nodes.find(node => node.group === 'code' && node.attributes?.name === 'identifier')?.attributes?.value;
+    return {
+        flowId: flow.id,
+        methods,
+        email: typeof identifier === 'string' ? identifier : '',
+        emailSent: flow.state === 'sent_email',
+    };
+};
+/** Ask Kratos to send to the address bound to the flow; callers cannot supply another email. */
+export const sendOryEmailMfa = async ({ location, flowId, kratosLoginUrl = DEFAULT_KRATOS_LOGIN_URL, fetchImpl, }) => {
+    const request = getRequest(fetchImpl);
+    const flow = await readLoginFlow(request, location, kratosLoginUrl, flowId);
+    if (flow.state === 'sent_email')
+        return { status: 'sent' };
+    const identifier = flow.ui?.nodes?.find(node => node.group === 'code' && node.attributes?.name === 'identifier')?.attributes?.value;
+    if (typeof identifier !== 'string' || !identifier) {
+        throw makeUserError('ORY_MFA_METHOD_UNAVAILABLE', 'Kratos flow has no bound email address', 'Email verification is not available for your account.');
+    }
+    const { payload } = await submitFlow(request, location, submitPath(kratosLoginUrl), flowId, {
+        method: 'code',
+        identifier,
+        csrf_token: csrfOf(flow),
+    });
+    if (payload?.state !== 'sent_email') {
+        throw makeUserError('ORY_MFA_EMAIL_FAILED', 'Kratos did not send the MFA email', 'We could not send a verification code. Please try again.');
+    }
+    return { status: 'sent' };
+};
+/**
+ * Complete a second factor for the signed-in Kratos session: an authenticator
+ * code or a one-time backup code. Kratos verifies it; success is confirmed by
+ * re-reading the session so a half-finished upgrade is never reported as done.
+ */
+export const submitOryMfa = async ({ location, method, code, flowId, kratosLoginUrl = DEFAULT_KRATOS_LOGIN_URL, sessionUrl = DEFAULT_SESSION_URL, fetchImpl, }) => {
+    const request = getRequest(fetchImpl);
+    const flow = flowId
+        ? await readLoginFlow(request, location, kratosLoginUrl, flowId)
+        : await startFlow(request, location, kratosLoginUrl, { aal: 'aal2' });
+    const field = MFA_FIELD[method];
+    if (!flow.ui?.nodes?.some(node => node.attributes?.name === field)) {
+        throw makeUserError('ORY_MFA_METHOD_UNAVAILABLE', `Kratos flow has no ${method} input`, 'This verification method is not available for your account.');
+    }
+    const { response, payload } = await submitFlow(request, location, submitPath(kratosLoginUrl), flow.id, { method, [field]: code.trim(), csrf_token: csrfOf(flow) });
+    if (!response.ok && payload?.error?.id !== 'browser_location_change_required') {
+        throw makeUserError('ORY_MFA_INVALID_CODE', 'Kratos rejected the verification code', method === 'totp'
+            ? 'That code is not valid. Check your authenticator app and try again.'
+            : method === 'lookup_secret'
+                ? 'That backup code is not valid or was already used.'
+                : 'That email code is not valid or has expired.', response.status);
+    }
+    try {
+        await checkOrySession({ sessionUrl, fetchImpl });
+    }
+    catch (error) {
+        throw makeUserError('ORY_MFA_INCOMPLETE', 'The session is still missing the second factor', 'Verification could not be completed. Please try again.');
+    }
+    return { status: 'verified' };
+};
+const decodeWebauthn = (value) => Uint8Array.from(atob(value.replace(/-/g, '+').replace(/_/g, '/')), char => char.charCodeAt(0));
+const encodeWebauthn = (value) => {
+    if (!value)
+        return '';
+    return btoa(String.fromCharCode(...new Uint8Array(value)))
+        .replace(/\+/g, '-')
+        .replace(/\//g, '_')
+        .replace(/=+$/, '');
+};
+/** Complete a Kratos AAL2 WebAuthn challenge using the browser's credential API. */
+export const submitOryWebauthn = async ({ location, flowId, kratosLoginUrl = DEFAULT_KRATOS_LOGIN_URL, sessionUrl = DEFAULT_SESSION_URL, fetchImpl, getCredential = options => navigator.credentials.get(options), }) => {
+    if (typeof PublicKeyCredential === 'undefined') {
+        throw makeUserError('ORY_WEBAUTHN_UNAVAILABLE', 'WebAuthn is unavailable', 'This browser does not support security keys or device authentication.');
+    }
+    const request = getRequest(fetchImpl);
+    const flow = await readLoginFlow(request, location, kratosLoginUrl, flowId);
+    const names = flow.ui?.nodes || [];
+    const trigger = names.find(node => node.attributes?.name === 'webauthn_login_trigger')?.attributes?.value;
+    if (typeof trigger !== 'string' || !names.some(node => node.attributes?.name === 'webauthn_login')) {
+        throw makeUserError('ORY_MFA_METHOD_UNAVAILABLE', 'Kratos flow has no WebAuthn challenge', 'Security key verification is not available for this account.');
+    }
+    const options = JSON.parse(trigger);
+    const credential = (await getCredential({
+        publicKey: {
+            ...options.publicKey,
+            challenge: decodeWebauthn(options.publicKey.challenge),
+            allowCredentials: options.publicKey.allowCredentials?.map(item => ({
+                ...item,
+                id: decodeWebauthn(item.id),
+            })),
+        },
+    }));
+    if (!credential) {
+        throw makeUserError('ORY_WEBAUTHN_CANCELLED', 'WebAuthn returned no credential', 'Security key verification was cancelled.');
+    }
+    const assertion = credential.response;
+    const proof = JSON.stringify({
+        id: credential.id,
+        rawId: encodeWebauthn(credential.rawId),
+        type: credential.type,
+        response: {
+            authenticatorData: encodeWebauthn(assertion.authenticatorData),
+            clientDataJSON: encodeWebauthn(assertion.clientDataJSON),
+            signature: encodeWebauthn(assertion.signature),
+            userHandle: encodeWebauthn(assertion.userHandle),
+        },
+    });
+    const identifier = names.find(node => node.group === 'default' &&
+        node.attributes?.name === 'identifier')?.attributes?.value;
+    if (!identifier) {
+        throw makeUserError('ORY_MFA_METHOD_UNAVAILABLE', 'Kratos flow has no bound identifier', 'Security key verification is not available for this account.');
+    }
+    const { response, payload } = await submitFlow(request, location, submitPath(kratosLoginUrl), flowId, {
+        method: 'webauthn',
+        identifier,
+        webauthn_login: proof,
+        csrf_token: csrfOf(flow),
+    });
+    if (!response.ok && payload?.error?.id !== 'browser_location_change_required') {
+        throw makeUserError('ORY_WEBAUTHN_REJECTED', 'Kratos rejected the WebAuthn assertion', 'Security key verification failed. Please try again.', response.status);
+    }
+    await checkOrySession({ sessionUrl, fetchImpl });
+    return { status: 'verified' };
+};
+const settingsUrlFor = (recoveryUrl) => recoveryUrl.replace(/\/recovery\/browser\/?$/, '/settings/browser');
+/**
+ * Step 1 of password recovery: ask Kratos to email a code. The response is the
+ * same for unknown addresses, so nothing here reveals whether an account exists.
+ */
+export const startOryRecovery = async ({ location, email, recoveryUrl = DEFAULT_KRATOS_RECOVERY_URL, fetchImpl, }) => {
+    const request = getRequest(fetchImpl);
+    const flow = await startFlow(request, location, recoveryUrl);
+    const { response, payload } = await submitFlow(request, location, submitPath(recoveryUrl), flow.id, { method: 'code', email: email.trim(), csrf_token: csrfOf(flow) });
+    if (!response.ok) {
+        throw makeUserError('ORY_RECOVERY_REQUEST_FAILED', 'Kratos rejected the recovery request', flowMessage(payload) || 'We could not send a code. Check the email address and try again.', response.status);
+    }
+    return { flowId: flow.id };
+};
+const settingsFlowIdFrom = (payload, location) => {
+    const continueWith = Array.isArray(payload?.continue_with) ? payload.continue_with : [];
+    const shown = continueWith.find((item) => item?.action === 'show_settings_ui');
+    if (typeof shown?.flow?.id === 'string')
+        return shown.flow.id;
+    const target = payload?.redirect_browser_to;
+    if (typeof target === 'string') {
+        try {
+            const url = new URL(target, getOrigin(location));
+            if (url.origin === getOrigin(location) && url.pathname === '/settings') {
+                return url.searchParams.get('flow') || '';
+            }
+        }
+        catch (error) {
+            return '';
+        }
+    }
+    return '';
+};
+/** Resume only a browser recovery flow read from Kratos with this browser's cookies. */
+export const resumeOryRecovery = async ({ location, flowId, recoveryUrl = DEFAULT_KRATOS_RECOVERY_URL, fetchImpl, }) => {
+    const expired = (status) => makeUserError('ORY_RECOVERY_EXPIRED', 'The recovery flow cannot be resumed', 'This recovery request is unavailable or has expired. Please start again.', status);
+    if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(flowId)) {
+        throw expired();
+    }
+    const url = toURL(`${submitPath(recoveryUrl)}/flows`, getOrigin(location));
+    url.searchParams.set('id', flowId);
+    const response = await getRequest(fetchImpl)(url.toString(), {
+        credentials: 'include', headers: { Accept: 'application/json' },
+    });
+    const flow = (await readJSON(response));
+    if (!response.ok || flow?.id !== flowId || flow.type !== 'browser' || !csrfOf(flow) ||
+        !flow.expires_at || !Number.isFinite(Date.parse(flow.expires_at)) ||
+        Date.parse(flow.expires_at) <= Date.now()) {
+        throw expired(response.status);
+    }
+    // A consumed challenge does not prove a settings continuation on a later GET.
+    // Only the successful code POST below may supply that continuation.
+    const names = new Set(flow.ui?.nodes?.map(node => node.attributes?.name));
+    if (flow.state === 'sent_email' && names.has('code'))
+        return { flowId, step: 'code' };
+    if (flow.state === 'choose_method' && names.has('email'))
+        return { flowId, step: 'email' };
+    throw expired(response.status);
+};
+/**
+ * Step 2: verify the emailed code. Kratos signs the user in with a privileged
+ * session and hands back the settings flow used to choose a new password.
+ */
+export const verifyOryRecoveryCode = async ({ location, flowId, code, recoveryUrl = DEFAULT_KRATOS_RECOVERY_URL, fetchImpl, }) => {
+    const request = getRequest(fetchImpl);
+    const flowUrl = toURL(`${submitPath(recoveryUrl)}/flows`, getOrigin(location));
+    flowUrl.searchParams.set('id', flowId);
+    const flowResponse = await request(flowUrl.toString(), {
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+    });
+    const flow = (await readJSON(flowResponse));
+    if (!flowResponse.ok || !csrfOf(flow)) {
+        throw makeUserError('ORY_RECOVERY_EXPIRED', 'The recovery flow is no longer available', 'This recovery request has expired. Please start again.', flowResponse.status);
+    }
+    const { response, payload } = await submitFlow(request, location, submitPath(recoveryUrl), flowId, { method: 'code', code: code.trim(), csrf_token: csrfOf(flow) });
+    const settingsFlowId = settingsFlowIdFrom(payload, location);
+    const advanced = (response.ok && payload?.state === 'passed_challenge') ||
+        (response.status === 422 && payload?.error?.id === 'browser_location_change_required');
+    if (!advanced || !settingsFlowId) {
+        throw makeUserError('ORY_RECOVERY_INVALID_CODE', 'Kratos rejected the recovery code', 'That code is not valid or has expired.', response.status);
+    }
+    await readRecoveredSettingsFlow(request, location, recoveryUrl, settingsFlowId);
+    return { settingsFlowId };
+};
+const readRecoveredSettingsFlow = async (request, location, recoveryUrl, settingsFlowId) => {
+    const flowUrl = toURL(`${submitPath(settingsUrlFor(recoveryUrl))}/flows`, getOrigin(location));
+    flowUrl.searchParams.set('id', settingsFlowId);
+    const response = await request(flowUrl.toString(), {
+        credentials: 'include', headers: { Accept: 'application/json' },
+    });
+    const flow = (await readJSON(response));
+    if (!response.ok || flow?.id !== settingsFlowId || flow.type !== 'browser' ||
+        !flow.expires_at || !Number.isFinite(Date.parse(flow.expires_at)) ||
+        Date.parse(flow.expires_at) <= Date.now() || !csrfOf(flow) ||
+        !flow.ui?.nodes?.some(node => node.attributes?.name === 'password')) {
+        const needsMfa = response.status === 403;
+        throw makeUserError(needsMfa ? 'ORY_RECOVERY_MFA_REQUIRED' : 'ORY_RECOVERY_EXPIRED', 'The recovery settings flow could not be opened', needsMfa
+            ? 'Your account uses two-step verification, so the password cannot be changed here. Please contact support.'
+            : 'This recovery request is unavailable or has expired. Please start again.', response.status);
+    }
+    return flow;
+};
+/** Step 3: set the new password on the settings flow opened by recovery. */
+export const setOryRecoveredPassword = async ({ location, settingsFlowId, password, recoveryUrl = DEFAULT_KRATOS_RECOVERY_URL, fetchImpl, }) => {
+    const request = getRequest(fetchImpl);
+    const settingsBrowserUrl = settingsUrlFor(recoveryUrl);
+    const flow = await readRecoveredSettingsFlow(request, location, recoveryUrl, settingsFlowId);
+    const { response, payload } = await submitFlow(request, location, submitPath(settingsBrowserUrl), settingsFlowId, { method: 'password', password, csrf_token: csrfOf(flow) });
+    if (!response.ok || payload?.state !== 'success') {
+        throw makeUserError('ORY_RECOVERY_PASSWORD_REJECTED', 'Kratos rejected the new password', flowMessage(payload) || 'That password cannot be used. Please choose a different one.', response.status);
+    }
+    return { status: 'updated' };
+};

package/es/components/organism/Menu/styled.js

@@ -1,10 +1,10 @@
 // Components
 import styled from 'styled-components';
 import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
-export const ExpandIcon = styled(Icon) `
-  cursor: pointer;
-  position: absolute;
-  right: 10px;
-  transition: all 200ms;
-  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
+export const ExpandIcon = styled(Icon) `
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  transition: all 200ms;
+  transform: rotate(${props => (props.$isOpen ? 180 : 0)}deg);
 `;