hydra create oauth2-client \
  --name "Test App 1" \
  --grant-type authorization_code \
  --grant-type refresh_token \
  --response-type code \
  --scope openid \
  --redirect-uri <http://127.0.0.1:3001/auth/callback/> \
  --endpoint "<http://127.0.0.1:4433>"

GET /auth/login?login_challenge=ARS6u_tkh0ntvTfMBpQ4PuRkcxKg6aWrVQTunNoneNGrZ_puFQvmQ-BlnxkAu1x4M6XBTgnOtODed1MI9sO_tANNHj6lNGwAKLKmajjw_Y_AZcO8xHed1ZkboLyWg1o-O1UMiYv9maG-lDJP2ZRwP7CMXjUaCFogxO2Obhh7Naqrqr7BElWOJ6aFyx4FfsrRMHN9aAzIUbHesgDXOjKbdjIItZ-7jIyRCbxrYbDPk14KH4GcII5pNsvFOMl2c5I7JgOLevIVQPO6Jln0O5Dq_t-zpvYwUQImnUkNAS0DRnI1UXeQrU-J99QS8O8g_gopAo62A2fRW3zkkB2uChmuZt_JsIkjj9D_gAmfFeGLvAlLCc1zWzzm-T3UImR1bNQzwOdtuSQR6Dptr3H4qEDMTFdAqh5m3ENk3aktnP9GeK2NTzrhbsWWyQhOAlCPd4ySrwTZPpc9glt2IHPCJwav1wTdqXP_hFfGh_ZtVdgOMJddvOSLzomRxn6r3FSti7Yx8X5RY2YIti1kvkpkCAjz1Nav0rnzRbjJkQr_arJNyVbi2a1X7lfH8qD8o-gA3PTL9BbLLRjCp7KeOSqim24rwp69Vp8EBy6_XXp21GHb8pEZl-R5jvrEvFmJBxlb6QSohwaLEsyZsw7WIj81DnSy5DE0LsSbWVuU1cufg4DzRuQHWrxxFy_whSq6G5zLekb4fhdpW2Q_wT2Q56R1FDjF12uAparG9qhu79odIzCVHa-yiKgNK_1rPWca_RxpkRCdgZigIBPDBk8ZoMZbYWUH12QdHuRiuO046YKbETKiU8xA8gEiN3ib0cel24J56Q5kbn7bHYTf6yCy1O56ek1dZA-1-rSw53AW0Id0Zd2HvHpfiqz8ZgcPtgLT4LMmhTsj7v4LuH3x8VwKgbwsWsCLKSfboGc3dK9nu7gklV2T0yYT3DF-7yuZFv0TsZY090bkGBQqPs3hKzgAqwSje9zqAofMhIWCM7iKpj_3_Gx_VIHQuZvtdslj0aDj1PIkECwoHN-0AxdxwGrskSNTZX4DH2m9NBTI_8A9scsk1hpRnJttRX0OycJoScM7XTfSBzBbeTcvPKZiE5GxJjJlcLhykTmkb8r_ROuGXBpFqDpoOrJ7g3PGoL97DafPDuHfK1LCKNlU7onkXUJ-qAmkh-396NLEv72-WmjKpsnAxBwPCI_BARF-EnrJBRSNjBIWNcKfCO7E-XTN-YyhAXE6K6gkP7rrN9RGvbsiwBV-YTqyQmywdW1tPTdUPTTB8v9awap8tjX2fBS-c06GoLHVGF_qbx2qYwEyc_ATSraV1wQ2zH2XyTnyEOxBnMgM3ZIoF9tsm7aKXK99judspkLA_wiQCBxTRArxeQRFmYKnMQGY9y-SavyaQGrIDf5qLdiCg_cU8DSMZaypR38aqB_6BApMGr4HEB7Zbui-c25e 200 in 842ms

"use client";

import React, { useState, FormEvent, useEffect } from "react";
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@workspace/ui/components/card";
import { Alert, AlertDescription } from "@workspace/ui/components/alert";
import { Label } from "@workspace/ui/components/label";
import { Loader2, Lock } from "lucide-react";
import {
	LoginFlow,
	UiNode,
	UiNodeAttributes,
	UiNodeInputAttributes,
	UpdateLoginFlowBody,
} from "@ory/client";
import { useSearchParams } from "next/navigation";
import { kratos } from "@/lib/ory";

