Don't assume csrf token is the first node (#828)

The behaviour seems to be inconsistent in the latest version of kratos,
so we adopt the `find()` pattern used elsewhere in the code.

Fixes canonical/kratos-operator#579

Author: DanielArndt

ui/pages/login.tsx

@@ -29,6 +29,7 @@ import {
   isWebauthnAutologin,
   toggleWebauthnSkip,
 } from "../util/webauthnAutoLogin";
+import { getCsrfNode, getCsrfToken } from "../util/getCsrfNode";
 
 type AppConfig = {
   oidc_webauthn_sequencing_enabled?: boolean;
@@ -306,17 +307,10 @@ const Login: NextPage = () => {
     // autosubmit webauthn in case email is provided
     const email = urlParams.get("email");
     if (isWebauthn && email) {
-      const csrfNode = renderFlow?.ui.nodes.find(
-        (node) =>
-          node.group === "default" &&
-          node.attributes.node_type === "input" &&
-          node.attributes.name === "csrf_token",
-      )?.attributes as UiNodeInputAttributes;
-
       void handleSubmit({
         method: "webauthn",
         identifier: email,
-        csrf_token: (csrfNode.value as string) ?? "",
+        csrf_token: getCsrfToken(renderFlow?.ui.nodes),
       }).catch(() => {
         if (flow?.return_to) {
           window.location.href = flow.return_to;
@@ -358,14 +352,13 @@ const Login: NextPage = () => {
   });
 
   // automatically forward to single oidc provider if it is the only option
+  const csrfNode = getCsrfNode(renderFlow?.ui.nodes);
   const isSingleOidcOption =
     isSequencedLogin &&
     renderFlow?.ui.nodes.length === 2 &&
     renderFlow?.ui.nodes[1].group === "oidc" &&
-    (renderFlow?.ui.nodes[0].attributes as UiNodeInputAttributes).name ===
-      "csrf_token";
+    csrfNode !== undefined;
   if (isSingleOidcOption) {
-    const csrfNode = renderFlow?.ui.nodes[0];
     const oidcNode = renderFlow?.ui.nodes[1];
     const oidcAttributes = oidcNode.attributes as UiNodeInputAttributes;
     const csrfAttributes = csrfNode.attributes as UiNodeInputAttributes;

ui/pages/reset_password.tsx

@@ -8,7 +8,7 @@ import { handleFlowError } from "../util/handleFlowError";
 import { kratos } from "../api/kratos";
 import PageLayout from "../components/PageLayout";
 import Password from "../components/Password";
-import { UiNodeInputAttributes } from "@ory/client/api";
+import { getCsrfToken } from "../util/getCsrfNode";
 import { AxiosError } from "axios";
 import { FlowResponse } from "./consent";
 import {
@@ -102,8 +102,7 @@ const ResetPassword: NextPage<Props> = ({ forceSelfServe }: Props) => {
         .updateSettingsFlow({
           flow: String(flow?.id),
           updateSettingsFlowBody: {
-            csrf_token: (flow?.ui?.nodes[0].attributes as UiNodeInputAttributes)
-              .value as string,
+            csrf_token: getCsrfToken(flow?.ui?.nodes),
             method: "password",
             password: password,
           },

ui/pages/setup_backup_codes.tsx

@@ -14,6 +14,7 @@ import PageLayout from "../components/PageLayout";
 import { AxiosError } from "axios";
 import { Spinner } from "@canonical/react-components";
 import { UiNodeInputAttributes } from "@ory/client/api";
+import { getCsrfToken } from "../util/getCsrfNode";
 import {
   isBackupCodeConfirm,
   isBackupCodeConfirmText,
@@ -95,8 +96,7 @@ const SetupBackupCodes: NextPage<Props> = ({ forceSelfServe }: Props) => {
         .updateSettingsFlow({
           flow: String(flow?.id),
           updateSettingsFlowBody: {
-            csrf_token: (flow?.ui?.nodes[0].attributes as UiNodeInputAttributes)
-              .value as string,
+            csrf_token: getCsrfToken(flow?.ui?.nodes),
             method: "lookup_secret",
             lookup_secret_reveal: methodValues.lookup_secret_reveal
               ? true

ui/pages/setup_passkey.tsx

@@ -15,6 +15,7 @@ import PageLayout from "../components/PageLayout";
 import { AxiosError } from "axios";
 import { Button, Icon, Spinner } from "@canonical/react-components";
 import { UpdateSettingsFlowWithWebAuthnMethod } from "@ory/client/api";
+import { getCsrfToken } from "../util/getCsrfNode";
 import {
   isSecurityKeyAddBtn,
   isSecurityKeyNameInput,
@@ -113,8 +114,7 @@ const SetupPasskey: NextPage<Props> = ({ forceSelfServe }: Props) => {
         .updateSettingsFlow({
           flow: String(flow?.id),
           updateSettingsFlowBody: {
-            csrf_token: (flow?.ui?.nodes[0].attributes as UiNodeInputAttributes)
-              .value as string,
+            csrf_token: getCsrfToken(flow?.ui?.nodes),
             method: "webauthn",
             webauthn_remove: authValues.webauthn_remove,
           },

ui/pages/setup_secure.tsx

@@ -13,7 +13,7 @@ import { kratos } from "../api/kratos";
 import PageLayout from "../components/PageLayout";
 import { AxiosError } from "axios";
 import { Notification, Spinner } from "@canonical/react-components";
-import { UiNodeInputAttributes } from "@ory/client/api";
+import { getCsrfToken } from "../util/getCsrfNode";
 import {
   getLoggedInName,
   hasSelfServeReturn,
@@ -89,8 +89,7 @@ const SetupSecure: NextPage<Props> = ({ forceSelfServe }: Props) => {
         .updateSettingsFlow({
           flow: String(flow?.id),
           updateSettingsFlowBody: {
-            csrf_token: (flow?.ui?.nodes[0].attributes as UiNodeInputAttributes)
-              .value as string,
+            csrf_token: getCsrfToken(flow?.ui?.nodes),
             method: "totp",
             totp_code: methodValues.totp_code,
             totp_unlink: methodValues.totp_unlink ? true : undefined,

ui/util/getCsrfNode.ts

@@ -0,0 +1,21 @@
+import { UiNode, UiNodeInputAttributes } from "@ory/client";
+
+export const getCsrfNode = (
+  nodes?: UiNode[],
+): UiNode | undefined =>
+  nodes?.find(
+    (node) =>
+      node.group === "default" &&
+      // ensure it's an input node with the csrf token name
+      (node.attributes as UiNodeInputAttributes | undefined)?.node_type ===
+        "input" &&
+      (node.attributes as UiNodeInputAttributes | undefined)?.name ===
+        "csrf_token",
+  );
+
+export const getCsrfToken = (nodes?: UiNode[]): string | undefined => {
+  const node = getCsrfNode(nodes);
+  return (node?.attributes as UiNodeInputAttributes | undefined)?.value as
+    | string
+    | undefined;
+};