Integration with SolidJS

[IgnisDa]

I got Hanko working with SolidJS and wanted to post my solution here in case someone needs it.

import { Hanko } from "@teamhanko/hanko-frontend-sdk";
import { hankoApiUrl } from "~/lib/env";
import { createEffect, onCleanup } from "solid-js";
import { client } from "~/lib/rspc";

const eventName = "hankoAuthSuccess";

export default function Auth() {
	const hanko = new Hanko(hankoApiUrl);

	const registerAccount = async () => {
		// do whatever
	};

	createEffect(async () => {
		const { register } = await import("@teamhanko/hanko-elements/hanko-auth");
		register({ shadow: true }).catch((_error) => {});
	});

	createEffect(() => {
		document.addEventListener(eventName, registerAccount);
		onCleanup(() => document.removeEventListener(eventName, registerAccount));
	});

	return (
		<div>
			<hanko-auth api={hankoApiUrl} lang={"en"} />
		</div>
	);
}