Subject: Custom Login Flow with Ory: Encountering 422 Errors

[LandSprutte]

Hi everyone,

We are currently using Ory primarily as an identity provider to manage our users across various products for our customers. Overall, we have been satisfied with the out-of-the-box solutions provided by Ory. However, as our products evolve, we are exploring more customized solutions to better meet our customers' unique needs.

We are experimenting with self-served UI integration using custom flows in a React.js Single Page Application (SPA) that is statically served with Bun as a bundler. However, we are running into a challenge when trying to handle the login flow. Specifically, when we submit our form from the locally served UI (localhost:3000), we receive a 422 error.

As outlined in the Ory documentation, we understand that redirection is required for handling the 422 errors. Here is an example of the redirect URL we receive:

http://localhost:4000/oauth2/auth?audience=<some_audience>&client_id=<some_client_id>&code_challenge=<some_code_challenge>&code_challenge_method=<some_method>&login_verifier=<some_verifier>&redirect_uri=http%3A%2F%2Flocalhost%3A5173%2Fauth%2Fcallback&response_type=code&scope=openid+email+offline_access&state=<some_state>

Interestingly, when I copy this link into my browser, I am redirected successfully and arrive at my main application (localhost:5173) with a valid session. However, when I programmatically assign window.location to the redirect URL, I encounter a 502 error for the /ui/consent?... endpoint.

Below is a snippet of the relevant code handling the update login flow:

Questions:

1. Has anyone experienced similar issues with redirecting on a custom login flow using Ory?
2. Are there any best practices or troubleshooting steps you would recommend for resolving the 422 and 502 errors?

I appreciate any insights or suggestions you may have. Thank you!

import type { LoginFlow } from "@ory/client";
import { AxiosError } from "axios";
import { useState } from "react";
import { useEffect } from "react";
import { FlowComponent } from "./flow/flow";
import { ory } from "@/lib/ory-client";
import { handleGetFlowError } from "./flow/handle-flow-errors";
import { Link, useSearchParams, useNavigate } from "react-router";

const getFlowIdFromSearchParams = (searchParams: URLSearchParams) => {
  const flowId = searchParams.get("flow");
  if (!flowId) {
    return null;
  }
  return flowId;
};

const useLoginFlow = () => {
  const [searchParams] = useSearchParams();
  const [loginFlow, setLoginFlow] = useState<LoginFlow | null>(null);
  const [returnTo, setReturnTo] = useState<string | null>(null);
  const navigate = useNavigate();

  const flowId = getFlowIdFromSearchParams(searchParams);

  useEffect(() => {
    if (loginFlow !== null) {
      return;
    }

    if (flowId) {
      ory
        .getLoginFlow({ id: flowId })
        .then((loginFlow) => {
          setLoginFlow(loginFlow.data);
          setReturnTo(loginFlow.data.return_to);
        })
        .catch(handleGetFlowError(navigate, "login", setLoginFlow));
      return;
    }

    ory
      .createBrowserLoginFlow()
      .then((loginFlow) => setLoginFlow(loginFlow.data))
      .catch(handleGetFlowError(navigate, "login", setLoginFlow));
  }, []);

  const updateLoginFlow = async (data: {
    identifier: string;
    password: string;
    csrf_token: string;
  }) => {
    ory
      .updateLoginFlow({
        flow: loginFlow.id,
        updateLoginFlowBody: {
          method: "password",
          password: data.password,
          identifier: data.identifier,
          csrf_token: data.csrf_token,
        },
      })
      .then(() => {
        console.log("returnTo", returnTo);
        if (returnTo) {
          navigate(returnTo, { replace: true });
          return;
        }
        navigate("/", { replace: true });
      })
      .catch((err: AxiosError<LoginFlow>) => {
        // Ory Kratos asked us to point the user to this URL.
        if (
          err.response?.status === 422 &&
          //@ts-ignore
          err.response?.data.error.id === "browser_location_change_required"
        ) {
          //@ts-ignore
          window.location = err.response.data.redirect_browser_to;
          return;
        }
      })
      .catch((err: AxiosError<LoginFlow>) => {
        // If the previous handler did not catch the error it's most likely a form validation error
        if (err.response?.status === 400) {
          // Yup, it is!
          setLoginFlow(err.response?.data);
          return;
        }

        return Promise.reject(err);
      });
  };

  return { loginFlow, updateLoginFlow };
};

export const LoginView = () => {
  const { loginFlow, updateLoginFlow } = useLoginFlow();

  if (loginFlow === null) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <FlowComponent flow={loginFlow} onSubmit={updateLoginFlow} />

      <div>
        need to register? <Link to="/register">Register</Link>
      </div>
    </div>
  );
};