type KratosErrorResponse = {
	response?: {
		status?: number;
		data?: {
			ui?: {
				messages?: Array<{ id?: number; text?: string; type?: string }>;
				nodes?: UiNode[];
			};
			error?: { message?: string };
		};
	};
	message?: string;
};

// Safe runtime check without a type predicate
function isInputNode(attrs: UiNodeAttributes): boolean {
	const t = (attrs as { node_type?: unknown }).node_type;
	// Accept both literal "input" and enum-backed values whose string value is "input"
	return t === "input" || String(t).toLowerCase() === "input";
}

function getNodeMessage(flowObj: LoginFlow | undefined, name: string) {
	const nodes = flowObj?.ui?.nodes ?? [];
	for (const n of nodes) {
		const attrs = n.attributes;
		if (isInputNode(attrs)) {
			const inputAttrs = attrs as UiNodeInputAttributes;
			if (inputAttrs.name === name) {
				const msgs = n.messages ?? [];
				if (msgs.length > 0 && msgs[0]?.text) {
					return msgs[0].text;
				}
			}
		}
	}
	return undefined;
}

function getHiddenCsrf(flowObj: LoginFlow | undefined) {
	const nodes = flowObj?.ui?.nodes ?? [];
	for (const n of nodes) {
		const attrs = n.attributes;
		if (isInputNode(attrs)) {
			const inputAttrs = attrs as UiNodeInputAttributes;
			if (inputAttrs.name === "csrf_token") {
				const value =
					typeof inputAttrs.value === "string"
						? inputAttrs.value
						: inputAttrs.value != null
							? String(inputAttrs.value)
							: "";
				return { name: inputAttrs.name, value };
			}
		}
	}
	return undefined;
}

