diff --git a/clients/client/typescript-fetch/.openapi-generator/FILES b/clients/client/typescript-fetch/.openapi-generator/FILES
index 19840b5d59..4ad8b7f83c 100644
--- a/clients/client/typescript-fetch/.openapi-generator/FILES
+++ b/clients/client/typescript-fetch/.openapi-generator/FILES
@@ -17,6 +17,13 @@ src/apis/RelationshipApi.ts
 src/apis/WellknownApi.ts
 src/apis/WorkspaceApi.ts
 src/apis/index.ts
+src/contrib/continueWith.ts
+src/contrib/error.ts
+src/contrib/flowTypes.ts
+src/contrib/index.ts
+src/contrib/ui.ts
+src/contrib/urlHelpers.ts
+src/contrib/utils.ts
 src/index.ts
 src/models/AcceptOAuth2ConsentRequest.ts
 src/models/AcceptOAuth2ConsentRequestSession.ts
diff --git a/clients/client/typescript-fetch/src/contrib/continueWith.ts b/clients/client/typescript-fetch/src/contrib/continueWith.ts
new file mode 100644
index 0000000000..a4f05234d3
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/continueWith.ts
@@ -0,0 +1,146 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  ContinueWith,
+  ContinueWithRecoveryUi,
+  ContinueWithSetOrySessionToken,
+  ContinueWithSettingsUi,
+  ContinueWithVerificationUi,
+  ContinueWithRedirectBrowserTo,
+} from "../";
+
+export type OnRedirectHandler = (url: string, external: boolean) => void;
+
+// The order in which the actions are defined here is the order in which they are expected to be executed.
+const continueWithPriority = [
+  "show_settings_ui",
+  "show_recovery_ui",
+  "show_verification_ui",
+  "redirect_browser_to",
+  "set_ory_session_token",
+];
+
+export function handleContinueWith(
+  continueWith: ContinueWith[] | undefined,
+  { onRedirect }: { onRedirect: OnRedirectHandler }
+): boolean {
+  if (!continueWith || continueWith.length === 0) {
+    return false;
+  }
+
+  const action = pickBestContinueWith(continueWith);
+  if (!action) {
+    return false;
+  }
+
+  const redirectFlow = (id: string, flow: string, url?: string) => {
+    if (url) {
+      onRedirect(url, true);
+      return true;
+    }
+
+    onRedirect("/" + flow + "?flow=" + id, false);
+    return true;
+  };
+
+  if (isSetOrySessionToken(action)) {
+    throw new Error("Ory Elements does not support API flows yet.");
+  } else if (isRedirectBrowserTo(action) && action.redirect_browser_to) {
+    // console.log("Redirecting to", action.redirect_browser_to)
+    onRedirect(action.redirect_browser_to, true);
+    return true;
+  } else if (isShowVerificationUi(action)) {
+    return redirectFlow(action.flow.id, "verification", action.flow.url);
+  } else if (isShowRecoveryUi(action)) {
+    return redirectFlow(action.flow.id, "recovery", action.flow.url);
+  } else if (isShowSettingsUi(action)) {
+    // TODO: re-add url
+    return redirectFlow(action.flow.id, "settings");
+  } else {
+    throw new Error("Unknown action: " + JSON.stringify(action));
+  }
+}
+
+/**
+ * Picks the best continue with action from the list of continue with actions.
+ *
+ * @param continueWith - The list of continue with actions.
+ */
+export function pickBestContinueWith(continueWith: ContinueWith[]) {
+  if (!continueWith || continueWith.length === 0) {
+    return;
+  }
+
+  const sorted = continueWith.sort(
+    (a, b) =>
+      continueWithPriority.indexOf(a.action) -
+      continueWithPriority.indexOf(b.action)
+  );
+  return sorted[0];
+}
+
+/**
+ * Checks if the continue with action is to set the Ory Session Token.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isSetOrySessionToken(
+  continueWith: ContinueWith
+): continueWith is ContinueWithSetOrySessionToken & {
+  action: "set_ory_session_token";
+} {
+  return continueWith.action === "set_ory_session_token";
+}
+
+/**
+ * Checks if the continue with action is to redirect the browser to a different page.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isRedirectBrowserTo(
+  continueWith: ContinueWith
+): continueWith is ContinueWithRedirectBrowserTo & {
+  action: "redirect_browser_to";
+} {
+  return continueWith.action === "redirect_browser_to";
+}
+
+/**
+ * Checks if the continue with action is to show the recovery UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowRecoveryUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithRecoveryUi & {
+  action: "show_recovery_ui";
+} {
+  return continueWith.action === "show_recovery_ui";
+}
+
+/**
+ * Checks if the continue with action is to show the settings UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowSettingsUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithSettingsUi & {
+  action: "show_settings_ui";
+} {
+  return continueWith.action === "show_settings_ui";
+}
+
+/**
+ * Checks if the continue with action is to show the verification UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowVerificationUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithVerificationUi & {
+  action: "show_verification_ui";
+} {
+  return continueWith.action === "show_verification_ui";
+}
diff --git a/clients/client/typescript-fetch/src/contrib/error.ts b/clients/client/typescript-fetch/src/contrib/error.ts
new file mode 100644
index 0000000000..31b50b1de8
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/error.ts
@@ -0,0 +1,227 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  ErrorBrowserLocationChangeRequired,
+  ErrorFlowReplaced,
+  GenericError,
+  NeedsPrivilegedSessionError,
+  ResponseError,
+  SelfServiceFlowExpiredError,
+} from "../";
+
+export function isGenericErrorResponse(
+  response: unknown
+): response is { error: GenericError } {
+  return (
+    typeof response === "object" &&
+    !!response &&
+    "error" in response &&
+    typeof response.error === "object" &&
+    !!response.error &&
+    "id" in response.error
+  );
+}
+
+/**
+ * Checks if the response is a NeedsPrivilegedSessionError. This error is returned when the self-service flow requires
+ * the user to re-authenticate in order to perform an action that requires elevated privileges.
+ *
+ * @param response - The response to check.
+ */
+export function isNeedsPrivilegedSessionError(
+  response: unknown
+): response is NeedsPrivilegedSessionError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_refresh_required"
+  );
+}
+
+/**1
+ * Checks if the response is a SelfServiceFlowExpiredError. This error is returned when the self-service flow is expired.
+ *
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowExpiredError(
+  response: unknown
+): response is SelfServiceFlowExpiredError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_expired"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the self-service flow being disabled (for example disabled registration).
+ *
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowDisabled(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_disabled"
+  );
+}
+
+/**
+ * Checks if the response is a ErrorBrowserLocationChangeRequired.
+ * @param response - The response to check.
+ */
+export function isBrowserLocationChangeRequired(
+  response: unknown
+): response is ErrorBrowserLocationChangeRequired {
+  return (
+    isGenericErrorResponse(response) &&
+    isGenericErrorResponse(response) &&
+    response.error.id === "browser_location_change_required"
+  );
+}
+
+/**
+ * Checks if the response is a ErrorFlowReplaced.
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowReplaced(
+  response: unknown
+): response is ErrorFlowReplaced {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_replaced"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session already being available.
+ * @param response - The response to check.
+ */
+export function isSessionAlreadyAvailable(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_already_available"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session being inactive.
+ *
+ * @param response - The response to check.
+ */
+export function isAddressNotVerified(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_verified_address_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session already having fulfilled the AAL requirement.
+ *
+ * @param response - The response to check.
+ */
+export function isAalAlreadyFulfilled(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal_already_fulfilled"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session requiring a higher AAL.
+ *
+ * @param response - The response to check.
+ */
+export function isSessionAal1Required(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal1_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session requiring a higher AAL.
+ *
+ * @param response - The response to check.
+ */
+export function isSessionAal2Required(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal2_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session being inactive.
+ *
+ * @param response - The response to check.
+ */
+export function isNoActiveSession(response: unknown): response is GenericError {
+  return (
+    isGenericErrorResponse(response) && response.error.id === "session_inactive"
+  );
+}
+/**
+ * Checks if the response is a GenericError due to a CSRF violation.
+ *
+ * @param response - The response to check.
+ */
+export function isCsrfError(response: unknown): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "security_csrf_violation"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the redirect URL being forbidden.
+ *
+ * @param response - The response to check.
+ */
+export function isRedirectUrlNotAllowed(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_return_to_forbidden"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to two sessions being active.
+ *
+ * @param response - The response to check.
+ */
+export function isSecurityIdentityMismatch(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "security_identity_mismatch"
+  );
+}
+
+export const isResponseError = (err: unknown): err is ResponseError => {
+  if (err instanceof ResponseError) {
+    return true;
+  }
+
+  return (
+    typeof err === "object" &&
+    !!err &&
+    "name" in err &&
+    err.name === "ResponseError"
+  );
+};
diff --git a/clients/client/typescript-fetch/src/contrib/flowTypes.ts b/clients/client/typescript-fetch/src/contrib/flowTypes.ts
new file mode 100644
index 0000000000..29a58448f9
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/flowTypes.ts
@@ -0,0 +1,11 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export enum FlowType {
+  Login = "login",
+  Registration = "registration",
+  Recovery = "recovery",
+  Verification = "verification",
+  Settings = "settings",
+  Error = "error",
+}
diff --git a/clients/client/typescript-fetch/src/contrib/index.ts b/clients/client/typescript-fetch/src/contrib/index.ts
new file mode 100644
index 0000000000..dc9fc7f249
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/index.ts
@@ -0,0 +1,10 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export * from "./error";
+export * from "./urlHelpers";
+export * from "./flowTypes";
+export * from "./utils";
+export * from "./continueWith";
+export * from "./ui";
+export * from "./client";
diff --git a/clients/client/typescript-fetch/src/contrib/ui.ts b/clients/client/typescript-fetch/src/contrib/ui.ts
new file mode 100644
index 0000000000..096a5bc891
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/ui.ts
@@ -0,0 +1,120 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  UiNode,
+  UiNodeAnchorAttributes,
+  UiNodeImageAttributes,
+  UiNodeInputAttributes,
+  UiNodeScriptAttributes,
+  UiNodeTextAttributes,
+  UiText,
+} from "../";
+
+/**
+ * Returns the node's label.
+ *
+ * @param node - the node get the label from
+ * @returns label of the node
+ */
+export const getNodeLabel = (node: UiNode): UiText | undefined => {
+  const attributes = node.attributes;
+  if (isUiNodeAnchorAttributes(attributes)) {
+    return attributes.title;
+  }
+
+  if (isUiNodeImageAttributes(attributes)) {
+    return node.meta.label;
+  }
+
+  if (isUiNodeInputAttributes(attributes)) {
+    if (attributes.label) {
+      return attributes.label;
+    }
+  }
+
+  return node.meta.label;
+};
+
+type ObjWithNodeType = {
+  node_type: string;
+};
+
+/**
+ * A TypeScript type guard for nodes of the type <a>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeAnchorAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeAnchorAttributes {
+  return attrs.node_type === "a";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <img>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeImageAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeImageAttributes {
+  return attrs.node_type === "img";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <input>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeInputAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeInputAttributes {
+  return attrs.node_type === "input";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type `<span>{text}</span>`
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeTextAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeTextAttributes {
+  return attrs.node_type === "text";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <script>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeScriptAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeScriptAttributes {
+  return attrs.node_type === "script";
+}
+
+/**
+ * Returns a node's ID.
+ *
+ * @param attributes - the attributes of the node
+ */
+export function getNodeId({ attributes }: UiNode) {
+  if (isUiNodeInputAttributes(attributes)) {
+    return attributes.name;
+  } else {
+    return attributes.id;
+  }
+}
+
+/**
+ * Return the node input attribute type
+ * In <input> elements we have a variety of types, such as text, password, email, etc.
+ * When the attribute is null or the `type` attribute is not present, we assume it has no defined type.
+ *
+ * @param attr - the attributes of the node
+ * @returns type of node
+ */
+export const getNodeInputType = (attr: object): string =>
+  "type" in attr && typeof attr?.type == "string" ? attr.type : "";
diff --git a/clients/client/typescript-fetch/src/contrib/urlHelpers.ts b/clients/client/typescript-fetch/src/contrib/urlHelpers.ts
new file mode 100644
index 0000000000..7d8c08df5b
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/urlHelpers.ts
@@ -0,0 +1,17 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export const registrationUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/registration/browser";
+
+export const loginUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/login/browser";
+
+export const settingsUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/settings/browser";
+
+export const recoveryUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/recovery/browser";
+
+export const verificationUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/verification/browser";
diff --git a/clients/client/typescript-fetch/src/contrib/utils.ts b/clients/client/typescript-fetch/src/contrib/utils.ts
new file mode 100644
index 0000000000..ba77f9ff32
--- /dev/null
+++ b/clients/client/typescript-fetch/src/contrib/utils.ts
@@ -0,0 +1,116 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { FetchError, RequiredError, ResponseError } from "../";
+import { OnRedirectHandler } from "./continueWith";
+import {
+  isBrowserLocationChangeRequired,
+  isCsrfError,
+  isNeedsPrivilegedSessionError,
+  isResponseError,
+  isSelfServiceFlowExpiredError,
+} from "./error";
+
+export type ValidationErrorHandler<T> = (body: T) => void;
+
+type FlowErrorHandlerProps<T> = {
+  /**
+   * When the SDK returns an error indicating that the flow needs to be restarted, this function is called.
+   */
+  onRestartFlow: () => void;
+
+  /**
+   * When the SDK returns a validation error, this function is called. The result should be used to update the
+   * flow container.
+   *
+   * The function should return a FlowContainer or nothing.
+   *
+   * @param body - The body of the response.
+   */
+  onValidationError: ValidationErrorHandler<T>;
+
+  /**
+   * This method is used to redirect the user to a different page.
+   */
+  onRedirect: OnRedirectHandler;
+};
+
+/**
+ * Use this as the catch handler for all flow-related SDK calls, such as creating a login or submitting a login.
+ *
+ *
+ * @param opts - The configuration object.
+ */
+export const handleFlowError =
+  <T>(opts: FlowErrorHandlerProps<T>) =>
+  async (err: unknown) => {
+    if (isResponseError(err)) {
+      switch (err.response.status) {
+        case 404: // Does not exist
+          opts.onRestartFlow();
+          return;
+        case 410: // Expired
+          // Re-initialize the flow
+          opts.onRestartFlow();
+          return;
+        case 400:
+          return opts.onValidationError(
+            // TODO: maybe we can do actual type checking here?
+            (await err.response.json()) as unknown as T
+          );
+        case 403: // This typically happens with CSRF violations.
+        case 422: {
+          const body = await toBody(err.response);
+          if (
+            isBrowserLocationChangeRequired(body) &&
+            body.redirect_browser_to
+          ) {
+            opts.onRedirect(body.redirect_browser_to, true);
+            return;
+          } else if (isSelfServiceFlowExpiredError(body)) {
+            opts.onRestartFlow();
+            return;
+          } else if (isNeedsPrivilegedSessionError(body)) {
+            opts.onRedirect(body.redirect_browser_to, true);
+            return;
+          } else if (isCsrfError(body)) {
+            opts.onRestartFlow();
+            return;
+          }
+
+          throw new ResponseError(
+            err.response,
+            "The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information:" +
+              JSON.stringify(body)
+          );
+        }
+
+        default:
+          throw new ResponseError(
+            err.response,
+            "The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information."
+          );
+      }
+    } else if (err instanceof FetchError) {
+      throw new FetchError(
+        err,
+        "Unable to call the API endpoint. Ensure that CORS is set up correctly and that you have provided a valid SDK URL to Ory Elements."
+      );
+    } else if (err instanceof RequiredError) {
+      // TODO (@aeneasr) Happens on submit usually. Not sure how to handle yet.
+    }
+
+    throw err;
+  };
+
+export async function toBody(response: Response): Promise<unknown> {
+  try {
+    return (await response.clone().json()) as unknown;
+  } catch (e) {
+    throw new ResponseError(
+      response,
+      "The Ory API endpoint returned a response the SDK does not know how to handle:" +
+        (await response.text())
+    );
+  }
+}
diff --git a/clients/client/typescript-fetch/src/index.ts b/clients/client/typescript-fetch/src/index.ts
index bebe8bbbe2..325f3f9f7c 100644
--- a/clients/client/typescript-fetch/src/index.ts
+++ b/clients/client/typescript-fetch/src/index.ts
@@ -3,3 +3,4 @@
 export * from './runtime';
 export * from './apis/index';
 export * from './models/index';
+export * from './contrib';
diff --git a/config/client/typescript-fetch.yml b/config/client/typescript-fetch.yml
index 7b490d3fc2..8b27215009 100644
--- a/config/client/typescript-fetch.yml
+++ b/config/client/typescript-fetch.yml
@@ -7,3 +7,25 @@ modelPropertyNaming: original
 disallowAdditionalPropertiesIfNotPresent: false
 withInterfaces: false
 useSingleRequestParameter: true
+files:
+  contrib/fetch/src/continueWith.ts:
+    folder: src/contrib
+    destinationFilename: continueWith.ts
+  contrib/fetch/src/error.ts:
+    folder: src/contrib
+    destinationFilename: error.ts
+  contrib/fetch/src/flowTypes.ts:
+    folder: src/contrib
+    destinationFilename: flowTypes.ts
+  contrib/fetch/src/index.ts:
+    folder: src/contrib
+    destinationFilename: index.ts
+  contrib/fetch/src/ui.ts:
+    folder: src/contrib
+    destinationFilename: ui.ts
+  contrib/fetch/src/urlHelpers.ts:
+    folder: src/contrib
+    destinationFilename: urlHelpers.ts
+  contrib/fetch/src/utils.ts:
+    folder: src/contrib
+    destinationFilename: utils.ts
diff --git a/contrib/fetch/README.md b/contrib/fetch/README.md
new file mode 100644
index 0000000000..d62299e3eb
--- /dev/null
+++ b/contrib/fetch/README.md
@@ -0,0 +1,5 @@
+# Typescript client helpers
+
+These files contain a range of helper functions used in Ory Elements and other projects.
+
+They are referenced in the "typescript-fetch.yml" of this repository, and only added to the -fetch client version.
diff --git a/contrib/fetch/src/continueWith.ts b/contrib/fetch/src/continueWith.ts
new file mode 100644
index 0000000000..a4f05234d3
--- /dev/null
+++ b/contrib/fetch/src/continueWith.ts
@@ -0,0 +1,146 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  ContinueWith,
+  ContinueWithRecoveryUi,
+  ContinueWithSetOrySessionToken,
+  ContinueWithSettingsUi,
+  ContinueWithVerificationUi,
+  ContinueWithRedirectBrowserTo,
+} from "../";
+
+export type OnRedirectHandler = (url: string, external: boolean) => void;
+
+// The order in which the actions are defined here is the order in which they are expected to be executed.
+const continueWithPriority = [
+  "show_settings_ui",
+  "show_recovery_ui",
+  "show_verification_ui",
+  "redirect_browser_to",
+  "set_ory_session_token",
+];
+
+export function handleContinueWith(
+  continueWith: ContinueWith[] | undefined,
+  { onRedirect }: { onRedirect: OnRedirectHandler }
+): boolean {
+  if (!continueWith || continueWith.length === 0) {
+    return false;
+  }
+
+  const action = pickBestContinueWith(continueWith);
+  if (!action) {
+    return false;
+  }
+
+  const redirectFlow = (id: string, flow: string, url?: string) => {
+    if (url) {
+      onRedirect(url, true);
+      return true;
+    }
+
+    onRedirect("/" + flow + "?flow=" + id, false);
+    return true;
+  };
+
+  if (isSetOrySessionToken(action)) {
+    throw new Error("Ory Elements does not support API flows yet.");
+  } else if (isRedirectBrowserTo(action) && action.redirect_browser_to) {
+    // console.log("Redirecting to", action.redirect_browser_to)
+    onRedirect(action.redirect_browser_to, true);
+    return true;
+  } else if (isShowVerificationUi(action)) {
+    return redirectFlow(action.flow.id, "verification", action.flow.url);
+  } else if (isShowRecoveryUi(action)) {
+    return redirectFlow(action.flow.id, "recovery", action.flow.url);
+  } else if (isShowSettingsUi(action)) {
+    // TODO: re-add url
+    return redirectFlow(action.flow.id, "settings");
+  } else {
+    throw new Error("Unknown action: " + JSON.stringify(action));
+  }
+}
+
+/**
+ * Picks the best continue with action from the list of continue with actions.
+ *
+ * @param continueWith - The list of continue with actions.
+ */
+export function pickBestContinueWith(continueWith: ContinueWith[]) {
+  if (!continueWith || continueWith.length === 0) {
+    return;
+  }
+
+  const sorted = continueWith.sort(
+    (a, b) =>
+      continueWithPriority.indexOf(a.action) -
+      continueWithPriority.indexOf(b.action)
+  );
+  return sorted[0];
+}
+
+/**
+ * Checks if the continue with action is to set the Ory Session Token.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isSetOrySessionToken(
+  continueWith: ContinueWith
+): continueWith is ContinueWithSetOrySessionToken & {
+  action: "set_ory_session_token";
+} {
+  return continueWith.action === "set_ory_session_token";
+}
+
+/**
+ * Checks if the continue with action is to redirect the browser to a different page.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isRedirectBrowserTo(
+  continueWith: ContinueWith
+): continueWith is ContinueWithRedirectBrowserTo & {
+  action: "redirect_browser_to";
+} {
+  return continueWith.action === "redirect_browser_to";
+}
+
+/**
+ * Checks if the continue with action is to show the recovery UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowRecoveryUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithRecoveryUi & {
+  action: "show_recovery_ui";
+} {
+  return continueWith.action === "show_recovery_ui";
+}
+
+/**
+ * Checks if the continue with action is to show the settings UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowSettingsUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithSettingsUi & {
+  action: "show_settings_ui";
+} {
+  return continueWith.action === "show_settings_ui";
+}
+
+/**
+ * Checks if the continue with action is to show the verification UI.
+ *
+ * @param continueWith - The continue with action.
+ */
+export function isShowVerificationUi(
+  continueWith: ContinueWith
+): continueWith is ContinueWithVerificationUi & {
+  action: "show_verification_ui";
+} {
+  return continueWith.action === "show_verification_ui";
+}
diff --git a/contrib/fetch/src/error.ts b/contrib/fetch/src/error.ts
new file mode 100644
index 0000000000..31b50b1de8
--- /dev/null
+++ b/contrib/fetch/src/error.ts
@@ -0,0 +1,227 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  ErrorBrowserLocationChangeRequired,
+  ErrorFlowReplaced,
+  GenericError,
+  NeedsPrivilegedSessionError,
+  ResponseError,
+  SelfServiceFlowExpiredError,
+} from "../";
+
+export function isGenericErrorResponse(
+  response: unknown
+): response is { error: GenericError } {
+  return (
+    typeof response === "object" &&
+    !!response &&
+    "error" in response &&
+    typeof response.error === "object" &&
+    !!response.error &&
+    "id" in response.error
+  );
+}
+
+/**
+ * Checks if the response is a NeedsPrivilegedSessionError. This error is returned when the self-service flow requires
+ * the user to re-authenticate in order to perform an action that requires elevated privileges.
+ *
+ * @param response - The response to check.
+ */
+export function isNeedsPrivilegedSessionError(
+  response: unknown
+): response is NeedsPrivilegedSessionError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_refresh_required"
+  );
+}
+
+/**1
+ * Checks if the response is a SelfServiceFlowExpiredError. This error is returned when the self-service flow is expired.
+ *
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowExpiredError(
+  response: unknown
+): response is SelfServiceFlowExpiredError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_expired"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the self-service flow being disabled (for example disabled registration).
+ *
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowDisabled(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_disabled"
+  );
+}
+
+/**
+ * Checks if the response is a ErrorBrowserLocationChangeRequired.
+ * @param response - The response to check.
+ */
+export function isBrowserLocationChangeRequired(
+  response: unknown
+): response is ErrorBrowserLocationChangeRequired {
+  return (
+    isGenericErrorResponse(response) &&
+    isGenericErrorResponse(response) &&
+    response.error.id === "browser_location_change_required"
+  );
+}
+
+/**
+ * Checks if the response is a ErrorFlowReplaced.
+ * @param response - The response to check.
+ */
+export function isSelfServiceFlowReplaced(
+  response: unknown
+): response is ErrorFlowReplaced {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_replaced"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session already being available.
+ * @param response - The response to check.
+ */
+export function isSessionAlreadyAvailable(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_already_available"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session being inactive.
+ *
+ * @param response - The response to check.
+ */
+export function isAddressNotVerified(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_verified_address_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session already having fulfilled the AAL requirement.
+ *
+ * @param response - The response to check.
+ */
+export function isAalAlreadyFulfilled(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal_already_fulfilled"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session requiring a higher AAL.
+ *
+ * @param response - The response to check.
+ */
+export function isSessionAal1Required(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal1_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session requiring a higher AAL.
+ *
+ * @param response - The response to check.
+ */
+export function isSessionAal2Required(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "session_aal2_required"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the session being inactive.
+ *
+ * @param response - The response to check.
+ */
+export function isNoActiveSession(response: unknown): response is GenericError {
+  return (
+    isGenericErrorResponse(response) && response.error.id === "session_inactive"
+  );
+}
+/**
+ * Checks if the response is a GenericError due to a CSRF violation.
+ *
+ * @param response - The response to check.
+ */
+export function isCsrfError(response: unknown): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "security_csrf_violation"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to the redirect URL being forbidden.
+ *
+ * @param response - The response to check.
+ */
+export function isRedirectUrlNotAllowed(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "self_service_flow_return_to_forbidden"
+  );
+}
+
+/**
+ * Checks if the response is a GenericError due to two sessions being active.
+ *
+ * @param response - The response to check.
+ */
+export function isSecurityIdentityMismatch(
+  response: unknown
+): response is GenericError {
+  return (
+    isGenericErrorResponse(response) &&
+    response.error.id === "security_identity_mismatch"
+  );
+}
+
+export const isResponseError = (err: unknown): err is ResponseError => {
+  if (err instanceof ResponseError) {
+    return true;
+  }
+
+  return (
+    typeof err === "object" &&
+    !!err &&
+    "name" in err &&
+    err.name === "ResponseError"
+  );
+};
diff --git a/contrib/fetch/src/flowTypes.ts b/contrib/fetch/src/flowTypes.ts
new file mode 100644
index 0000000000..29a58448f9
--- /dev/null
+++ b/contrib/fetch/src/flowTypes.ts
@@ -0,0 +1,11 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export enum FlowType {
+  Login = "login",
+  Registration = "registration",
+  Recovery = "recovery",
+  Verification = "verification",
+  Settings = "settings",
+  Error = "error",
+}
diff --git a/contrib/fetch/src/index.ts b/contrib/fetch/src/index.ts
new file mode 100644
index 0000000000..dc9fc7f249
--- /dev/null
+++ b/contrib/fetch/src/index.ts
@@ -0,0 +1,10 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export * from "./error";
+export * from "./urlHelpers";
+export * from "./flowTypes";
+export * from "./utils";
+export * from "./continueWith";
+export * from "./ui";
+export * from "./client";
diff --git a/contrib/fetch/src/ui.ts b/contrib/fetch/src/ui.ts
new file mode 100644
index 0000000000..096a5bc891
--- /dev/null
+++ b/contrib/fetch/src/ui.ts
@@ -0,0 +1,120 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+  UiNode,
+  UiNodeAnchorAttributes,
+  UiNodeImageAttributes,
+  UiNodeInputAttributes,
+  UiNodeScriptAttributes,
+  UiNodeTextAttributes,
+  UiText,
+} from "../";
+
+/**
+ * Returns the node's label.
+ *
+ * @param node - the node get the label from
+ * @returns label of the node
+ */
+export const getNodeLabel = (node: UiNode): UiText | undefined => {
+  const attributes = node.attributes;
+  if (isUiNodeAnchorAttributes(attributes)) {
+    return attributes.title;
+  }
+
+  if (isUiNodeImageAttributes(attributes)) {
+    return node.meta.label;
+  }
+
+  if (isUiNodeInputAttributes(attributes)) {
+    if (attributes.label) {
+      return attributes.label;
+    }
+  }
+
+  return node.meta.label;
+};
+
+type ObjWithNodeType = {
+  node_type: string;
+};
+
+/**
+ * A TypeScript type guard for nodes of the type <a>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeAnchorAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeAnchorAttributes {
+  return attrs.node_type === "a";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <img>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeImageAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeImageAttributes {
+  return attrs.node_type === "img";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <input>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeInputAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeInputAttributes {
+  return attrs.node_type === "input";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type `<span>{text}</span>`
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeTextAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeTextAttributes {
+  return attrs.node_type === "text";
+}
+
+/**
+ * A TypeScript type guard for nodes of the type <script>
+ *
+ * @param attrs - the attributes of the node
+ */
+export function isUiNodeScriptAttributes(
+  attrs: ObjWithNodeType
+): attrs is UiNodeScriptAttributes {
+  return attrs.node_type === "script";
+}
+
+/**
+ * Returns a node's ID.
+ *
+ * @param attributes - the attributes of the node
+ */
+export function getNodeId({ attributes }: UiNode) {
+  if (isUiNodeInputAttributes(attributes)) {
+    return attributes.name;
+  } else {
+    return attributes.id;
+  }
+}
+
+/**
+ * Return the node input attribute type
+ * In <input> elements we have a variety of types, such as text, password, email, etc.
+ * When the attribute is null or the `type` attribute is not present, we assume it has no defined type.
+ *
+ * @param attr - the attributes of the node
+ * @returns type of node
+ */
+export const getNodeInputType = (attr: object): string =>
+  "type" in attr && typeof attr?.type == "string" ? attr.type : "";
diff --git a/contrib/fetch/src/urlHelpers.ts b/contrib/fetch/src/urlHelpers.ts
new file mode 100644
index 0000000000..7d8c08df5b
--- /dev/null
+++ b/contrib/fetch/src/urlHelpers.ts
@@ -0,0 +1,17 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+export const registrationUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/registration/browser";
+
+export const loginUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/login/browser";
+
+export const settingsUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/settings/browser";
+
+export const recoveryUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/recovery/browser";
+
+export const verificationUrl = (config: { sdk: { url: string } }) =>
+  config.sdk.url + "/self-service/verification/browser";
diff --git a/contrib/fetch/src/utils.ts b/contrib/fetch/src/utils.ts
new file mode 100644
index 0000000000..ba77f9ff32
--- /dev/null
+++ b/contrib/fetch/src/utils.ts
@@ -0,0 +1,116 @@
+// Copyright © 2024 Ory Corp
+// SPDX-License-Identifier: Apache-2.0
+
+import { FetchError, RequiredError, ResponseError } from "../";
+import { OnRedirectHandler } from "./continueWith";
+import {
+  isBrowserLocationChangeRequired,
+  isCsrfError,
+  isNeedsPrivilegedSessionError,
+  isResponseError,
+  isSelfServiceFlowExpiredError,
+} from "./error";
+
+export type ValidationErrorHandler<T> = (body: T) => void;
+
+type FlowErrorHandlerProps<T> = {
+  /**
+   * When the SDK returns an error indicating that the flow needs to be restarted, this function is called.
+   */
+  onRestartFlow: () => void;
+
+  /**
+   * When the SDK returns a validation error, this function is called. The result should be used to update the
+   * flow container.
+   *
+   * The function should return a FlowContainer or nothing.
+   *
+   * @param body - The body of the response.
+   */
+  onValidationError: ValidationErrorHandler<T>;
+
+  /**
+   * This method is used to redirect the user to a different page.
+   */
+  onRedirect: OnRedirectHandler;
+};
+
+/**
+ * Use this as the catch handler for all flow-related SDK calls, such as creating a login or submitting a login.
+ *
+ *
+ * @param opts - The configuration object.
+ */
+export const handleFlowError =
+  <T>(opts: FlowErrorHandlerProps<T>) =>
+  async (err: unknown) => {
+    if (isResponseError(err)) {
+      switch (err.response.status) {
+        case 404: // Does not exist
+          opts.onRestartFlow();
+          return;
+        case 410: // Expired
+          // Re-initialize the flow
+          opts.onRestartFlow();
+          return;
+        case 400:
+          return opts.onValidationError(
+            // TODO: maybe we can do actual type checking here?
+            (await err.response.json()) as unknown as T
+          );
+        case 403: // This typically happens with CSRF violations.
+        case 422: {
+          const body = await toBody(err.response);
+          if (
+            isBrowserLocationChangeRequired(body) &&
+            body.redirect_browser_to
+          ) {
+            opts.onRedirect(body.redirect_browser_to, true);
+            return;
+          } else if (isSelfServiceFlowExpiredError(body)) {
+            opts.onRestartFlow();
+            return;
+          } else if (isNeedsPrivilegedSessionError(body)) {
+            opts.onRedirect(body.redirect_browser_to, true);
+            return;
+          } else if (isCsrfError(body)) {
+            opts.onRestartFlow();
+            return;
+          }
+
+          throw new ResponseError(
+            err.response,
+            "The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information:" +
+              JSON.stringify(body)
+          );
+        }
+
+        default:
+          throw new ResponseError(
+            err.response,
+            "The Ory API endpoint returned a response code the SDK does not know how to handle. Please check the network tab for more information."
+          );
+      }
+    } else if (err instanceof FetchError) {
+      throw new FetchError(
+        err,
+        "Unable to call the API endpoint. Ensure that CORS is set up correctly and that you have provided a valid SDK URL to Ory Elements."
+      );
+    } else if (err instanceof RequiredError) {
+      // TODO (@aeneasr) Happens on submit usually. Not sure how to handle yet.
+    }
+
+    throw err;
+  };
+
+export async function toBody(response: Response): Promise<unknown> {
+  try {
+    return (await response.clone().json()) as unknown;
+  } catch (e) {
+    throw new ResponseError(
+      response,
+      "The Ory API endpoint returned a response the SDK does not know how to handle:" +
+        (await response.text())
+    );
+  }
+}
diff --git a/scripts/generate.sh b/scripts/generate.sh
index 9888e33aa3..b6b1e17cd9 100755
--- a/scripts/generate.sh
+++ b/scripts/generate.sh
@@ -74,6 +74,9 @@ typescript_fetch () {
     --git-host github.com \
     -c ./config/client/typescript-fetch.yml.proc.yml
 
+  echo "Adding contrib files to barrel export..."
+  echo "export * from './contrib';" >> "${dir}/src/index.ts"
+
   file="${dir}/package.json"
   jq -r ".author = "'"'"Ory Corp"'"'" | .license = "'"'"Apache-2.0"'"' "${file}" \
      > tmp.$$.json && mv tmp.$$.json "${file}"
diff --git a/scripts/local/generate-latest.sh b/scripts/local/generate-latest.sh
new file mode 100755
index 0000000000..09f357789d
--- /dev/null
+++ b/scripts/local/generate-latest.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# This script is used to generate the latest version of a specified client, or just "client" if no client is specified.
+# requires docker
+
+# read the client name from the --client flag
+client="client"
+while [[ "$#" -gt 0 ]]; do
+    case $1 in
+        --client) client="$2"; shift ;;
+    esac
+    shift
+done
+version=$(cat spec/$client/latest)
+echo $client:$version
+
+docker run --mount type=bind,source="$(pwd)",target=/project --env FORCE_PROJECT=$client --env FORCE_VERSION=$version -it oryd/sdk:v0.0.54 /project/scripts/generate.sh
\ No newline at end of file