import { Configuration, FrontendApi, Session, Identity } from '@ory/client'; // 1.20.4

// Create a new Ory SDK instance for client-side use
export const ory = new FrontendApi(
  new Configuration({
    basePath: CONFIG.auth.api.frontendUrl,
    baseOptions: {
      withCredentials: true,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    },
  })
);

// ... in component

const [flow, setFlow] = useState<LoginFlow | null>(null);

useEffect(() => {
  const initFlow = async () => {
    const { data } = await ory.createBrowserLoginFlow();
    setFlow(data);
  };

  initFlow();
}, []);

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  if (!flow) { return; }
  
  try {
    const formData = new FormData(event.currentTarget);
    
    // Find the CSRF token input node
    const csrfToken = ...
    
    if (!csrfToken) {
      console.error('Missing CSRF token in flow:', {
        hasNodes: !!flow.ui?.nodes,
        nodeCount: flow.ui?.nodes?.length
      });
      throw new Error('Missing CSRF token');
    }

    await ory.updateLoginFlow(
      {
        flow: flow.id,
        updateLoginFlowBody: {
          method: "password",
          identifier: formData.get("identifier") as string,
          password: formData.get("password") as string,
          csrf_token: csrfToken,
        },
      },
      {
        withCredentials: true,
      }
    );

    // ... do things over here
  } catch (err) {
    console.error('Failed to update login flow:', err);
  }
}

"@ory/nextjs": "*",
    "@ory/elements-react": "*",

@ory/elements-react

"^1.0.0-next.41"