"use client";

import { hydra, kratos } from "@/lib/ory";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";

export default function ConsentPage() {
	const searchParams = useSearchParams();
	const consent_challenge = searchParams.get("consent_challenge");

	useEffect(() => {
		const fetchConsent = async () => {
			if (consent_challenge) {
				try {
					const challenge = await hydra
						.getOAuth2ConsentRequest({
							consentChallenge: consent_challenge,
						})
						.then(async ({ data: body }) => {
							if (body.skip || body.client?.skip_consent) {
								let grantScopes: string[] =
									body.requested_scope || [];
								if (!Array.isArray(grantScopes)) {
									grantScopes = [grantScopes];
								}

								grantScopes.push("email");
								grantScopes.push("profile");
								grantScopes.push("name");

								return hydra
									.acceptOAuth2ConsentRequest({
										consentChallenge: consent_challenge,
										acceptOAuth2ConsentRequest: {
											grant_scope: grantScopes,
											grant_access_token_audience:
												body.requested_access_token_audience,
											remember: true,
											remember_for: 3600,
										},
									})
									.then(({ data }) => {
										// All done, redirect the user back to Hydra!
										window.location.href = data.redirect_to;
									});
							}
						});
				} catch (error) {
					console.error("Error fetching consent request:", error);
				}
			}
		};

		fetchConsent();
	}, [consent_challenge]);

	return <div>Consent Page</div>;
}

"use client";

import { hydra, kratos } from "@/lib/ory";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";

export default function ConsentPage() {
	const searchParams = useSearchParams();
	const consent_challenge = searchParams.get("consent_challenge");

	useEffect(() => {
		const fetchConsent = async () => {
			if (consent_challenge) {
				try {
					const challenge = await hydra
						.getOAuth2ConsentRequest({
							consentChallenge: consent_challenge,
						})
						.then(async ({ data: body }) => {
							if (body.skip || body.client?.skip_consent) {
								let grantScopes: string[] =
									body.requested_scope || [];
								if (!Array.isArray(grantScopes)) {
									grantScopes = [grantScopes];
								}

								grantScopes.push("email");
								grantScopes.push("profile");

								return hydra
									.acceptOAuth2ConsentRequest({
										consentChallenge: consent_challenge,
										acceptOAuth2ConsentRequest: {
											grant_scope: grantScopes,
											grant_access_token_audience:
												body.requested_access_token_audience,
											remember: true,
											remember_for: 3600,
										},
									})
									.then(({ data }) => {
										// All done, redirect the user back to Hydra!
										window.location.href = data.redirect_to;
									});
							}
						});
				} catch (error) {
					console.error("Error fetching consent request:", error);
				}
			}
		};

		fetchConsent();
	}, [consent_challenge]);

	return <div>Consent Page</div>;
}

"use client";

import { createFileRoute } from "@tanstack/react-router";
import { exchangeCodeForToken } from "../../../lib/ory";
import { useEffect } from "react";

export const Route = createFileRoute("/auth/callback")({
	component: RouteComponent,
});

function decodeIdToken(idToken: string): any {
	const parts = idToken.split(".");
	if (parts.length !== 3) {
		throw new Error("Invalid JWT format");
	}
	const payload = parts[1];
	// Add padding if necessary
	const base64 =
		payload.replace(/-/g, "+").replace(/_/g, "/") +
		"=".repeat((4 - (payload.length % 4)) % 4);
	const decoded = atob(base64);
	return JSON.parse(decoded);
}

function RouteComponent() {
	// get the url params
	useEffect(() => {
		const checkTokens = async () => {
			const params = new URLSearchParams(window.location.search);
			const code = params.get("code");
			const state = params.get("state");

			// get the state from session storage
			const storedState = sessionStorage.getItem("oauth2_state");

			if (!code || !state || state !== storedState) {
				// Invalid request, redirect to home
				window.location.href = "/";
				return null;
			}

			try {
				const tokens = await exchangeCodeForToken({
					tokenUrl: "<http://127.0.0.1:4444/oauth2/token>",
					code: code,
					redirectUri: "<http://127.0.0.1:3001/auth/callback>",
				});

				// decode the id token to get user info
				const idToken = tokens.id_token;
				if (idToken) {
					const info = decodeIdToken(idToken);
					console.log("ID Token Info:", info);
				}
			} catch (error) {
				console.error("Error exchanging code for token:", error);
			}
		};

		checkTokens();
	}, []);

	return <div>You're authenticed!</div>;
}