export default function LoginPage() {
	const [loading, setLoading] = useState<boolean>(false);
	const [error, setError] = useState<string>("");

	const [flow, setFlow] = useState<LoginFlow>();
	const searchParams = useSearchParams();

	useEffect(() => {
		kratos
			.toSession()
			.then(({ data }) => {
				console.log("User is already logged in:", data);
				window.location.href = "/";
			})
			.catch(() => {
				// Not logged in, proceed to initialize or fetch the login flow
			});

		const id = searchParams.get("flow");
		if (!id) {
			kratos
				.createBrowserLoginFlow()
				.then(({ data }) => {
					setFlow(data);
					const url = new URL(window.location.href);
					url.searchParams.set("flow", data.id);
					window.history.replaceState({}, "", url.toString());
				})
				.catch((e: unknown) => {
					const err = e as Error;
					setError(err.message);
				});
		} else {
			kratos
				.getLoginFlow({ id })
				.then(({ data }) => {
					setFlow(data);
				})
				.catch((e: unknown) => {
					const err = e as Error;
					setError(err.message);
				});
		}
	}, [searchParams]);

	const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		setLoading(true);
		setError("");

		try {
			if (!flow) {
				setError("Login flow is not initialized.");
				setLoading(false);
				return;
			}

			const formData = new FormData(e.currentTarget);
			const email = String(formData.get("email") ?? "");
			const password = String(formData.get("password") ?? "");
			const csrfToken = String(formData.get("csrf_token") ?? "");

			const body: UpdateLoginFlowBody = {
				method: "password",
				identifier: email,
				password,
				csrf_token: csrfToken,
			};

			const { data } = await kratos.updateLoginFlow({
				flow: flow.id,
				updateLoginFlowBody: body,
			});

			console.log("Login successful:", data);
			// Optional redirect handling:
			// const redirectTo = (data as { redirect_browser_to?: string }).redirect_browser_to;
			// if (redirectTo) window.location.href = redirectTo;
		} catch (e: unknown) {
			const err = e as KratosErrorResponse;

			let apiError: string | undefined =
				err.response?.data?.ui?.messages?.[0]?.text;

			if (!apiError) {
				const nodes = err.response?.data?.ui?.nodes ?? [];
				for (const n of nodes) {
					const msg = n.messages?.[0]?.text;
					if (msg) {
						apiError = msg;
						break;
					}
				}
			}

			if (!apiError) {
				apiError =
					err.response?.data?.error?.message ||
					err.message ||
					"An unexpected error occurred while signing in.";
			}

			const status = err.response?.status ?? 0;
			if (status === 410 || status === 400 || status === 403) {
				try {
					const { data: newFlow } = await kratos.createBrowserLoginFlow();
					setFlow(newFlow);
					const url = new URL(window.location.href);
					url.searchParams.set("flow", newFlow.id);
					window.history.replaceState({}, "", url.toString());
					setError(apiError);
				} catch (createErr: unknown) {
					const ce = createErr as KratosErrorResponse;
					setError(
						ce.response?.data?.error?.message ||
							ce.message ||
							"Failed to refresh the login flow."
					);
				} finally {
					setLoading(false);
				}
				return;
			}

			setError(apiError);
		} finally {
			setLoading(false);
		}
	};

	const identifierMessage = getNodeMessage(flow, "identifier");
	const passwordMessage = getNodeMessage(flow, "password");
	const flowMessage = flow?.ui?.messages?.[0]?.text;
	const csrfNode = getHiddenCsrf(flow);

	return (
		<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4">
			<Card className="w-full max-w-md">
				<CardHeader className="space-y-1 text-center">
					<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary/10 mb-4">
						<Lock className="h-6 w-6 text-primary" />
					</div>
					<CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
					<CardDescription>Sign in to your account to continue</CardDescription>
				</CardHeader>

				<CardContent>
					{(error || flowMessage || identifierMessage || passwordMessage) && (
						<Alert variant="destructive" className="mb-6">
							<AlertDescription>
								{error || flowMessage || identifierMessage || passwordMessage}
							</AlertDescription>
						</Alert>
					)}

					<form onSubmit={handleSubmit} className="space-y-4">
						{csrfNode && (
							<input
								type="hidden"
								name={csrfNode.name}
								value={csrfNode.value}
								readOnly
							/>
						)}

						<div className="space-y-2">
							<Label htmlFor="email">Email</Label>
							<Input
								name="email"
								type="email"
								placeholder="Enter your email"
								required
								disabled={loading}
								autoComplete="username"
							/>
							{identifierMessage && (
								<p className="text-sm text-red-600">{identifierMessage}</p>
							)}
						</div>

						<div className="space-y-2">
							<Label htmlFor="password">Password</Label>
							<Input
								name="password"
								type="password"
								placeholder="Enter your password"
								required
								disabled={loading}
								autoComplete="current-password"
							/>
							{passwordMessage && (
								<p className="text-sm text-red-600">{passwordMessage}</p>
							)}
						</div>

						<Button type="submit" className="w-full" disabled={loading}>
							{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
							Sign in
						</Button>
					</form>

					<div className="mt-6 text-center space-y-2">
						<p className="text-sm text-muted-foreground">
							Don't have an account?{" "}
							<a
								href="/register"
								className="font-medium text-primary hover:underline"
							>
								Sign up
							</a>
						</p>
						<p className="text-xs text-muted-foreground">
							<a href="/forgot-password" className="hover:underline">
								Forgot your password?
							</a>
						</p>
					</div>
				</CardContent>
			</Card>
		</div>
	);
}

async function createOAuth2ConsentRequestSession(
	grantScopes: string[],
	consentRequest: OAuth2ConsentRequest,
	identityApi: IdentityApi
): Promise<AcceptOAuth2ConsentRequestSession> {
	// The session allows us to set session data for id and access tokens

	const id_token: { [key: string]: any } = {};

	if (consentRequest.subject && grantScopes.length > 0) {
		const identity = (
			await identityApi.getIdentity({ id: consentRequest.subject })
		).data;

		if (grantScopes.indexOf("email") > -1) {
			// Client may check email of user
			id_token.email = identity.traits["email"] || "";
		}
		if (grantScopes.indexOf("phone") > -1) {
			// Client may check phone number of user
			id_token.phone = identity.traits["phone"] || "";
		}
	}

	return {
		// This data will be available when introspecting the token. Try to avoid sensitive information here,
		// unless you limit who can introspect tokens.
		access_token: {
			// foo: 'bar'
		},

		// This data will be available in the ID token.
		id_token,
	};
}

serve:
  public:
    base_url: <http://127.0.0.1:4433>
    cors:
      enabled: true
      allowed_origins:
        - <http://127.0.0.1:3000>
        - <http://localhost:3000>
      allowed_methods:
        - GET
        - POST
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Content-Type
        - X-Session-Token
        - X-XSRF-TOKEN
        - X-CSRF-TOKEN
      allow_credentials: true
      exposed_headers:
        - Content-Type
  admin:
    base_url: <http://127.0.0.1:4434>
    cors:
      enabled: true
      allowed_origins:
        - <http://127.0.0.1:3000>
        - <http://localhost:3000>
      allowed_methods:
        - GET
        - POST
        - PUT
        - PATCH
        - DELETE
      allowed_headers:
        - Authorization
        - Content-Type
        - X-Session-Token
        - X-XSRF-TOKEN
        - X-CSRF-TOKEN
      allow_credentials: true
      exposed_headers:
        - Content-Type

