chore(ui): get rid of axios dependency

Author: azasypkin

components/secutils-webui/package-lock.json

@@ -44,7 +44,7 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@monaco-editor/react": "^4.7.0",
-    "@ory/client": "^1.22.23",
+    "@ory/kratos-client-fetch": "^25.4.0",
     "moment": "^2.30.1",
     "monaco-editor": "^0.55.1",
     "nanoid": "^5.1.6",

components/secutils-webui/package.json

@@ -19,7 +19,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import type { UiNodeInputAttributes } from '@ory/client';
+import type { UiNodeInputAttributes } from '@ory/kratos-client-fetch';
 import { unix, utc } from 'moment/moment';
 import type { ChangeEvent } from 'react';
 import { lazy, useCallback, useState } from 'react';
@@ -89,7 +89,7 @@ export function SettingsFlyout({ onClose }: Props) {
                   refreshUiState();
                 };
 
-                const { data: flow } = await api.createBrowserSettingsFlow();
+                const flow = await api.createBrowserSettingsFlow();
                 const publicKeyNode = flow?.ui?.nodes?.find(
                   (node) =>
                     node.attributes.node_type === 'input' && node.attributes.name === 'webauthn_register_trigger',
@@ -123,7 +123,7 @@ export function SettingsFlyout({ onClose }: Props) {
                   setIsReauthenticateModalVisible({
                     visible: true,
                     action: async () => {
-                      const { data: updatedFlow } = await api.getSettingsFlow({ id: flow.id });
+                      const updatedFlow = await api.getSettingsFlow({ id: flow.id });
                       await api.updateSettingsFlow({
                         flow: flow.id,
                         updateSettingsFlowBody: {
@@ -142,8 +142,8 @@ export function SettingsFlyout({ onClose }: Props) {
 
                 updateState();
               })
-              .catch((err: Error) => {
-                const originalErrorMessage = getSecurityErrorMessage(err);
+              .catch(async (err: Error) => {
+                const originalErrorMessage = await getSecurityErrorMessage(err);
                 setSetPasskeyStatus({ status: 'failed', error: originalErrorMessage ?? 'Unknown error' });
 
                 addToast({
@@ -235,7 +235,7 @@ export function SettingsFlyout({ onClose }: Props) {
                         refreshUiState();
                       };
 
-                      const { data: flow } = await api.createBrowserSettingsFlow();
+                      const flow = await api.createBrowserSettingsFlow();
                       try {
                         await api.updateSettingsFlow({
                           flow: flow.id,
@@ -254,7 +254,7 @@ export function SettingsFlyout({ onClose }: Props) {
                         setIsReauthenticateModalVisible({
                           visible: true,
                           action: async () => {
-                            const { data: updatedFlow } = await api.getSettingsFlow({ id: flow.id });
+                            const updatedFlow = await api.getSettingsFlow({ id: flow.id });
                             await api.updateSettingsFlow({
                               flow: flow.id,
                               updateSettingsFlowBody: {
@@ -272,8 +272,8 @@ export function SettingsFlyout({ onClose }: Props) {
 
                       updateState();
                     })
-                    .catch((err: Error) => {
-                      const originalErrorMessage = getSecurityErrorMessage(err);
+                    .catch(async (err: Error) => {
+                      const originalErrorMessage = await getSecurityErrorMessage(err);
                       setSetPasswordStatus({ status: 'failed', error: originalErrorMessage ?? 'Unknown error' });
 
                       addToast({

components/secutils-webui/src/app_container/settings_flyout.tsx

@@ -80,7 +80,7 @@ export function usePageHeaderActions() {
                   getOryApi()
                     .then(async (api) => {
                       const flow = await api.createBrowserLogoutFlow();
-                      await api.updateLogoutFlow({ token: flow.data.logout_token });
+                      await api.updateLogoutFlow({ token: flow.logout_token });
 
                       window.location.replace('/signin');
                       setTimeout(() => window.location.reload(), 500);

components/secutils-webui/src/hooks/page_header_actions.tsx

@@ -1,17 +1,7 @@
-import { isOryError } from './security_flows';
-
-export function isAbortError(err: unknown) {
-  return (
-    (err instanceof DOMException || isOryError(err)) && (err.name === 'AbortError' || err.name === 'CanceledError')
-  );
-}
+import { ResponseError as OryResponseError } from '@ory/kratos-client-fetch';
 
 export function getErrorMessage(err: unknown) {
-  return (
-    (isOryError(err) ? err.response?.data?.error?.reason || err.response?.data?.error?.message : undefined) ||
-    (err as Error).message ||
-    'Unknown error'
-  );
+  return (err as Error)?.message || 'Unknown error';
 }
 
 export function isClientError(err: unknown) {
@@ -24,8 +14,8 @@ export function getErrorStatus(err: unknown) {
     return err.status;
   }
 
-  if (isOryError(err)) {
-    return err.response?.status;
+  if (err instanceof OryResponseError) {
+    return err.response.status;
   }
 }