52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import { type Component, type JSX, onMount, onCleanup, createSignal, Show } from "solid-js";
|
|
import { pb } from "@/lib/pocketbase";
|
|
import { initStore } from "@/store";
|
|
|
|
interface EmbedAuthWrapperProps {
|
|
children: JSX.Element;
|
|
}
|
|
|
|
export const EmbedAuthWrapper: Component<EmbedAuthWrapperProps> = (props) => {
|
|
const [isHydrated, setIsHydrated] = createSignal(pb.authStore.isValid);
|
|
|
|
const handleMessage = (event: MessageEvent) => {
|
|
// You might want to add origin validation here if you know the sibling app domains
|
|
// if (event.origin !== "https://sibling-app.com") return;
|
|
|
|
const { data } = event;
|
|
if (data?.type === "TASGRID_AUTH" && data.token) {
|
|
console.log("Received TasGrid auth payload via postMessage");
|
|
|
|
// Hydrate PocketBase auth store
|
|
pb.authStore.save(data.token, data.user || null);
|
|
|
|
// Re-initialize store with new auth context
|
|
initStore().then(() => {
|
|
setIsHydrated(true);
|
|
});
|
|
}
|
|
};
|
|
|
|
onMount(() => {
|
|
window.addEventListener("message", handleMessage);
|
|
});
|
|
|
|
onCleanup(() => {
|
|
window.removeEventListener("message", handleMessage);
|
|
});
|
|
|
|
return (
|
|
<Show
|
|
when={isHydrated()}
|
|
fallback={
|
|
<div class="flex flex-col items-center justify-center h-full space-y-4">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
<p class="text-sm text-muted-foreground">Waiting for authentication...</p>
|
|
</div>
|
|
}
|
|
>
|
|
{props.children}
|
|
</Show>
|
|
);
|
|
};
|