The configuration contains values or keys which are invalid:
serve.admin: map[base_url:<http://127.0.0.1:4434> cors:map[allow_credentials:true allowed_headers:[Authorization Content-Type X-Session-Token X-XSRF-TOKEN X-CSRF-TOKEN] allowed_methods:[GET POST PUT PATCH DELETE] allowed_origins:[<http://127.0.0.1:3000> <http://localhost:3000>] enabled:true exposed_headers:[Content-Type]] host:0.0.0.0 port:4434 request_log:map[disable_for_health:false] socket:map[group: mode:493 owner:]]
             ^-- additionalProperties "cors" not allowed

Access to XMLHttpRequest at '<http://127.0.0.1:4434/admin/identities/53f85911-2c7c-437b-b59c-e58c66c86b22>' from origin '<http://127.0.0.1:3000>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

import {
	AcceptOAuth2ConsentRequestSession,
	Configuration,
	FrontendApi,
	IdentityApi,
	OAuth2Api,
	OAuth2ConsentRequest,
} from "@ory/client";

const kratos = new FrontendApi(
	new Configuration({
		basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,
		baseOptions: {
			withCredentials: true,
		},
	})
);

const identityApi = new IdentityApi(
	new Configuration({
		basePath: "<http://127.0.0.1:4434>",
		baseOptions: {
			withCredentials: true,
		},
	})
);

const hydra = new OAuth2Api(
	new Configuration({
		basePath: "<http://127.0.0.1:4445>",
	})
);

export { kratos, hydra };

async function createOAuth2ConsentRequestSession(
	grantScopes: string[],
	consentRequest: OAuth2ConsentRequest
): Promise<AcceptOAuth2ConsentRequestSession> {
	// The session allows us to set session data for id and access tokens

	const id_token: { [key: string]: any } = {};

	if (consentRequest.subject && grantScopes.length > 0) {
		const identity = (
			await identityApi.getIdentity({ id: consentRequest.subject })
		).data;

		if (grantScopes.indexOf("email") > -1) {
			// Client may check email of user
			id_token.email = identity.traits["email"] || "";
		}
		if (grantScopes.indexOf("phone") > -1) {
			// Client may check phone number of user
			id_token.phone = identity.traits["phone"] || "";
		}
	}

	return {
		// This data will be available when introspecting the token. Try to avoid sensitive information here,
		// unless you limit who can introspect tokens.
		access_token: {
			// foo: 'bar'
		},

		// This data will be available in the ID token.
		id_token,
	};
}

export { createOAuth2ConsentRequestSession };

{
  "error": "invalid_client",
  "error_description": "Client authentication failed (e.g., unknown client, no client authentication included, or unsupported authentication method). The OAuth 2.0 Client supports client authentication method 'client_secret_basic', but method 'client_secret_post' was requested. You must configure the OAuth 2.0 client's 'token_endpoint_auth_method' value to accept 'client_secret_post'."
}

hydra update oauth2-client fb3b9eda-566a-450c-b205-16fce888a2aa --name "EAGLE SSO" --grant-type authoriz
ation_code --grant-type refresh_token --response-type code --scope openid --redirect-uri <http://127.0.0.1:30>
01/auth/callback --endpoint <http://127.0.0.1:4445> --skip-consent --skip-logout-consent --token-endpoint-auth-method none

{
  "at_hash": "s1y6B9emtcI4RmHHrn_18g",
  "aud": [
    "3fcb8cbb-bbe8-4a90-ad2c-6eeca275db6e"
  ],
  "auth_time": 1758230726,
  "exp": 1758236491,
  "iat": 1758232891,
  "iss": "<http://127.0.0.1:4444>",
  "jti": "639b2339-96c0-4aa5-8b88-507f5d8e5131",
  "rat": 1758232888,
  "sid": "c5430cfc-183c-4614-9d60-82edb8763d0f",
  "sub": "53f85911-2c7c-437b-b59c-e58c66c86b22"
}